为什么要学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]