TypeScript 学习笔记（三）- type、typeof、keyof

介绍一些TS相关的基础知识。

一、type

type 用于定义类型，常用于定义类型别名，类型别名就是用来给一个类型起个新名字， 类型别名常用于联合类型。

type Name = string;
type Age =number ;
type NameOrAge = Name | Age; 
// type NameOrAge = string |  number; 

几乎 interface 的所有特性 type都有， type与interface 核心的区别在于 type 一旦定义就不能再添加新的属性，而 interface 总是可扩展的。

拓展type

type Person = {
  name: String
}

type Student = Person & { 
  age: Number 
}
// type Student = { name: String, age: Number }

type Person = {
  name: String
}

type Person = {
  age: Number 
}
// Error: Duplicate identifier 'Person'.

拓展interface

interface Animal {
  name: string;
}

interface Animal {
  age: number;
}

// interface Animal = { name: String, age: Number }

二、typeof

在 TypeScript 中，typeof 操作符用来获取一个变量或对象的类型

const name = "111"
// typeof name = String

const student = {
  name: "111",
  age: 1,
};
// typeof student = { name: String, age: Number }

typeof 操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型

function toArray(x: number): Array<number> {
  return [x];
}

type Func = typeof toArray; // -> (x: number) => number[]

三、keyof

TypeScript中的keyof操作符，是将一个类型映射为它所有成员名称的联合类型，可以操作接口、类以及基本数据类型。

interface Person {
  name: string;
  age: number;
  gender: string;
}
type P = keyof Person; // "name" | "age" | "gender"

const test: P = "name"

keyof 将 Person这个对象类型映射成了一个联合类型。
通俗点讲，就是 test 只能取 "name" | "age" | "gender"，如果取其他值，就会提示出错。

这种限制可以用在需要取某个对象的属性值时，避免传入其他key

interface Person {
  name: string;
  age: number;
  gender: string;
}

class Student {
  constructor(private info: Person) {}

  getInfo<T extends keyof Person>(key: T): Person[T] {
    return this.info[key];
  }
}

// T是泛型，通过keyof得到了Person的成员名的联合类型，即"name" | "age" | "gender"
// 这样就实现了限制key值的输入，这时候key只能输入"name" | "age" | "gender"
// 而也不会出现返回结果为undefined了

const student = new Student({
  name: 'uuuu',
  age: 20,
  gender: 'male'
})
const test = student.getInfo('name');
console.log(test) // "uuuu"

如果是声明指定的索引签名，keyof 会有点区别

type Arrayish = { [n: number]: unknown };
type A = keyof Arrayish;
// type A = number

type Mapish = { [k: string]: boolean };
type M = keyof Mapish;
// type M = string | number

当对象的key类型是string时，M 可以取 string 和 number 两个类型，因为 JavaScript 对象键总是被强制转换为字符串，所以 obj[0] 与 obj[“0”] 相同

参考链接
Keyof Type Operator