TypeScript 的和实践 ｜ 青训营

一、TS是什么

TypeScript 是一种由微软开发的开源编程语言。它是 JavaScript 的一个超集，也就是说，任何有效的 JavaScript 代码也是有效的 TypeScript 代码。你可以把 TypeScript 看作是 JavaScript 的升级版，它在 JavaScript 的基础上增加了很多有用的特性，例如类型系统和类，接口，枚举等。

二、 数据类型

2.1字符串类型

let str:string='你好呀';

2.2数值类型

let num:number =123;

2.3布尔类型

let bool:boolean =true;

2.4 any

let n:any= [1,2,3]; 可以接受所有的数据类型

2.5 undefined

let un:undefined=undefined;

2.6null

let nu:null=null;

2.7数组

a>数组的每一个成员都是number类型

let arr1:number[]=[1,2,3,4];

b>数组的成员可能有某些类型

let arr2:(string | number boolean)[]=['a','b','c',100,true];

c>数组的每一个成员都是numbe r类型

let arr3:Array<number>=[1,2,3,4];

d>元组的形式：规定每一位成员的类

let arr4:[string,string,number]=['a','b',10];

2.8 void 代表没有返回值

function fun(a:number,b:number ):void{ 
    let c =a b;
}
fun(1,2);

2.9 object

let obj:object={ 
        message:'成功',
        data:{
        list:['a','b','c'] 
    },
        success:true;
}

三、函数的约束

3.1普通写法

function fun1(a:number ,b:number ):number{ return a b; } fun1(1,2);

3.2函数的可选参数：缺省？

function fun2(a:number ,b*?*:number ):void{ } fun2(1)

3.3函数参数的默认值

function fun3(a:number,b:number=111 ){

}

fun3(1,2);

3.3变量或者常量来声明函数的写法

let fun4:(a:number,b:number)=>number =(a:number,b:number ):number =>{ 
    return a,b;
} 
 fun4(1,2);

四、泛型

4.1什么是泛型

泛型：是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

4.2函数的泛型

function fun1<T>(arg:T):T{ return arg; } fun1<string>('你好')； fun1<number>(123);

这里的T,是一个标识符，可以写成任何的东西，一般写成：T、U、M

也可以定义多个泛型：

function fun2<T,U>(a:T,b:U){ } fun2<number,string>(1,'2');

五、类和抽象类

5.1写法

class Person{ 
    userName:string;
    userAge:number;
    constructor(name:string,age:number){ 
    this.userName name; 
    this.userAge age; 
   } 
    run():number{ 
       return this.userAge; 
   } 
Let p1=new Person('张三'，28);
}

5.2修饰符

public公开的，在任何地方都可以访问 protected受保护的，只能在当前类和当前类的子类内部使用 private私有的，当前类的内部使用

5.3抽象类

a>写法

abstract class Person{
    abstract run():number;
} 

1)抽象类不可以new ;

2)如果有类继承抽象类，必须在类中要实现抽象类中的方法;

六. 实践

6.1TypeScript 类的使用实践

TypeScript中类的使用方式基本和ES6的类是一样的，提供了更为丰富的面向对象编程的模型。

示例：

typescriptCopy code
class Animal {
    name: string;
    constructor(theName: string) {
        this.name = theName;
    }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

let dog = new Animal('Dog');
dog.move(10);

此外，TypeScript还支持访问修饰符（public、private、protected）、静态属性、抽象类等面向对象编程的特性。

6.2. TypeScript 泛型的使用实践

在函数名后面使用尖括号<T>来定义一个泛型：

typescriptCopy code
function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("myString");  // type of output will be 'string'

在上面的代码中，T 是一个占位符，代表任何类型。当我们调用这个函数时，可以指定 T 是什么类型，然后这个类型就会被用于参数和返回值。

TypeScript 还支持多个泛型参数，以及泛型接口、泛型类和泛型约束。

6.3. TypeScript 类型约束的使用实践

你可以使用 extends 关键字来实现类型约束：

typescriptCopy code
function getProperty<T, K extends keyof T>(obj: T, key: K) {
    return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, "a"); // okay
getProperty(x, "m"); // error: Argument of type 'm' isn't assignable to 'a' | 'b' | 'c' | 'd'.

上面的代码中，K 是泛型参数，keyof T 是类型查询，代表 T 的所有公有属性的联合类型。K extends keyof T 的意思是，K 必须是 T 的公有属性的一种。

这样，我们就可以确保，当我们从 obj 获取 key 属性时，obj 确实有这个属性，从而避免了运行时错误。

这篇好文章是转载于：学新通技术网