TS 小记（10）TypeScript 对象

TypeScript 对象

对象是包含一组键值对的实例。值可以是字面量、函数、数组、对象等。

比如：

var obj = {
  key1: 1,
  key2: true,
  key3: "hello",
  key4: function() {},
  key5: ["item1", "item2"],
}

可以通过 对象.key 的方式访问对象中某个 key 对象的值。

比如：

var obj = {
  key1: 1,
  key2: true,
  key3: "hello",
  key4: function() {},
  key5: ["item1", "item2"],
}
console.log(obj.key1);  // 输出: 1
console.log(obj.key3);  // 输出: hello

类型模板

假设我们在 JavaScript 中定义了一个对象：

var websites = {
  site1: "Google",
  site2: "Baidu",
}

这时想要在对象中添加新的 key-value，可以直接进行赋值：

websites.site3 = "Github";
// 或
websites.sayHello = function() { console.log("hello") };

如果是在 TypeScript 中这样写就会报错，因为 { site1: "Google", site2: "Baidu", } 这个对象中没有这几个 key，所以不能操作，我们只能对对象中已有的 key 进行操作，并且类型需要保持一致。

var websites = {
  site1: "Google",
  site2: "Baidu",
  sayHello: function () {}   // 类型模板
}

websites.sayHello = function () {
  console.log("hello");
};
websites.sayHello();  // 输出：hello

对象也可以作为一个参数传递给函数，对象的类型用 { [键:值的类型] } 来表示：

var websites = {
  site1: "Google",
  site2: "Baidu",
}

function visitWebsites(obj: { site1: string, site2: string }) {
  console.log("visit site1: " + obj.site1);
  console.log("visit site2: " + obj.site2);
}

visitWebsites(websites);
// 输出
visit site1: Google
visit site2: Baidu

对象的类型就像是没有名字的接口。当某个对象在赋值时，编译器会对其中的属性进行校验，如果不存在对象类型定义的属性时，编译器就会报错：

var websites = {
  site1: "Google",
  site2: "Baidu",
}

function visitWebsites(obj: { site1: string, site2: string, site3: string }) {
  console.log("visit site1: " + obj.site1);
  console.log("visit site2: " + obj.site2);
}
// Error，不能赋值，因为 websites 中没有 obj 这个对象所定义的 site3 属性（键）
// Argument of type '{ site1: string; site2: string; }' is not assignable to parameter of type '{ site1: string; site2: string; site3: string; }'.
// Property 'site3' is missing in type '{ site1: string; site2: string; }' but required in type '{ site1: string; site2: string; site3: string; }'.

通常我们会直接使用接口来定义类型，或者使用 type 关键字给对象的类型起个名字。

type WebSites = {
  site1: string,
  site2: string,
}

var websites = {
  site1: "Google",
  site2: "Baidu",
}
  
function visitWebsites(obj: WebSites) {
  console.log("visit site1: " + obj.site1);
  console.log("visit site2: " + obj.site2);
}
  
visitWebsites(websites);

// 输出
visit site1: Google
visit site2: Baidu

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 10 天，点击查看活动详情