03.TypeScript接口和对象类型

对象的类型

在typescript中，我们定义对象的方式要用关键字interface（接口），我的理解是使用interface来定义一种约束，让数据的结构满足约束的格式。定义方式如下：

// 这样写是会报错的 因为我们在person定义了a，b但是对象里面缺少b属性
// 使用接口约束的时候不能多一个属性也不能少一个属性
// 必须与接口保持一致
interface Person {
    name:string,
    age:number
}
const person:Person  = {
    name:"Yang"
}

// 重名的interface  可以合并
interface A{name:string}
interface A{age:number}
var x:A={name:'xx',age:20}
// 继承
interface A{
    name:string
}
 
interface B extends A{
    age:number
}
 
let obj:B = {
    age:18,
    name:"string"
}
// 继承多个用逗号隔开就好

可选属性使用?操作符

// 可选属性的含义是该属性可以不存在
// 所以说这样写也是没问题的
interface Person {
    a:string,
    b?:string // 我可以有也可以没有
}
 
const person:Person  = {
    a:"Yang"
}

任意属性 [propName: string]

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集

// 在这个例子当中我们看到接口中并没有定义C但是并没有报错
// 应为我们定义了[propName: string]: any;
// 允许添加新的任意属性
interface Person {
    b?:string,
    a:string,
    [propName: string]: any;
}
 
const person:Person  = {
    a:"Yang",
    c:"Hello"
}

只读属性 readonly

readonly 只读属性是不允许被赋值的只能读取

// 这样写是会报错的
// 因为a是只读的不允许重新赋值
interface Person {
    b?: string,
    readonly a: string,
    [propName: string]: any;
}
 
const person: Person = {
    a: "yang",
    c: "Hello"
}
 
person.a = 'hahaha'

添加函数

interface Person {
    b?: string,
    readonly a: string,
    [propName: string]: any;
    // 对象有一个cb函数返回值是void
    cb():void
}
 
const person: Person = {
    a: "Yang",
    c: "hello",
    cb:()=>{
        console.log('Yang')
    }
}