前端 TS 快速入门之二：接口

1. 接口有什么用

interface 定义接口。

检测对象的属性，属性的顺序不检测，只检测属性是否存在，属性类型是否和接口一致。

interface IPerson {
  name: string;
  age: number;
}
function say(person: IPerson): void {
  console.log(`my name is ${person.name}, and age is ${person.age}`);
}
let me = {
  name: "funlee",
  age: 18,
};
say(me); // my name is funlee, and age is 18

2. 可选属性

属性后加 ? 符号，表示可选。

interface IPerson {
  name: string;
  age: number;
  // love 可选
  love?: string;
}

3. 只读属性

属性前加 readonly，表示只读。

interface IPerson {
  // name 只读
  readonly name: string;
  age: number;
  love?: string;
}
let me: IPerson = {
  name: "funlee",
  age: 18,
};
// name 不允许被赋值
me.name = "new name"; // error!

4. 函数接口

定义函数的参数和返回值类型

interface IGetArea {
  (w: number, h: number): number;
}
const getArea: IGetArea = (w, h) => {
  return w * h;
};
getArea(10, 20) // 200

 5. 继承接口

一个接口可以继承多个接口，创建出多个接口的合成接口，如：

interface IName {
  name: string;
}
interface IAge {
  age: number;
}
interface IPerson extends IName, IAge {
  sex: string;
}
const yqcoder: IPerson = {
  name: "yqcoder",
  age: 18,
  sex: "man",
}; // { name: 'yqcoder', age: 18, sex: 'man' }

 6. 混合类型

让对象同时作为函数和对象使用，并带有额外的属性，如：

interface IMixDemo {
  (arg: string): void;
  defaultStr: string;
}
function demo(): IMixDemo {
  let x = <IMixDemo>function (str: string) {
    console.log(str);
  };
  x.defaultStr = "yqcoder";
  return x;
}
const yq = demo(); // { [Function: x] defaultStr: 'yqcoder' }
yq('你好'); // 你好

上一章：前端 TS 快速入门之一：基本数据类型

下一章：前端 TS 快速入门之三：class 类