⾛近Ts，⽤了爽，⽤后⼀直爽（⼀）
前⾔
vue3已经发布了，ts的脚步已经阻拦不住了，还只会es6?别想了，⼈家都已经在⾏动了，以下是ts的基本系列教程，ts的基本语法，⾼级语法等，以及在vue项⽬中如何应⽤ts，跟着我赶紧撸起来吧。
基本数据类型
数字
const a: number =3;
字符串
const b: string ="1";
数组
const c: number[]=[1,2,3];
const d: Array<number>=[1,3];
const arr: any[]=[1,"33",true];
元组
可以为数组中的每个参数定义相对应的类型
const e:[number, string]=[1,"ww"];
枚举
enum error {
blue =3,
"orange",
}
const f: error = ange;
console.log(f);//输出4
tips
1. 如果未赋值的上⼀个值是数字那么这个未赋值的值的是上⼀个值的值+1
2. 如果未赋值的上⼀个值未赋值那么输出的就是它的下标
3. 如果未赋值的上⼀个值的值是⾮数字，那么必须赋值
布尔类型
const g: boolean =true;
对象
const i: object ={};
undefined
常⽤于组合类型
let j: number | undefined;
null
let k:null;
void
指定⽅法类型，表⽰没有返回值,⽅法体中不能return
function aa():void{
console.log(1);
}
//如果⽅法有返回值，可以加上返回值的类型
function bb(): number {
return1;
}
never
其他类型 (包括null和undefined)的⼦类型，代表从不会出现的值
let l: never;
//匿名函数并抛出异常
l =(()=>{
throw new Error("111");
})();
任意类型
让参数可以是任何⼀种类型
let h: any =1;
h =true;
h ="st";
函数
函数申明
function cc():void{}
⽅法传参
function getUserInfo(name: string, age?: number, school: string ="清华⼤学"){ return`name:${name}--age:${age}--school:${school}`;
}
tips: ?代表这个参数可传可不传，不传就是undefined，也可定义个默认的值剩余参数
传递多个时，如果⽤了剩余参数，就可以把未定义的形参转换为数组。
function sum(a: number, b: number,...arr: number[]): number {
let sum: number = a + b;
arr.forEach((element)=>{
sum += element;
});
console.log(arr);[3,4,5]
return sum;
}
console.log(sum(1,2,3,4,5));//15
函数重载
function reload(name: string): string;
function reload(age: number): string;
function reload(param: any): any {
return typeof param ==="string"?`我是:${param}`:`我的年龄:${param}`;
}
console.log(reload(18));//年龄
tips: 被重载的⽅法，是没有⽅法体，可以根据参数的类型⾛其中⼀个⽅法并判断参数，但如果传⼊的参数类型不是任何被重载⽅法的参数类型就不允许通过。
第1个重载(共2个)，“(name: string): string”，出现以下错误。
类型“never[]”的参数不能赋给类型“string”的参数。抽象类的使用
第2个重载(共2个)，“(age: number): string”，出现以下错误。
类型“never[]”的参数不能赋给类型“number”的参数
类
class Person {
// 私有变量
private name: string;
// 构造函数
constructor(name: string){
this.name = name;
}
// 获取名字
getName(): string {
return this.name;
}
// 设置名字
setName(name: string):void{
this.name = name;
}
}
let p =new Person("张三");
p.setName("李四");
console.log(p);
继承
class Son extends Person {
// 静态属性
public static age: number =18;
// 学校
public school: string;
//构造⽅法
constructor(name: string, school: string){
// 访问派⽣类的构造函数中的 "this" 前，必须调⽤ "super"，初始化⽗类构造函数 --并把参数传给⽗类super(name);
//把传进来的school赋值给全局变量
this.school = school;
}
//静态⽅法
static run(name: string): string {
return`${name}在跑步，他的年龄才${this.age}`;
}
}
let son =new Son("王五","清华⼤学");
son.setName("赵六");// 私有类也不能在⼦类的外部访问，但可通过公开的⽅法中进⾏赋值和访问console.log(son);
console.log(Son.run("⽅七"));
console.log(Son.age);
tips:
1. public 在当前类⾥⾯，⼦类，类外⾯都可以访问
2. protected 在当前类和⼦类内部可以访问，类外部⽆法访问
3. private 在当前类内部可访问，⼦类，类外部都⽆法访问。
4. 属性不加修饰符，默认就是公有的 (public)
多态
通过抽象⽅法/⽅法重载–实现多态–多态的作⽤是⽤来定义标准
// 抽象⽗类
abstract class Animal {
private name: string;
constructor(name: string){
this.name = name;
}
//抽象成员--⽅法
abstract eat(): any;
//抽象成员--属性
protected abstract ages: Number;
sleep():void{
console.log("睡觉");
}
}
class cat extends Animal {
ages: Number =2;
constructor(name: string){
super(name);
}
//⾮抽象类“cat”不会⾃动实现继承⾃“Animal”类的抽象成员“eat”,  必须⼿动定义⽗类中的抽象⽅法--多态
eat(): string {
return"猫吃鱼";
}
//多态
sleep(): string {
return"猫在睡觉";
}
}
console.log(new cat("33").sleep());
tips:
1. 抽象类⽆法实例化。
2. ⾮抽象类继承抽象⽗类时不会⾃动实现来⾃⽗类的抽象成员，必须⼿动定义⽗类中的抽象成员，否则报错。
3. 抽象成员包括属性和⽅法
接⼝
在⾯向对象的编程中，接⼝是⼀种规范的定义，它定义了⾏为和动作的规范，
在程序设计⾥⾯，接⼝起到⼀种限制和规范的作⽤。
接⼝定义了某⼀批类所需要遵守的规范，接⼝不关⼼这些类的内部状态数据，也不关⼼这些类⾥⽅法的实现细节，它只规定这批类⾥必须提供某些⽅法，提供这些⽅法的类就可以满⾜实际需要。ts中的接⼝类似于java，同时还增加了更灵活的接⼝类型，包括属性、函数、可索引和类等。
属性接⼝
interface InterfaceName {
first: string;
second?: string;//加个问号，接⼝属性就可以变成可传可不传了，不传默认是undefined。
}
//打印变量
function logParam(name: InterfaceName):void{
console.log(name.first, name.second,11);
}
//定义参数
const obj ={ first:"1", second:"fff", three:1};
//logParam({ first: "1", second: "1", three: 1 }); //报错，只能传接⼝定义的值
logParam(obj);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。