7对象类型

基本使用

掌握：对象类型语法

• TS 的对象类型，其实就是描述对象中的 属性 方法 的类型，因为对象是由属性和方法组成的。

// 有属性的对象
let person: { name: string } = {
  name: '同学',
};

// 有属性和方法，一行书写多个属性 ; 分隔
let person: { name: string; sayHi(): void } = {
  name: 'jack',
  sayHi() {},
};

// 换行写可以省略 ; 符号
let person: {
  name: string;
  sayHi(): void;
} = {
  name: 'jack',
  sayHi() {},
};

小结：

• 使用声明描述对象结构？{}

• 属性怎么写类型？属性名: 类型

• 方法怎么写类型? 方法名(): 返回值类型

扩展用法

掌握：对象类型中，函数使用箭头函数类型，属性设置可选，使用类型别名。

• 函数使用箭头函数类型

let person: {
  name: string
  sayHi: () => void
} = {
  name: 'jack',
  sayHi() {},
};

• 对象属性可选

// 例如：axios({url,method}) 如果是 get 请求 method 可以省略
const axios = (config: { url: string; method?: string }) => {};

// {} 会降低代码可阅读性，建议对象使用类型别名
// const axios = (config: { url: string; method?: string }) => {};
type Config = {
  url: string;
  method?: string;
};
const axios = (config: Config) => {};

let aaa:{name:string;age:number;say?:(word:string)=>void}

aaa={
    name:'小红',
    age:18,
    say(word){
        console.log(word)
    },
}

aaa={
    name:'小红',
    age:18,
}

aaa.say('dfd')//报错 因为say是可选参数，可能不存在，所以ts提前发现错误

aaa.say && aaa.say('dfd)//判断一下就不报错了

id(aaa.say){//判断一下就不报错了
    aaa.say('dfd')
}

小结：

• 对象的方法使用箭头函数类型怎么写？{sayHi:()=>void}

• 对象的可选属性怎么设置？{name?: string}

• 对象类型会使用 {} 如何提供可阅读性？类型别名

:::warning 练习 创建一个学生对象，该对象中具有以下属性和方法：

• 属性：必选属性：姓名、性别、成绩，可选属性：身高

• 方法：学习、打游戏（可选） :::