ts interface 定义接口

• 基本用法

interface Iprop {
    firstName: string, // 必需属性
    lastName: string, // 必需属性
    age?: number // 可选属性
}

const getFullName = ({ firstName, lastName }: Iprop): string => {
    return `你好，我是${firstName}${lastName}`
}
getFullName({ firstName: 'zang', lastName: 'san' })
console.log(getFullName({ firstName: 'zang', lastName: 'san', sex:

interface Iprop1 {
    firstName: string, // 必需属性
    lastName: string, // 必需属性
    age?: number, // 可选属性
    [prop: string]: any,
    readonly like: string
}
const getFullName1 = ({ firstName, lastName }: Iprop1): string => {
    return `你好，我是${firstName}${lastName}`
}

多添加了未在接口定义中定义的属性时

• 调用的时候加入 as Iprop 即可
• 加入索引属性[prop: string]
• 类型兼容性 声明一个变量，直接传入参数

const a = { firstName: "zang", lastName: "san", sex: "女", like: "游泳" }
// tslint:disable-next-line: no-console
console.log(getFullName1(a));

// 函数定义接口,使用类型别名
type addFunc = (num1: number, num2: number) => number
const add: addFunc = (n1, n2) => n1 + n2
console.log(add(1, 11))

// 给索引指定类型
interface RoleC {
    [id: number]: string
}

const role: RoleC = {
    0: 'admin'
}

interface RoleB {
    [id: string]: string
}
const role1: RoleB = {
    'a': 'user',
    0: 'SUPER_ADMIN', // js会把数值型 0 转换成 字符串‘0',所以这个添加不会报错
    // '0': 'USER' // copy 到 console中查看一下，‘0’和0 同一个。后者会覆盖前者 
}
console.log(role1)

/**
 * 接口的继承
 */
interface Vegetables {
    color: string
}

interface Tomato extends Vegetables {
    radius: number
}

interface Huanggua {
    length: number,
}

interface Huanggua1 extends Vegetables {
    length: number,
}

const tomato: Tomato = {
    radius: 10,
    color: 'red'
}
const huanggua: Huanggua = {
    length: 5
}

const huanggua1: Huanggua1 = {
    length: 4,
    color: 'green'
}

/**
 * 混合类型接口 函数可以添加属性的
 */

interface Counter {
    (): void,
    count: number
}
const getCounter = (): Counter => {
    const c = () => { c.count++ }
    c.count = 0
    return c
}
const counter: Counter = getCounter()
counter()
console.log(counter.count)