typescript

TS编译

1. 安装TypeScript
   npm install -g typescript
2. 编写代码
   xxx.ts
3. 编译代码
   tsc xxx.ts
   或者
   tsc xxx.ts -w

ts配置文件

1. 创建配置文件
   tsc --init
2. 监测ts文件
   tsc -w

1. 基础知识

1. 基础知识点

   基础知识点补充：

   1. 装饰器
      装饰器是用来基于原有函数，在不改变原有函数代码的情况下，通过装饰器的写法，去侵入原有函数，改变原有函数的逻辑，装饰器本质上是一种语法糖
      例：
      
   2. 装饰器叠加
      在Typescript中，当多个装饰器应用在一个声明上时，会进行如下步骤的操作。
      由上至下依次对装饰器表达式求值。
      求值的结果会被当作装饰器函数，由下至上依次被调用。
      即求值由上到下，调用由下到上。
      例：

      function f() {
          console.log("f(): evaluated");
      	return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
              console.log("f(): called");
      	}
      }
      
      function g() {
          console.log("g(): evaluated");
          return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
              console.log("g(): called");
          }
      }
      
      class C {
           @f()
           @g()
      	 method() {}
      }
      // 结果：
      f(): evaluated
      g(): evaluated
      g(): called
      f(): called
      

      类中不同声明上的装饰器将按以下规定的顺序应用
      参数装饰器==》方法装饰器==》访问器（get / set）装饰器==》属性装饰器==》参数装饰器应用到构造函数==》类装饰器应用到类

2. 范型工具类型

   1. Partial<T> 的作用就是将某个类型里的属性全部变为可选项 ?
   2. Required<T> 的作用是将某个类型里的属性全部变为必选项
   3. Readonly<T> 的作用是将某个类型里的属性全部变为
   4. Record<K extends keyof any, T> 的作用是将 K 中所有的属性的值转化为 T 类型。
   5. Pick<T, K extends keyof T> 的作用是将某个类型中的子属性挑出来，变成包含这个类型部分属性的子类型。
   6. Exclude<T, U> 的作用是将某个类型中属于另一个的类型移除掉。
   7. Extract<T, U> 的作用是将某个类型中属于另一个的类型提取出来
   8. ReturnType<T> 的作用是用于获取函数 T 的返回类型。
      …

3. as const 或者 <const>

   宽泛类型
   let a = ‘AA’ //相当于let a: string = ‘AA’
   const arr = [‘hello TS’, 2021] // 相当于const arr: (string | number)[] = [‘hello TS’, 2021]
   值类型.
   一：const b = ‘BB’ //相当于const b: ‘BB’ = ‘BB’
   二：let c: ‘CC’ | ‘DD’ = ‘CC’ // c的值只能是’CC’或者’DD’
   三：let f = ‘FF’ as const //相当于let f: ‘FF’ = ‘FF’
   四：const arr = [‘hello TS’, 2021] as const // 相当于const arr: readonly [“hello TS”, 2021] = [‘hello TS’, 2021] 变成只读的元祖类型

4. ts练习题

2. 面试题及实战

1. 你觉得使用ts的好处是什么?

1. TypeScript是JavaScript的加强版，它给JavaScript添加了可选的静态类型和基于类的⾯向对象编程，它拓展了JavaScript的语法。所以ts的功能比js只多不少.
2. Typescript 是纯面向对象的编程语言，包含类和接口的概念.
3. TS 在开发时就能给出编译错误， 而 JS 错误则需要在运行时才能暴露。
4. 作为强类型语言，可以明确知道数据的类型。代码可读性极强，几乎⼈人都能理解。
5. ts中有很多很⽅便的特性, 比如可选链.

2. type 和 interface的异同

重点: 用interface描述数据结构，用type描述类型

1. 都可以描述一个对象或者函数

   interface User {
   	name: string      
   	age: number 
   }
   interface SetUser {
       (name: string, age: number): void;
   }
   type User = {
   	name: string
   	age: number
   };
   type SetUser = (name: string, age: number)=> void;
   

2. 都允许拓展(extends)
   interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多，但是两者语法不同。

   // interface extends interface
     interface Name {
       name: string;
     }
     interface User extends Name {
       age: number;
     }
     // type extends type
     type Name = {
       name: string;
     }
     type User = Name & { age: number  };
     // interface extends type
     type Name = {
       name: string;
     }
     interface User extends Name {   
           age: number;
     }
     // type extends interface
     interface Name {
       name: string;
     }
     type User = Name & {
       age: number;
     }
   

3. 只有type可以做的
   Type 可以声明基本类型别名，联合类型，元组等类型

   // 基本类型别名
   type Name = string
   // 联合类型 
   interface Dog {
   	wong(); 
   }
   interface Cat {
       miao();
   }
   type Pet = Dog | Cat
   // 具体定义数组每个位置的类型 
   type PetList = [Dog, Pet]
   // 当你想获取一个变量的类型时，使用
   typeof let div = document.createElement('div'); 
   type B = typeof div
   

3. 基于一个已有类型，扩展出大部分内容相似，但部分区别的类型？

1. 方法一：
   Pick和Omit

   interface Test {
       name: string;
   	sex: number;
       height: string;
   }
   // Pick从一个类型中选取XXX
   type Sex = Pick<Test, 'sex'>;
   const a: Sex = { sex: 1 };
   
   // Omit从一个类型中排除XXX
   type WithoutSex = Omit<Test, 'sex'>;
   const b: WithoutSex = { name: '1111', height: 'sss' };
   

2. 方法二：
   范型工具类型

3. 什么是泛型,泛型的具体使用?

泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，使用时再去指定类型的一种特性。
可以把泛型理解为代表类型的参数

//例：
// T不传时，类型为any
interface Test<T = any> {
         userId: T;
}
type TestA = Test<string>;
type TestB = Test<number>;
              
const a: TestA = {
    userId: '111',
};
const b: TestB = {
    userId: 2222,
};

4. 手写装饰器

1. 写一个延迟执行方法的方法装饰器

   // 延时执行函数的装饰器
   function sleepDo(timer: number){
       return (target: object, name: string, descriptor: any)=>{
           console.log('cn----target', target)
           console.log('cn----name', name)
           console.log('cn----descriptor', descriptor)
           let oldMethod = descriptor.value
           descriptor.value = function(...args: string[]){
               setTimeout(()=>{
                   oldMethod.call(this, ...args)
               }, timer)
           }
       }
   }
   
   class PeoPle{
       @sleepDo(2000)
       public sayWords(words: string){
           console.log(words)
       }
   }
   
   let xiaoming = new PeoPle()
   xiaoming.sayWords('hi')