TypeScript接口的基本使用

接口

定义对象

interface UserInfo {
  name: string;
  age: number;
}
let user: UserInfo = {
  name: 'Lisa',
  age: 21
}

定义函数

interface AddFunc {
  (num1: number, num2: number): number;
}
const add: AddFunc = (num1, num2) => {
  return num1 + num2
}

可选属性

interface OptionalProp {
  name: string;
  id: string;
  age?: number; // 可选属性
}

索引类型

interface IndexType {
    // 索引签名参数类型需要是 string、number、symbol 类型中的一种
    [prop: string]: string;
    [age: number]: string;
    [id: symbol]: any;
}

只读属性

interface ReadonlyProp {
    name: string;
    readonly id: string;
}

继承

interface Animal {
    color: string;
}
interface Sports {
    frisbee: boolean;
}
// 单接口继承
interface Cat extend Animal {
    age: number;
}
// 多接口继承
interface Dog extend Animal, Sports {
    weight: number;
}
let cat: Cat = {
    color: '橘色',
    age: 1
}
let dog: Dog = {
    color: '白色',
    weight: 5.2,
    frisbee: true
}

混合类型接口

// 是一个函数且函数需包含 count 属性
interface Counter {
    (): number;
    count: number;
}
function getCounter(): Counter {
    const counter = () => ++counter.count
    counter.count = 0
    return counter
}