关于javascript:进阶TypeScript

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;}