ts学习-对象与函数类型接口

1. 对象类型接口

interface List {
  id: number,
  name: string
}
interface Result {
  data: List[]
}
function render(result: Result) {
  result.data.forEach(value => {
    console.log(value.id, value.name);
  })
}
render({
  data: [
    {id: 1, name: 'A', sex: 'male'}, // 直接传入对象字面量，增加额外字段报错
    {id: 2, name: 'B'}
  ]
})
// 避免报错，方式1
let result = {
  data: [
    {id: 1, name: 'A', sex: 'male'}, // 增加额外字段不会报错，鸭式辨型法
    {id: 2, name: 'B'}
  ]
};
render(result);
// 避免报错，方式2，类型断言
render({
  data: [
    {id: 1, name: 'A', sex: 'male'}, // 直接传入对象字面量，增加额外字段报错
    {id: 2, name: 'B'}
  ]
} as Result);
// 或
render(<Result>{
  data: [
    {id: 1, name: 'A', sex: 'male'}, // 直接传入对象字面量，增加额外字段报错
    {id: 2, name: 'B'}
  ]
});
// 避免报错，方式3，字符串索引签名
interface List {
  id: number,
  name: string,
  [x: string]: any
}
// 可选属性age
interface List {
  id: number,
  name: string,
  age?: number,
}
function render(result: Result) {
  result.data.forEach(value => {
    console.log(value.id, value.name);
    if(value.age) {
      console.log(value.age);
    }
  })
}
let result = {
  data: [
    {id: 1, name: 'A', sex: 'male'},
    {id: 2, name: 'B', age: 18}
  ]
};
render(result);
// 只读属性id, 不允许被修改
interface List {
  readonly id: number,
  name: string,
}

// 不确定接口中属性个数，可索引类型的接口（数字/字符串去索引）
interface StringArray {
  [index: number]: string
}
let chars: StringArray = ['A', 'B'];

interface Names {
  [x: string]: string,
  // y: number // 不被允许
  [z: number]: string
}
interface Names {
  [x: string]: any,
  [z: number]: number // 被any类型所兼容
}

2. 函数类型接口

// 用变量定义一个函数类型
let add: (x: number, y: number) => number
//用接口定义
interface Add {
  (x: number, y: number): number
}
// 用类型别名
type Add = (x: number, y: number) => number
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();
let lib2 = getLib();

3. 函数相关知识点

• 函数定义

  // 1
  function add1(x: number, y: number) {
    return x + y;
  }
  // 2
  let add2: (x: number, y: number) => number
  // 3
  type add3 = (x: number, y: number) => number
  // 4
  interface add4 {
    (x: number, y: number): number
  }
  

• 可选参数, 必须位于必选参数之后

  function add5(x: number, y?: number) {
    return y ? x + y : x;
  }
  add5(1);
  add5(1, 2);
  

• 参数默认值

  function add6(x: number, y = 1, z: number, q = 2) {
    return x + y + z + q;
  }
  add6(1, undefined, 3);
  

• 剩余参数，参数个数不固定

  function add7(x: number, ...rest: number[] {
    return x + rest.reduce(pre, cur) => pre + cur;
  })
  add7(1,2,3,4,5);
  

• 函数重载

  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;
    }
  }
  add8(1,2,3); // 6
  add8('a','b','c'); // 'abc'