关于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 = unknownval = true; // OKval = 42; // OKval = "Hello World"; // OKval = []; // OKval= {}; // OKval = null; // OKval = 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岁'} // okconst 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;}