进阶TypeScript

Posted 2021-09-28 。。

TypeScript

1. 类型定义：

• boolean：

  const test: boolean = false

• number:

  const test: number

• string:

  const test: string = \'\'

• Array:

  const test: number[] = [1,2,3]
  const test: Array<number> = [1,2,3] // Array<number>泛型语法

• Enum枚举类型：

  // 无初始值，默认为0开始
  enum Test {
      FIRST,
      SECOND,
      THIRD
  }
  // 又初始值，从初始值累加
  enum Test {
      FIRST = 2,
      SECOND,
      THIRD
  }
  
  // 字符串枚举（TypeScript 2.4 开始）
  
  enum Test {
      FIRST = \'FIRST\',
      SECOND = \'SECOND\',
      THIRD = \'THIRD\'
  }
  
  // 异构枚举 （数字和字符串的混合）
  
  enum Test {
      FIRST,
      SECOND = ‘A’,
      THIRD = 8
  }

• any类型：（顶级类型，任何类型都可以被归为 any 类型）

  const test:any = 666

• unknown类型：（顶级类型， 所有类型也都可以赋值给 unknown）

  let val = unknown
  
  val = true; // OK
  val = 42; // OK
  val = "Hello World"; // OK
  val = []; // OK
  val= {}; // OK
  val = null; // OK
  val = undefined; // OK

• Tuple元组类型：

  const test: [string, number] = [\'test\', 123]

• void类型：

  const fn = ():void => {
      console.log(\'test\')
  }

• null 和 undefined: (null 和 undefined 是所有类型的子类型)

  const test: undefined = undefined

• never类型（表示的是那些永不存在的值的类型）

  function test(): never {
    while (true) {}
  }

2. 接口 （interface）

• 接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

• 基础示例:

  interface person {
      name: sting,
      age: number
  }
  
  const test: person = {
      name: \'小明\'
  }// 此时会报错，需要实现接口所有属性
  
  const test: person = {
      name: \'小明\',
      age: 11
  } // ok

• 可选属性：

  interface person {
      name: sting,
      age?: number
  }
  
  const test: person = {
      name: \'小明\'
  } // ok
  

• 只读属性：

  interface person {
      readonly name: sting
  }
  const test: person = {
      name: \'小明\'
  }
  test.name = \'小黑\' // error

• 联合类型：

  interface person {
      age: sting | number
  }
  
  const test: person = {
      age: \'25岁\'
  } // ok
  
  const test2: person = {
      age: 25
  } // ok

• 接口继承：

  interface person {
    name: string
  }
  
  interface surperMan extends person{
      age: number
  }
  
  const test: surperMan = {
      age: 25
  } // error，需要实现name

3. class类：

• 基础使用：

  class Test {
      name: string
      constructor (name:string) {
          this.name = name
      }
  }

• 继承：

  class ExtendTest extends Test {
      constructor (name: string) { 
          super(name)
      }
      getName (): string {
          return `名字是：${this.name}`
      }
  }

• 重写：

  class RewriteTest extends ExtendTest {
      constructor (name: string) { 
          super(name)
      }
      getName (): string {
          return `这是重写的方法：${this.name}
      }
  }

• readonly修饰符：

  class Test {
      readonly name: string
      constructor (name:string) {
          this.name = name // 必须初始化
      }
  }
  // 此时name属性不可更改

• Getter And Setter：

  class Test {
      private _name:string
      set name (name: string) {
          this._name = name
      }
      get name ():string {
          return this._name
      }
  }

• 静态属性：

  class Test {
      static name:string = \'小明\'
  }
  // 此时无需实例化，便可直接访问name属性

• 抽象类：

  abstract class Test {
      name:string
      abstract say() // 不要具体的实现
  }
  class AbstractTest extends Test{
      // 必须实现父类的抽象方法
      say(){
          console.log(`i’m saying`);
      }
  }

4. 函数：

• 基础使用：

  function sum(x: number, y: number): number {
      return x + y
  } // 一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到, 输入多余的（或者少于要求的）参数，是不被允许的：

• 可选参数：

  function buildName(firstName: string, lastName?: string)：string {
      if (lastName)
          return firstName + " " + lastName;
      else
          return firstName;
  }

• 默认参数：

  function sum(price:number, rate:number = 0.50): number { 
      const result = price + rate; 
      console.log("计算结果: ",result); 
      return result
  } 

5. 类型断言：

• 尖括号语法：

  const str: any = "this is a string"
  const length:number = (<string>str).length

• as语法:

  const str: any = "this is a string"
  const length:number = (str as string).length

6. 泛型：

当我们并不知道返回类型时，泛型函数就解决了这样的问题

• 基础用法

  function r<T>(args: T): T {
    return args;
  }
  r("icepy");
  r(100)
  r(true)
  // 虽然这看起来和 Any 非常的类似, 由于我们定义的是泛型函数，因此它并不会丢失类型，反而会根据我们传入的参数类型而返回一个类型，这也意味着我们可以将它适用于多个类型。

• 泛型类：

  class Test<T>{
    public add?: (x: T, y: T) => T;
  }
  
  const test = new Test<number>();
  test.add = (x: number, y: number): number => {
    return x + y;
  }