跳到主要内容

接口

一、认识​

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对对象的形状Shape进行描述。TypeScript接口 是为一系列同类对象或同类别的类提供属性和方法声明但没有任何赋值和实现的数据类型。

二、语法​

interface Foo {

}

三、特点​

3.1 继承​

interface Foo {
	a: string;
}
interface Bar extends Foo {
	b: number;
}

3.2 实现​

interface Type {
  name:string;
  age:number;
  sex?:string;
  say(str:string):string;
}

class Foo implements Type{
  name: string;
  age: number;
  sex?: string;
  say(str: string): string {
    return str;
  }
}

四、注解​

4.1 函数基础类型注解​

interface Type {
  (str: string): string;
}

const say: Type = (str) => {
  return str;
}

say('哈哈');

4.2 函数泛型类型注解​

interface Type<T> {
  (str: T): T;
}

const say: Type<string> = (str) => {
  return str;
}

say('哈哈');

4.3 对象基础类型注解​

interface Type {
  name:string;
  age:number;
}

const obj:Type = {
  name:'哈哈',
  age:23
}

4.4 对象泛型类型注解​

interface Type<T,V> {
  name:T;
  age:V;
  sex?:string;
  say(str:string):string;
}

const obj : Type<string,number> ={
  name:'哈哈',
  age:23,
  sex:'男',
  say(str){
    return str
  }
}

4.5 对象可选属性类型注解​

interface Type {
  name:string;
  age:number;
  sex?:string
}

const obj:Type = {
  name:'哈哈',
  age:23,
  sex:'男'
}

4.6 对象属性函数类型注解​

写法一: key(参数:参数类型):返回值类型写法

interface Type {
  name:string;
  age:number;
  sex?:string;
  say(str:string):string;
}

const obj:Type = {
  name:'哈哈',
  age:23,
  sex:'男',
  say(str){
    return str
  }
}

obj.say('哈哈');

写法二: key: (参数:参数类型) => 返回值类型写法

interface Type {
  name:string;
  age:number;
  sex?:string;
  say: (str:string) => string;
}

const obj:Type = {
  name:'哈哈',
  age:23,
  sex:'男',
  say(str){
    return str
  }
}

obj.say('哈哈');

4.7 对象不确定属性类型注解​

  • key 为 string 类型时: TypeScript 会将 number、string、symbol 统一转化为 string 类型

    interface Type {
      name:string;
      age:number;
      sex?:string;
      [key:string]:string|number
    }

    const obj:Type = {
      name:'哈哈',
      age:23,
      sex:'男',
      like:'篮球'
    }

  • key 为 number 类型时: TypeScript 会将 string 类型的 number 、 number 同意转化为 number 类型，也就是说会进行数据类型转换。如果转换之后不是非 NaN 的 number 类型，那么会报错

    interface Type {
      name:string;
      age:number;
      sex?:string;
      [key:number]:string|number
    }
    const obj:Type = {
      name:'哈哈',
      age:23,
      sex:'男',
      "333":'呵呵',
      444:'呵呵'
    }

4.8 使用对象类型注解中某个属性作为类型​

interface Type {
  a: string;
  b: number;
}

const a: Type['a'] = '';

五、问题​

5.1 Interface 与 Type 的区别？​

Type 可以描述一个对象或者函数, Type 还可以声明基本类型别名,联合类型, 元组等类型, Type 语句中还可以使用 typeof 获取实例的类型进行赋值。但是 Type 本身不能通过关键字扩展（extends）或被类实现（implements）, 但可以借助交叉类型 & 来合并类型, 从而达到类似扩展的效果。 Type 则不支持 声明合并。两者并不是相互独立的, 也就是说 Interface 可以 extends Type, Type 也可以与 Interface 类型交叉 。当需要表达联合类型、交叉类型、元组甚至简单基本类型的别名时，Type 会更灵活。

Interface 可以描述一个对象或者函数, Interface 不可以描述基本类型。 Interface 可以 extends 和 implement。Interface 支持声明合并（可以多次声明同一接口并自动合并） 。两者并不是相互独立的， 也就是说 Interface 可以 extends Type, Type 也可以与 Interface 类型交叉 。当只需要描述对象或函数的结构时，推荐使用 Interface, 因为其扩展和声明合并特性更适合面向对象的设计。