TypeScript——接口类型

一、接口对象类型

  • 接口 可以用来约束函数、对象、类型的结构和类型
  interface list{
      readonly id: number;    //只读属性 不允许修改的
      name: string;
      [x: string]: any;   //字符串索引签名 
      //含义:是用任意的字符串去索list 可以得到任意的结果 这样list就可以支持更多个属性了
      age?: number;           //可选属性 表示这个属性可以有可以没有
  }
  interface Result {
      data: list[]
  }
  function render(result: Result){
      result.data.forEach(element => {
          console.log(element.id, element.name)
      });
  }
  
  //假设后端传值类型是
  let result = {
      data: [
          {id: 1, name: 'A', sex: 'boy'},
          {id: 2, name: 'B'}
      ]
  }
  
  render(result)
  
  //
  render({
      data: [
          {id: 1, name: 'A', sex: 'boy'},
          {id: 2, name: 'B'}
      ]
  } as Result)
  
  
  render(<Result>{
      data: [
          {id: 1, name: 'A', sex: 'boy'},
          {id: 2, name: 'B'}
      ]
  })
  type Add = (x:number, y: number) => number //类型别名 这个别名就是Add
  
  let Add: Add = (a,b) => a + b
  • 混合接口 定义一个类库
//混合接口 定义一个类库
interface Lib {
    (): void;
    version: string;
    doSomething(): void;
}

function GetLib() {
    let lib: Lib = (() => {}) as Lib;
    lib.version = '1.0';
    lib.doSomething = () => {}
    return lib;
} 
let lib1 = GetLib();
lib1();
lib1.doSomething();
  • 函数定义
function add1(x:number, y:number){
    return x + y;
}
let add2: (x:number, y:number) => number
type add3 = (x:number, y:number) => number

interface add4 {
    (x: number, y: number): number
}

//可选参数 
//必选参数不能位于可选参数之后
function add5 (x:number, y?:number) {
    return y? y + x : x;
}

function add6(x:number, y = 0, z: number, q =1){

}

//剩余函数
function add7(x:number, ...rest: number[]){
    return x + rest.reduce((pre, cur) => pre + cur)
}
  • 函数重载
//函数重载
function add8(...rest:number[] ): number;
function add8(...rest: string[] ): string;
function add8(...rest: any[] ): any {
    let first = rest[0];
    if(typeof first === 'string'){
        return rest.join('')
    }
    if(typeof first === 'number'){
        return rest.reduce((pre, cur) => pre + cur)
    }
}

console.log(add8(1,2,3))	//6
console.log(add8('A','B','C'))	//ABC

版权声明:本文为qq_42244470原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。