ts基础

水深无声 2022-10-24 11:58 198阅读 0赞

1.  定义属性

interface Person { 
        name: string
        age: number
        [k:string]: any
    }
    
    const person: Person = { 
        name: 'zhangsan',
        age: 12,
        hobby: ['a','b'],
        job: '' 
    }

1.  as、is、in、keyof  
    as: 类型断言，类型断言纯粹是一个编译时语法，同时，它也是一种为编译器提供关于如何分析代码的方法；  
    is：判断一个变量属于某个接口/类型；  
    in：检查一个对象是否存在某个属性；  
    keyof：获取某种类型的所有键,返回联合类型

interface A { 
    		a: string;
    	}
    	const obj = { 
    		a: '1111'
    	}
    	console.log('a' in obj); // true
    	console.log('b' in obj); // flase

1.  interface与type  
    一般情况下优先使用interface：ts是需要经过编译成js文件，interface在编译之后是要被消除的（interface在运行时是会被完全消除的），因此优先使用interface。  
    [3.1 interface参考文章][3.1 interface]  
    [3.2 interface与type区别][3.2 interface_type]

// 其中一个区别: 
    interface Person { 
        name: string;
        age: number;
    }
    
    interface Person { 
        hobby: string[];
    }
    
    // 最后Person变为 (即可以合并)
    /* interface Person { name: string; age: number; hobby: string[]; } */
    
    type Person = { 
        name: string;
        age: number;
    }
    
    /* // 如果再次声明会报错， 即不能合并 type Person = { hobby: string[]; } */

4.implements (类实现接口)

// 类实现接口本质上也是一样的，即类遵循接口的约束，接口里面写了多少个函数、参数，
     // 实现的类里面也要写相同的函数、参数
    interface ClockInterface{ 
        currentTime:Date;
        getTime(d:Date);
    }
    class Clock implements ClockInterface{ 
        currentTime:Date;
        getTime(){ 
            console.log("123");
        }
        constructor(h:number,m:number){ }
    }
    let clock1=new Clock(30,40);
    clock1.getTime();

接口(继承)接口
    interfaceA extends interfaceB
    
    类实现接口
    classA implements interfaceA
    
    接口继承类
    interfaceB extends classB
    
    另外类扩展类
    classA extends classB

1.  联合类型

type a = number | string;
    	interface A { 
    		a: number | null  // 联合类型
    	}

1.  泛型(作用：避免定义多个类)  
    泛型约束（利用extends继承）：

// 1、
    interface Person { 
      name: string;
    }
    
    function personLog<T extends Person>(arg: T): T { 
      console.log(arg.name);
      return arg;
    }
    
    // 2、extends 后面可以对泛型进行约束
    const fun = <T extends Record<string,number>>(arg: T) => { 
         return arg;
    }

[泛型的高级类型用法][Link 1]：包括Record、Pick、Partial、Require、Exclude、Extract 等等

1.  never与void  
    void 表示没有任何类型，never 表示永远不存在的值的类型。当一个函数返回空值时，它的返回值为 void 类型，但是，当一个函数永不返回时（或者总是抛出错误），它的返回值为 never 类型。

8.定义数组

const arr1: string[] = ['aaa','bbb']; // ok
    // const arr2: string[] = ['aaa',1]; // error
    const arr1: (number | string)[] = ['aaa',123,'bbb']; // ok

9.定义对象类型

const o: object = { }; // ok
    const arr: object = []; //ok

10.readonly 与 const  
最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const，若做为属性则使用readonly。

1.  交叉类型 (同时满足)

interface A { 
        name: string;
    }
    
    interface B { 
        age: number;
    }
    
    const obj: A & B = { 
        name : '',
        age :12
    };
    
    // A 和 B 里面不能有相同的属性

[3.1 interface]: https://blog.csdn.net/niitlcj/article/details/80740864
[3.2 interface_type]: https://blog.csdn.net/lomo_2019/article/details/99589627?ops_request_misc=%25257B%252522request%25255Fid%252522%25253A%252522161190996116780299056724%252522%25252C%252522scm%252522%25253A%25252220140713.130102334..%252522%25257D&request_id=161190996116780299056724&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-99589627.first_rank_v2_pc_rank_v29&utm_term=type%25E5%2592%258Cinterface
[Link 1]: https://blog.csdn.net/qq_33221861/article/details/112369522?ops_request_misc=%25257B%252522request%25255Fid%252522%25253A%252522161191303216780274148395%252522%25252C%252522scm%252522%25253A%25252220140713.130102334..%252522%25257D&request_id=161191303216780274148395&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-3-112369522.first_rank_v2_pc_rank_v29&utm_term=ts%25E6%25B3%259B%25E5%259E%258B