关于 TypeScript 接口,你需要知道的十件事

上一篇 / 下一篇  2023-03-24 11:13:23

  TypeScript 中的接口是一个非常灵活的概念。除了抽象类的部分行为外,它还经常被用来描述“一个对象的形状”。
  01.必需的属性
  定义接口时,需要使用interface关键字:
  interface User {
    name: string;
    sex: string;
  }
  const user: User = {
    name: "Bytefer",
    sex: "male",
  };
  在上面的代码中,我们定义了一个用户界面。然后定义一个用户变量并将其类型设置为用户类型。
  但是,如果我们给用户变量赋值,相关的属性就丢失了。然后,TypeScript编译器会提示相关错误。例如,在下面的代码中,我们在分配时缺少 sex 属性:
  那么如何解决上面的错误呢?解决方案之一是使用 ? 在定义接口时声明一些属性是可选的。
  02.可选属性
  interface User {
    name: string;
    sex?: string;
  }
  let user: User = { // OK
    name: "Bytefer",
  };
  user = { // Ok
    name: "Bytefer",
    sex: "male",
  };
  既然不允许缺少属性,那么可以添加未声明的属性吗?
  从上图可以看出,使用对象字面量赋值时,包括未声明的age属性,也会报错。解决此问题的最简单方法是向 User 类型添加一个 age 属性:
  interface User {
    name: string;
    sex?: string;
    age: number;
  }
  这种方案虽然可以解决问题,但是如果我们想添加其他任意属性,这种方式就不太好了。为满足上述要求,我们可以使用索引签名。
  03.索引签名
  索引签名的语法如下:
  键的类型只能是字符串、数字、符号或模板字面量类型,而值的类型可以是任何类型。
  现在我们了解了索引签名的语法,让我们更新用户类型:
  interface User {
    name: string;
    sex?: string;
    [propName: string]: any; // Index Signatures
  }
  更新 User 类型,并添加新的 age 和 email 属性后,TypeScript 编译器不会提示错误。
  let user: User = {
    name: "Bytefer",
    sex: "male",
    age: 30,
    email: "bytefer@gmail.com"
  };
  04.只读属性
  在web系统中,我们需要区分不同的用户,一般情况下,我们会使用一个id属性来标识不同的用户。该属性由Web系统自动生成,用户无法修改。对于上面的场景,我们可以使用readonly修饰符来定义只读属性。
  除了属性之外,对象还可能包含方法。在使用接口定义对象类型时,我们还可以同时声明对象上存在的方法:
  interface User {
    id: string;
    name: string;
    say(words: string): void;
  }
  let user: User = {
    id: "6666",
    name: "Bytefer",
    say(words: string) {
      console.log(words);
    },
  };
  05.Call Signatures
  描述函数的最简单方法是使用函数类型表达式,这些类型在语法上类似于箭头函数:
  const log: (msg: string) => void = (msg: string) => {
    console.log(msg);
  };
  log("Bytefer");
  语法 (msg: string) => void 的意思是“一个函数,它有一个名为 msg 的参数,类型为字符串,没有返回值”。当然,我们可以使用类型别名来命名函数类型:
  type LogFn = (msg: string) => void;
  const log: LogFn = (msg: string) => {
    console.log(msg);
  };
  如果我们想描述一些可以用属性调用的东西,函数本身也是一个对象。那么函数类型表达式不能满足这个要求。对于这种场景,我们可以在定义对象类型时使用调用签名:
  需要注意的是,在声明调用签名时,也支持重载:
  interface Logger {
    type: string;
    (msg: string): void;
    (msg: string, timestamp: number): void
    (msg: string, timestamp: number, module: string): void
  }
  06.构建签名
  除了直接调用函数,我们还可以使用new运算符来调用函数,一般称为构造函数。我们可以通过在调用签名前添加 new 关键字来编写构造签名:
  interface PointConstructor {
    new (x: number, y: number): { x: number; y: number };
  }
  function createPoint(ctor: PointConstructor, 
    x: number = 0, y: number = 0) {
    return new ctor(x, y);
  }
  class Point {
    constructor(public x: number, public y: number) {}
  }
  const zero = createPoint(Point);
  console.log(zero);
  07.混合类型
  那么在定义接口的时候,是否可以同时使用调用签名和构造签名呢?答案是肯定的,我们常用的Date对象,它的类型是DateConstructor,其中调用签名和构造签名都用到了:
  declare var Date: DateConstructor;
  在上面的代码中,除了调用签名和构造签名外,还定义了 Date 构造函数上的属性和方法。
  08.通用接口
  通用类型也可以与接口一起使用。下面是一个通用接口。
  interface KeyPair<T, U> {
    key: T;
    value: U;
  }
  let kv1: KeyPair<number, string> = { key: 1, value: "Bytefer" };
  09.扩展接口
  接口可以扩展一个或多个接口,这使得编写接口灵活且可重用。
  interface Point1D {
    x: number;
  }
  interface Point2D extends Point1D {
    y: number;
  }
  interface Point3D extends Point2D {
    z: number;
  }
  const point1D = { x: 0 };
  const point2D = { x: 0, y: 0 };
  const point3D = { x: 0, y: 0, z: 0 };
  除了扩展单个接口,TypeScript 还允许我们扩展多个接口:
  interface CanSay {
     say(words: string) :void 
  }
  interface CanWalk {
    walk(): void;
  }
  interface Human extends CanSay, CanWalk {
    name: string;
  }
  10.扩展类
  当声明一个接口时,我们可以扩展一个或多个接口。其实我们也可以扩展一个声明的类:
  class Point1D {
    public x!: number;
  }
  interface Point2D extends Point1D {
    y: number;
  }
  const point2D: Point2D = { x: 0, y: 0 }
  对于一个类,在声明类的时候,可以同时实现多个接口:
  interface CanSay {
     say(words: string) :void 
  }
  interface CanWalk {
    walk(): void;
  }
  class Person implements CanSay, CanWalk {
    constructor(public name: string) {}
    public say(words: string) :void {
      console.log(`${this.name} says:${words}`);  
    }
    public walk(): void {
      console.log(`${this.name} walk with feet`);
    }
  }
  对于 TypeScript 开发者来说,接口和类型有很多相似之处,当然也有一些不同。

TAG: 软件开发

 

评分:0

我来说两句

Open Toolbar