TS从入门到精通(二)接口与对象类型

131 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

接口与对象类型

在typescript中,我们定义对象的方式要用关键字interface(接口)或者使用 type,与java类似。interface来定义一种约束,让数据的结构满足约束的格式。定义方式如下:

 interface People{
    name:string,
    age:number,
    run:()=>void
 }
 //interface中的属性与方法必须u按不具备不然会报编译错误
 let obj:People={
    name:"TiGa",
    age:30000,
    run()=>{
      console.log("打怪兽")
    }
 }

扩展

多个同名interface会进行合并

 interface A{name:string}
 interface A{age:number}
 
 //interface名字相同自动进行合并
 相当于
 interface A{name:string,age:number};
 let obj1:A={
     name:"Tiga",
     age:18
 }
 

注意:如果两个同名接口具有相同属性,后面的接口的属性必须要与前面属性的类型一致,否则会起冲突。

操作符 ? (可选操作符)

在属性名后加上可选操作符,这个属性就变成可选的。不写也不报错

 interface B{
     name:string,
     age?:number
 }
 let obj:B={
     name:"TiGa"
 }

type 别名 与interface使用基本一致 个人用type比较多

类型别名 (自定义类型) 为任意类型起别名 当同一类型被多次使用 可以通过类型别名 简化使用

type obj={
    name:string,
    age?:number
}
 let obj:B={
     name:"TiGa"
 }
 type fun=()=>void;
 type arr=(string|number)[];

任意属性 [key: string]:any

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

可以在对象中增加任意名称的属性

interface Person {
  [key: string]: any;
}
// key 值必须为string  value则为any类型
const person: Person = {
  ggg: "",
  aaa:"sss"
  age:18
}

readonly 只读类型

顾名思义就是只可以读取不可以修改

interface Person {
    readonly a: string,
}
 
const person: Person = {
    a: "3000",
   
}
 
person.a = 123 //报错只读属性不可以二次赋值 

本章节内容简单只需要记住使用方式即可。灵活运用就可以写出优秀代码。有不足的地方欢迎指正。