typescript学习笔记

2023-01-11 20:37:47 浏览数 (1)

1. 指令

1.1 全局安装

代码语言:javascript复制
1yarn global add typescript

1.2 生成配置文件

代码语言:javascript复制
1tsc --init

1.3 开启ts监听转换

代码语言:javascript复制
1//需要提前在tsconfig.json里面配置监听路径
2tsc --watch

2. 接口interface

2.1 对象类型接口:

代码语言:javascript复制
1interface ListItem{
2    id:number;
3    name:string;
4    age?:number; //?代表非必传.
5    readonly time:string //readonly代表只读属性
6    [key:string]:any //可扩展的属性
7}
8

2.2 函数类型接口:

代码语言:javascript复制
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关键字类使用接口,多个接口用逗号隔开

代码语言:javascript复制
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 接口也可以继承

代码语言:javascript复制
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. 数组定义

代码语言:javascript复制
1// 第一种
2const list:number[] = [1,2]
3// 第二种(数组泛型):
4const list2:Array<number> = [1,2]
5// 元组:
6const list3:[string,number,object,void]=["2",2,{},undefined]

4. 函数定义

可选参数:

代码语言:javascript复制
1const fn = (a:number,b?:number):number=>{
2    return b?a b:a
3}
4
5console.log(fn(1));//1

剩余参数:

代码语言:javascript复制
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);
10

5. 枚举

enum关键字定义一组枚举值,如果没赋值默认从0开始用下标作为值,如果第一个被赋值那么从第一个开始累加。

代码语言:javascript复制
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. 其他类型

复合类型:用|隔开

代码语言:javascript复制
1const a:number | string = "a"

任意类型any 无类型void(undefined和null)

7. 泛型

泛型generics,可以将某个变量的类型在调用的时候自己去定义

代码语言:javascript复制
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 泛型可继承接口:

代码语言:javascript复制
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 类使用泛型:

代码语言:javascript复制
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

0 人点赞