接口可以在面向对象编程中表示行为的抽象，也可以描述对象的形状。 接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。 (接口中不能含有具体的实现逻辑)
接口就是把一些类中共有的属性和方法抽象出来，可以用来约束实现此接口的类
同名的接口可以写多个，类型会自动合并

  1. interface Person {
  2.   readonly id: number;
  3.   name: string;
  4.   [key:string]: any;
  5. }
  7. let p: Person = {
  8.   id: 1,
  9.   name: 'zhangsan',
  10.   age: 10
  11. }

一、对象类型接口

对象接口可以用来描述对象的形状结构。

  1. // 对象接口
  2. interface List {
  3.     id: number;
  4.     name: string;
  5. }
  6. interface Result {
  7.     data: List[]
  8. }
  9. function render(result: Result) {
  10.     result.data.forEach((value) => {
  11.         console.log(value.id, value.name)
  12.     })
  13. }
  14. let result = {
  15.     data: [
  16.         {
  17.             id: 1,
  18.             name: 'zhangsan',
  19.             sex: '1'
  20.         },
  21.         {
  22.             id: 2,
  23.             name: 'lisi'
  24.         }
  25.     ]
  26. }
  28. render(result)
  30. // 如果将result放在render中，就会对多余的数据进行类型检测
  31. 1、as 类型断言
  32. render({
  33.     data: [
  34.         {
  35.             id: 1,
  36.             name: 'zhangsan',
  37.             sex: '1'
  38.         },
  39.         {
  40.             id: 2,
  41.             name: 'lisi'
  42.         }
  43.     ]
  44. } as Result)
  46. 2、<>类型断言
  47. render(<Result>{
  48.     data: [
  49.         {
  50.             id: 1,
  51.             name: 'zhangsan',
  52.             sex: '1'
  53.         },
  54.         {
  55.             id: 2,
  56.             name: 'lisi'
  57.         }
  58.     ]
  59. })
  61. 3、改变接口
  62. interface List {
  63.     id: number;
  64.     name: string;
  65.       [x: string]: any;
  66. }
  67. 4、可索引接口
  68. 对数组和对象进行约束
  69. interface User {
  70.   [index: number]: string;
  71. }
  72. let user: User = {
  73.   0: '0',
  74.   1: '1'
  75. }
  77. let userArr: User = ['1','2']
  1. interface IVegetables {
  2.     readonly color:string,
  3.     size:string
  4. }
  5. interface IVegetables{
  6.     age?:number,
  7.     taste:'sour'|'sweet'
  8. }
  9. const tomato:IVegetables = {
  10.     color:'red',
  11.     size:'10',
  12.     taste:'sour'
  13. }
  14. tomato.color = 'green'; // 仅读属性不能进行修改

？标识的属性为可选属性, readOnly标识的属性则不能修改。多个同名的接口会自动合并

  1. const tomato:IVegetables = {
  2.     color:'red',
  3.     size:'10',
  4.     taste:'sour',
  5.     type:'蔬菜'
  6. } as IVegetables; // 多余的属性可以使用类型断言

二、函数类型接口

1、函数接口参数

  1. const fullName = ({firstName,lastName}:{firstName:string,lastName:string}):string =>{
  2.     return firstName + lastName
  3. }

我们可以约束函数中的参数，但是类型无法复用

  1. interface IFullName {
  2.     firstName:string,
  3.     lastName:string
  4. }
  5. const fullName = ({firstName,lastName}:IFullName):string =>{
  6.     return firstName + lastName
  7. }

我们可以通过接口进行描述

2、函数类型接口

  1. interface IFullName {
  2.     firstName:string,
  3.     lastName:string
  4. }
  5. interface IFn {
  6.     (obj:IFullName):string
  7. }
  8. const fullName:IFn = ({firstName,lastName})=>{
  9.     return firstName + lastName
  10. }
  13. // type定义函数
  14. type Add = (x: number, y: number) => number
  15. let add: Add = (a, b) => a + b

3、函数混合类型

  1. interface Lib {
  2.     (): void;
  3.     version: string;
  4.     doSomething(): void;
  5. }
  6. function getLib() {
  7.     let lib: Lib = (() => {}) as Lib;
  8.     lib.version = '1.0';
  9.     lib.doSomething = () => {};
  10.     return lib;
  11. }
  13. // 可以创建多个实例
  14. let lib1 = getLib();
  15. lib1();
  16. // 可以调用实例方法
  17. lib1.doSomething();

三、整理函数类型

1、如何定义函数

  1. 1、使用function直接定义（可以通过类型推断出函数返回值类型，所以不用直接定义）
  2. function add1 (x: number, y: number) {
  3.     return x + y;
  4. }
  6. 2、通过一个变量定义函数类型
  7. let add2: (x: number, y: number) => number
  9. 3、通过类型别名定义函数类型
  10. type add3 = (x: number, y: number) => number
  12. 4、通过接口定义函数类型
  13. interface add4 {
  14.     (x: number, y: number): number
  15. }
  17. 注意：后三种只是函数类型的定义，并没有实现。想要实现需要自己书写函数体。

2、函数的参数

3、函数重载

  1. function add8(...rest: number[]): number;
  2. function add8(...rest: string[]): string;
  3. function add8(...rest: any[]): any {
  4.     let first = rest[0];
  5.     if (typeof first === 'string') {
  6.         return rest.join('');
  7.     }
  8.     if (typeof first === 'number') {
  9.         return rest.reduce((pre, cur) => pre + cur)
  10.     }
  11. }
  12. console.log(add8(1, 2, 3)) // 6
  13. console.log(add8('a', 'b', 'c')) // abc