TypeScript Interface 笔记

标准接口实现

//创建接口
interface NameInfo {
    firstName: string,
    lastName: string
}

//指定传入接口类型
let getName = ({ firstName, lastName }: NameInfo): string => {
    return `${firstName} ${lastName}`
}

getName({
    firstName: 'haha',
    lastName: '12',
})

接口多余属性检测

interface Vegetable {
    color?: string, //?代表当前非必传参数
    type: string
}

let getVegetable = ({ color, type }: Vegetable) => {
    return `A ${color ? (color + ' ') : '' }${type}`
}

console.log(getVegetable({
    type: 'tomato',
    color: 'red'
}))

添加参数(三种方法)

1. 指定类型

interface Vegetable {
    color?: string,
    type: string
}

let getVegetable = ({ color, type }: Vegetable) => {
    return `A ${color ? (color + ' ') : '' }${type}`
}

console.log(getVegetable({
    type: 'tomato',
    color: 'red',
    size: 2
} as Vegetable))

2. 索引签名

interface Vegetable {
    color?: string,
    type: string,
    [prop: string]: any
}

let getVegetable = ({ color, type }: Vegetable) => {
    return `A ${color ? (color + ' ') : '' }${type}`
}

console.log(getVegetable({
    type: 'tomato',
    color: 'red',
    size: 2
}))

3. 类型兼容性

interface Vegetable {
    color?: string,
    type: string
}

let getVegetable = ({ color, type }: Vegetable) => {
    return `A ${color ? (color + ' ') : '' }${type}`
}

let vegetableInfo = {
    type: 'tomato',
    color: 'red',
    size: 2
}
console.log(getVegetable(vegetableInfo))

只读属性

1. 属性

interface Vegetable {
    color?: string,
    readonly type: string //设置type为只读
}

//定义接口实现对象
let vegetableObj: Vegetable = {
    type: 'tomato'
}

//修改type属性
vegetableObj.type = 'carrot'; //此处报错

2. 数组

interface ArrInter {
    0: number,
    readonly 1: string
}

let arr:ArrInter = [0, '1'];

arr[0] = 10;
arr[1] = '222'; //此处报错

接口函数

type addFunc = (num1: number, num2:number) => number; //指定函数参数类型以及返回类型
const add: addFunc = (n1, n2) => n1 + n2; // 实现接口函数
console.log(add(1, 2)) //3

属性索引

interface RoleDic {
    [id: number]: string
}

let role1: RoleDic = {
    0: 'super_admin',
    a: 'admin', //此处报错 索引类型错误
}

接口继承

假设有三种蔬菜 蔬菜有颜色 西红柿同样有颜色和大小 胡萝卜有颜色与长度 这样的话颜色就可以当做共用,可以通过接口继承实现

interface Vegetable {
    color: string
}

interface Tomato {
    color: string,
    radius: number
}

interface Carrot {
    color: string,
    length: number
}

继承写法

interface Vegetable {
    color: string
}

interface Tomato  extends Vegetable{
    radius: number
}

interface Carrot extends Vegetable {
    length: number
}

let tomato: Tomato = {
    color: 'red',
    radius: 1
}

let carrot: Carrot = {
    color: 'orange',
    length: 1
}

混合接口

interface Counter {
    (): void,
    count: number
}

//定义接口函数返回Counter类型
const getCounter = (): Counter => {
    const c = () => c.count++;
    c.count = 0;
    return c;
}

//定义实现方法
const counter: Counter = getCounter();
counter();
console.log(counter.count) // 1
counter();
console.log(counter.count) // 2
counter();
console.log(counter.count) // 3