跳到主要内容

接口

一、认识​

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 类型别名与接口区别​

  • 定义类型范围不同: 接口只能定义对象类型或接口当名字的函数类型。type 可以定义任何类型，包括基础类型、联合类型、交叉类型、元组。
  • 接口可以 extends 继承一个或者多个接口或类，也可以继承 type ，但是 type 类型没有 extends 继承功能
  • type 交叉类型 & 可以让类型中的成员合并
  • 定义两个相同名称的接口会合并声明，定义两个同名的 type 会出现编译错误。