TypeScript 快速上手

为什么要学TypeScript

简单来说比 js 更健壮、易维护和拓展。

• ts 的最大优势之一是它引入了静态类型系统。这意味着你可以在编译时捕获错误，而不是在运行时。

• ts 支持接口、类和模块等面向对象编程的概念，这有助于组织和维护大型代码库。

TypeScript 演练场：https://www.typescriptlang.org/zh/play

注意：ts 还是要编译为 js，才能在浏览器或者Node.js环境中运行

1. 类型注解

let str1: string = 'hello'
str1 = 10	//报错

• 约束 str1 只能为 string 类型
• str1 = 10，在 js 里是可以的，但 ts 会报错：Type ‘number’ is not assignable to type ‘string’.

2. 类型推断，不建议使用

let str2 = 'hello'

• 省略了类型声明，根据字面量，会自动推断 str2 为字符串类型

3. 类型断言

let numArr = [1, 2, 3]
const result = numArr.find(item => item > 2)
console.log(result * 5)	 //报错

• 报错：‘result’ is possibly ‘undefined’.

  虽然我们认为，result 肯定是3，但程序推断也可能是undefined。ts比较严格，result 未明确类型，undefined * 5就会变为–>NaN

正确写法，加上 as number 来约束 result 的类型

let numArr = [1, 2, 3]
const result = numArr.find(item => item > 2) as number
console.log(result * 5)	 //成功打印

• 如果写 as any，就会回到最原始的任意类型（不建议写）

4. 基础类型和联合类型

let v1: string = 'abc'
let v2: number = 10
let v3: boolean = true
let nu: null = null
let un: undefined = undefined
let v4: string | null = null	//联合类型：v4只能被分配string 或 null类型
let v5: 1 | 2 | 3 = 2;		//限定值只能从1, 2, 3中选一个

5. 数组

let arr1: number[] = [1, 2, 3]
let arr2: Array<string> = ['a', 'b', 'c']

6. 元组

功能：指定数组的元素个数和每个元素的类型

let t1: [string, number, boolean?] = ['a', 1, true]

• ? 为可选项，该位置可不填，但是填了之后只能是对应的类型

7. 枚举

enum MyEnum {
    A,
    B,
    C
}

console.log(MyEnum.A)   //0
console.log(MyEnum.B)   //1
console.log(MyEnum.C)   //2

console.log(MyEnum[0])  //"A"
console.log(MyEnum[1])  //"B"
console.log(MyEnum[2])  //"C"

8. 函数

function MyFn1(a: number, b: string): string {
 return a + b;
}
//a 和 b 规定了约束了参数的类型
//():string 约束了返回值的类型。可以为 void 表示函数无返回值

function MyFn2(a: boolean, b = 10, c?: string, ...rest: number[]): boolean {
 return a;
}
//b 和 c 都为可选项
//b 不填则默认为 10，c 不填默认没有
//...rest 为剩余参数，且剩余值为一个数组结构，则可对其进行约束，为...rest: number[]
//注意，必选参数在左，可选参数在右，否则报错

//使用
const f: boolean = MyFn2(true, 20, "zx", 1, 2, 3, 4, 5);
console.log(f);		//true 

9. 接口

//正常定义对象类型
const obj = {
 name: "zhangsan",
 age: 20,
};

//使用接口
interface Person {
 name: string;
 age: number;
};

//使用该接口来定义对象
const p1: Person = {
 name: "zhangsan",
 age: 10,
};

10. 类型别名

//若很多参数都需要定义约束类型
let a: string | number = 10;
let b: string | number = 'a';
let c: string | number = 30;
​
//则使用类型别名
type MyType = string | number;
let a: MyType = 10;
let b: MyType = 'a';
let c: MyType = 30;

11. 泛型

//对函数定义泛型
function myFn<T>(a: T, b: T, ...r: T[]): T[] {
 return [a, b, ...r];
}

//使用
//也可以 const arr = myFn(1, 2, 3, 12, 3); 因为 ts 支持类型推断
const arr: number[] = myFn<number>(1, 2, 3, 12, 3);
console.log(arr);

//输出
[1, 2, 3, 12, 3]