来学习typescript 吧！ --3 对象、接口类型

 

1、Object

Object类型是所有Object类的实例的类型。 由以下两个接口来定义：

Object 接口定义了 Object.prototype 原型对象上的属性

ObjectConstructor 接口定义了 Object 构造函数上的属性

Object 接口包含很多属性，如：constructor、hasOwnProperty、isPrototypeOf、propertyIsEnumerable、toLocaleString、toString 和 valueOf。

这个类型是跟原型链有关的原型链顶层就是Object，所以值类型和引用类型最终都指向Object，所以他包含所有类型。

 

let a:Object = 123
let b:Object = '123'
let c:Object = ()=>123
let d:Object = {}
let e:Object = []
let f:Object = null
let g:Object = undefined
let h:Object = true
// let i:Object = Symbol('123') //错误
// let j:Object = BigInt(123) //错误

2、object

object 代表所有非值类型的类型，例如 数组 对象 函数等，常用于泛型约束

let o:object = {}//正确
let o1:object = []//正确
let o2:object = ()=>123 //正确
let b:object = '123' //错误
let c:object = 123 //错误

3、{} -- 自变量模式

看起来很别扭的一个东西 你可以把他理解成new Object 就和我们的第一个Object基本一样 包含所有类型

tips字面量模式是不能修改值的

let a1: {} = {name:1} //正确
let a2: {} =  () => 123//正确
let a3: {} = 123//正确

4、在typescript中，我们定义对象的方式要用关键字interface（接口)

interface Person {
  name: string;
  age: number;
  gender: string;
}
​
//定义一个函数，接收一个参数，参数类型是Person
function printPerson(person: Person) {
  console.log(person.name, person.age, person.gender);
}
 
//定义一个变量，类型是Person
let person: Person = {
  name: "张三",
  age: 18, 
  //gender: "男", //如果这里不写，编译器会报错
}

 

2、重命名interface 可以合并接口

interface A{name:string}
interface A{age:number} 
var x:A={name:'xx',age:20}

 

3、接口 继承 extends

interface A{
    name:string
}
​
interface B extends A{
    age:number
}
​
let obj:B = {
    age:18,
    name:"string"
}
​

 

4、可选属性 使用?操作符

interface Person {
  name: string;
  age?: number;
  gender?: string;
}
​
let person: Person = {
  name: "张三",
  //age: 18,
  //gender: "男",
}

 

5、任意属性 [propName: string]

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

interface Person {
  name: string;
  age?: number;
  [propName: string]: any;
}
​
let person: Person = {
  name: "张三",
  age: 18,
  gender: "男",
  //hobby: "篮球", //正确   
}

 

6、只读属性 readonly

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

interface Person {
  readonly id: number;
  name: string;
  age?: number;
  [propName: string]: any;
}
​
let person: Person = {
  id: 1,
  name: "张三",
  age: 18,
  gender: "男",
  //hobby: "篮球", //正确
}
// person.id = 2; //错误

 

7、添加函数

interface Person {
  name: string;
  age?: number;
  [propName: string]: any;
  sayHi(): string;
}
​
let person: Person = {
  name: "张三",
  age: 18,
  gender: "男",
  hobby: "篮球",
  sayHi() {
    return "hello"; //正确
  },
}    
person.sayHi();