typescript学习笔记
2023-02-25 18:27:39 时间
1. 指令
1.1 全局安装
1yarn global add typescript1.2 生成配置文件
1tsc --init1.3 开启ts监听转换
1//需要提前在tsconfig.json里面配置监听路径
2tsc --watch2. 接口interface
2.1 对象类型接口：
1interface ListItem{
2 id:number;
3 name:string;
4 age?:number; //?代表非必传.
5 readonly time:string //readonly代表只读属性
6 [key:string]:any //可扩展的属性
7}
82.2 函数类型接口：
1interface SearchFn {
2 (source: string, substring: string): boolean;
3}
4
5const search: SearchFn = (source, substring) => {
6 return source.search(substring) !== -1;
7};2.3 类接口(类的抽象)：
implements关键字类使用接口，多个接口用逗号隔开
1interface isClass{
2 alert():boolean,
3 a:number
4}
5interface isClass2{
6 alert2():any[],
7 b:string
8}
9
10class Demo implements isClass,isClass2{
11 a=123
12 b=""
13 alert() {
14 return true
15 }
16 alert2() {
17 return []
18 }
19}2.4 接口也可以继承
1interface isClass{
2 alert():boolean,
3 a:number
4}
5interface isClass2 extends isClass{
6 alert2():any[],
7 b:string
8}
9
10class Demo implements isClass2{
11 a=123
12 b=""
13 alert() {
14 return true
15 }
16 alert2() {
17 return []
18 }
19}3. 数组定义
1// 第一种
2const list:number[] = [1,2]
3// 第二种(数组泛型)：
4const list2:Array<number> = [1,2]
5// 元组：
6const list3:[string,number,object,void]=["2",2,{},undefined]4. 函数定义
可选参数：
1const fn = (a:number,b?:number):number=>{
2 return b?a+b:a
3}
4
5console.log(fn(1));//1剩余参数：
1// 将剩余参数放进一个数组里
2const arr = (array:any[],...items:any[]):any[]=>{
3 items.forEach(item=>{
4 array.push(item)
5 })
6 return array
7}
8const newArr = arr([],1,2,3)
9console.log(newArr);
105. 枚举
enum关键字定义一组枚举值,如果没赋值默认从0开始用下标作为值,如果第一个被赋值那么从第一个开始累加。
1// 枚举
2enum data{
3 a,
4 b,
5 c
6}
7console.log(data);
8//{ "0": "a", "1": "b", "2": "c", a: 0, b: 1, c: 2 }6. 其他类型
复合类型:用｜隔开
1const a:number | string = "a"任意类型any 无类型void（undefined和null）
7. 泛型
泛型generics,可以将某个变量的类型在调用的时候自己去定义
1// 普通函数写法
2function createArray<T>(length:number,value:T):T[] {
3 const result:T[] = []
4 for (let i = 0; i < length; i++) {
5 result[i] = value
6 }
7 // result.push(1) //防止这种错误，中途插入了错误类型的数据
8 return result
9}
10const array = createArray<string>(3,"a")
11console.log(array);
12
13// 箭头函数写法
14const createArray2 = <T>(length: number, value: T): T[] => {
15 const result: T[] = [];
16 for (let i = 0; i < length; i++) {
17 result[i] = value;
18 }
19 // result.push(1) //防止这种错误，中途插入了错误类型的数据
20 return result;
21};
22const array2 = createArray2<string>(3,"a")
23console.log(array);7.1 泛型可继承接口：
1// 泛型可继承接口
2interface demo{
3 length:number
4}
5const isLength =<T extends demo> (value:T) =>{
6 return value.length
7}
8
9console.log(isLength("3"));7.2 类使用泛型：
1// 类使用泛型
2class Test<T> {
3 value:T
4 add:(x:T,y:T)=>boolean
5}
6const test = new Test<string>()
7test.value = ""
8test.add=(x,y)=>x===y