TypeScript初识

TypeScript 是 JavaScript 的超集，拥有类型机制，不能直接被浏览器运行，需要编译成 JavaScript。 TypeScript 能够清楚知道变量的类型，函数参数类型，在编写函数时候，编辑器会提示参数。代码语言更清晰易读。更好的错误提示。

安装TypeScript

npm install -g typescript ts-node

当安装完成后,可以使用下面的命令来验证TypeScript是否安装成功:

tsc --version

TypeScript 中的类型

原始类型

在 JavaScript 中，有 7 种原始类型：

string
number
bigint
boolean
undefined
null
symbol

原始类型都是不可变的，你可以为原始类型的变量重新分配一个新值，但不能像更改对象、数组和函数一样更改它的值。可以看下面的例子：

let myName = 'Tony';
myName.toLowerCase();
console.log(myName); // Tony - 字符串的方法并没有改变字符串本身

  
let arr = [1, 3, 5, 7];  
arr.pop();  
console.log(arr); // [1, 3, 5] - 数组的方法改变了数组

回到 TypeScript ，我们可以在声明一个变量之后设置我们想要添加的类型 :type (我们一般称之为“类型注释”或“类型签名”):

let id: number = 5;  
let myName: string = 'Tony';  
let hasDog: boolean = true;  
  
let unit: number; // 声明变量而不赋值  
unit = 5;

但是，如果变量有默认值的话，一般我们也不需要显式声明类型，TypeScript 会自动推断变量的类型（类型推断）：

let id = 5; // number 类型  
let myName = 'Tony'; // string 类型  
let hasDog = true; // boolean 类型  
  
hasDog = 'yes'; // ERROR

我们还可以将变量设置为联合类型（联合类型是可以分配多个类型的变量）：

let age: string | number;  
age = 17;  
age = '17';

TypeScript 中的数组

let ids: number[] = [1, 2, 3, 4, 5]; // 只能包含 number
let names: string[] = ['Tony', 'Tom', 'Jerry']; // 只能包含 string
let options: boolean[] = [true, false, false]; //只能包含 true false
let books: object[] = [
  { name: 'Tom', animal: 'cat' },
  { name: 'Jerry', animal: 'mouse' }
]; // 只能包含对象
let arr: any[] = ['hello', 1, true]; // 啥都行，回到了 JS

ids.push(6);
ids.push('7'); // 类型“string”的参数不能赋给类型“number”的参数。

你也可以使用联合类型来定义包含多种类型的数组：

let person: (string | number | boolean)[] = ['Tony', 1, true];
person[0] = 100;
person[1] = { name: 'Tony' }; //不能将类型“{ name: string; }”分配给类型“string | number | boolean”

如果数组有默认值， TypeScript 同样也会进行类型推断：

let person = ['Tony', 1, true]; // 和上面的例子一样
person[0] = 100;
person[1] = { name: 'Tony' }; //不能将类型“{ name: string; }”分配给类型“string | number | boolean”。

TypeScript 中可以定义一种特殊类型的数组：元组（Tuple）。元组是具有固定大小和已知数据类型的数组，它比常规数组更严格。

let person: [string, number, boolean] = ['Tony', 1, true];
person[0] = 17; //不能将类型“number”分配给类型“string”

TypeScript 中的对象

TypeScript 中的对象必须拥有所有正确的属性和值类型：

// 使用特定的对象类型注释声明一个名为 person 的变量  
let person: {  
  name: string;  
  age: number;  
  isProgrammer: boolean;  
};

// 给 person 分配一个具有所有必要属性和值类型的对象  
person = {  
  name: 'Tony',  
  age: 17,  
  isProgrammer: true,  
};

person.age = '17'; //不能将类型“string”分配给类型“number”。

person = {  
  name: 'Tom',  
  age: 3,  
};
//类型 "{ name: string; age: number; }" 中缺少属性 "isProgrammer"，但类型 "{ name: string; age: number; isProgrammer: boolean; }" 中需要该属性。

在定义对象的类型时，我们通常会使用 interface。如果我们需要检查多个对象是否具有相同的特定属性和值类型时，是很有用的：

interface Person {  
  name: string;  
  age: number;  
  isProgrammer: boolean;  
}  
  
let person1: Person = {  
  name: 'Tony',  
  age: 17,  
  isProgrammer: true,  
};  
  
let person2: Person = {  
  name: 'Tom',  
  age: 3,  
  isProgrammer: false,  
};

我们还可以用函数的类型签名声明一个函数属性，通用函数(sayHi)和箭头函数(sayBye)都可以声明：

interface Animal {
  eat(name: string): string;
  speak: (name: string) => string;
}

let tom: Animal = {
  eat: function (name: string) {
    return `eat ${name}`;
  },
  speak: (name: string) => `speak ${name}`
};

console.log(tom.eat('tony'));
console.log(tom.speak('joy'));

需要注意的是，虽然 eat、speak 分别是用普通函数和箭头函数声明的，但是它们具体是什么样的函数类型都可以，Typescript 是不关心这些的。

TypeScript 中的函数

我们可以定义函数参数和返回值的类型：

// 定义一个名为 circle 的函数，它接受一个类型为 number 的直径变量，并返回一个字符串
function circle(diam: number): string {
  return '圆的周长为：' + Math.PI * diam;
}

console.log(circle(10)); // 圆的周长为：31.41592653589793

ES6 箭头函数的写法：

const circle = (diam: number): string => {  
  return '圆的周长为：' + Math.PI * diam;  
};

我们没必要明确声明 circle 是一个函数，TypeScript 会进行类型推断。TypeScript 还会推断函数的返回类型，但是如果函数体比较复杂，还是建议清晰的显式声明返回类型。我们可以在参数后添加一个?，表示它为可选参数；另外参数的类型也可以是一个联合类型：

const add = (a: number, b: number, c?: number | string) => {  
  console.log(c);  
  return a + b;  
};  
  
console.log(add(5, 4, '可以是 number、string，也可以为空'));

如果函数没有返回值，在 TS 里表示为返回 void，你也不需要显式声明，TS 一样可以进行类型推断：

const log = (msg: string): void => {  
  console.log('打印一些内容: ' + msg);  
};

函数重载

是指几个函数名相同,但参数个数或类型不同的函数, 在调用时传入不同的参数,编译器会自动调用适合的函数

function handleData(x: string): string[];

function handleData(x: number): string;

function handleData(x: any): any {
  if (typeof x === 'string') {
    return x.split('');
  } else {
    return x.toString().split('').join('_');
  }
}

any 类型

使 any 类型，我们基本上可以将 TypeScript 恢复为 JavaScript：

let name: any = 'Tony';  
name = 17;  
name = { age: 17 };

如果代码里使用了大量的 any，那 TypeScript 也就失去了意义，所以我们应该尽量避免使用 any 。

DOM 和类型转换

TypeScript 没办法像 JavaScript 那样访问 DOM。这意味着每当我们尝试访问 DOM 元素时，TypeScript 都无法确定它们是否真的存在。

const link = document.querySelector('a');
console.log(link.href); //“link”可能为 “null”。

使用非空断言运算符 (!)，我们可以明确地告诉编译器一个表达式的值不是 null 或 undefined。当编译器无法准确地进行类型推断时，这可能很有用：

// 我们明确告诉 TS a 标签肯定存在
const link = document.querySelector('a')!;
console.log(link.href);

这里我们没必要声明 link 变量的类型。这是因为 TypeScript 可以通过类型推断确认它的类型为 HTMLAnchorElement。

但是如果我们需要通过 class 或 id 来选择一个 DOM 元素呢？这时 TypeScript 就没办法推断类型了：

const form = document.getElementById('signup-form');

console.log(form.method);
//“form”可能为 “null”。
//类型“HTMLElement”上不存在属性“method”。

我们需要告诉 TypeScript form 确定是存在的，并且我们知道它的类型是 HTMLFormElement。我们可以通过类型转换来做到这一点：

const form = document.getElementById('signup-form') as HTMLFormElement;

console.log(form.method); // post

TypeScript 还内置了一个 Event 对象。如果我们在表单中添加一个 submit 的事件侦听器，TypeScript 可以自动帮我们推断类型错误：

const form = document.getElementById('signup-form') as HTMLFormElement;  
  
form.addEventListener('submit', (e: Event) => {  
  e.preventDefault(); // 阻止页面刷新  
  
  console.log(e.tarrget); //属性“tarrget”在类型“Event”上不存在。你是否指的是“target”?
});

TypeScript 中的类

class Person {
  name: string;
  isCool: boolean;
  age: number;

  constructor(n: string, c: boolean, a: number) {
    this.name = n;
    this.isCool = c;
    this.age = a;
  }

  sayHello() {
    return `Hi，我是 ${this.name} ，我今年 ${this.age} 岁了`;
  }
}

const person1 = new Person('Tony', true, 17);
const person2 = new Person('Jerry', 'yes', 20); // 类型“string”的参数不能赋给类型“boolean”的参数。

console.log(person1.sayHello()); // Hi, 我是 Tony，我今年 17 岁了

我们可以创建一个仅包含从 Person 构造的对象数组：

let People: Person[] = [person1, person2];

我们可以给类的属性添加访问修饰符，TypeScript 还提供了一个新的 readonly 访问修饰符。

class Person {  
  readonly name: string; // 不可以变的  
  private isCool: boolean; // 类的私有属性、外部访问不到  
  protected email: string; // 只能从这个类和子类中进行访问和修改  
  public age: number; // 任何地方都可以访问和修改  
  
  constructor(n: string, c: boolean, a: number) {  
    this.name = n;  
    this.isCool = c;  
    this.age = a;  
  }  
  
  sayHello() {  
    return `Hi，我是 ${this.name} ，我今年 ${this.age} 岁了`;  
  }  
}  
  
const person1 = new Person('Tony', true, 'Tony@xx.com', 17);  
console.log(person1.name); // Tony  
person1.name = 'Jerry'; // Error: read only

我们可以通过下面的写法，属性会在构造函数中自动分配，我们类会更加简洁：

class Person {
  constructor(
    readonly name: string,
    private isCool: boolean,
    protected email: string,
    public age: number
  ) {}
}

如果我们省略访问修饰符，默认情况下属性都是 public，另外和 JavaScript 一样，类也是可以 extends 的。

private 私有属性

设置成私有属性，只能在类内被访问

class Animale {
  private animaleName!: string;
  constructor() {}
  getName() {
    return this.animaleName;
  }
  setName(title: string) {
    this.animaleName = title;
  }
}
const animale = new Animale();
animale.setName('cat');
animale.getName();

protected 受保护

protected 的方法和属性不能被外部使用，可以被派生类(子类)调用

class Person {
  constructor(protected name: string) {
    this.name = name;
  }
}

class Student extends Person {
  constructor(name: string) {
    super(name);
  }
  getName() {
    console.log(this.name);
  }
}

const people = new Person('tony');

const s1 = new Student('s1');
s1.getName();

构造函数也可以被标记成 protected 这意味着这个类不能在包含它的类外被实例化，但是能被继承。

class Person {
  //构造函数受保护，不能被实例，可以继承里面的方法
  protected constructor(protected name: string) {
    this.name = name;
  }
  protected getName() {
    console.log(this.name);
  }
}

class Student extends Person {
  constructor(name: string) {
    super(name);
  }
  getStudentName() {
    this.getName();
  }
}

const s1 = new Student('s1');
s1.getStudentName();

存取器

存取器就是通过getters/setters来截取对对象成员的访问

class Person {
  constructor(private _name: string) {}
  //get 方法，在类外通过name方法调用私有属性
  get name() {
    return this._name;
  }
  //set 方法，在类外中修改私有属性
  set name(name: string) {
    this._name = name;
  }
}

const person = new Person('tony');
console.log(person.name); //打印出tony lee
person.name = 'dell';
console.log(person.name); //打印出dell lee

readonly 只读修饰符

class Person {
  readonly name: string;
  readonly height: number; // 报错，只读属性必须声明时或者在构造函数中被初始化
  constructor(name: string) {
    this.name = name;
  }
}

静态属性

当类中的方法被声明为static时，其实例化对象不可调用该方法，只有类本身，以及其子类可以调用。

class Person {
  static title: string;
  constructor(title: string) {
    Person.title = title;
  }
  getTitle() {
    return Person.title;
  }
}
class Student extends Person {
  constructor(title: string) {
    super(title);
  }
  getTitle2(): string {
    return Student.title;
  }
}
const p1 = new Person('tony');
console.log(p1.getTitle()); //tony
const s1 = new Student('lv');
console.log(s1.getTitle2()); //lv

单例模式

创建一个私有属性instance，并挂在类上

class Demo {
  //创建一个私有属性instance，并挂在类上,类型是Demo,用于存储new Demo() 这个数据
  private static instance: Demo;
  private constructor(public name: string) {}
  //static 把方法挂在类上，而不是挂在实例上
  static getInstance() {
    if (!this.instance) {
      this.instance = new Demo('tony');
    }
    return this.instance;
  }
}

const demo1 = Demo.getInstance();
console.log(demo1.name); //tony

抽象类

就是把公共要用到的东西抽离出来，放到一起

abstract 用于定义抽象类和在抽象类内部定义抽象方法。也就是子类需要定义抽象类上定义的方法

abstract class Person {
  //抽象方法需要在每个继承类上要自己定义方法
  abstract move(): void; // 必须在派生类中实现
}

class Student extends Person {
  move(): void {
    console.log('move');
  }
}

let p1 = new Person(); //error 抽象类无法创建
let s1 = new Student();
s1.move();

静态方法

在类中定义的静态方法, 该方法不需要创建实例就能使用

class Children {
  static play() {
    console.log('小孩子喜欢玩');
  }
}
Children.play();

TypeScript 中的接口

接口定义了对象的外观：

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

function sayHi(person: Person) {
  console.log(`Hi ${person.name}`);
}

sayHi({
  name: 'Tony',
  age: 17,
}); // Hi Tony

你还可以使用类型别名定义对象类型：

type Person = {
  name: string;
  age: number;
};

或者可以直接匿名定义对象类型：

function sayHi(person: { name: string; age: number }) {
  console.log(`Hi ${person.name}`);
}

interface 和 type 非常相似，很多情况下它俩可以随便用。比如它们两个都可以扩展：

扩展 interface：

interface Animal {
  name: string
}

interface Bear extends Animal {
  honey: boolean
}

const bear: Bear = {
  name: "Winnie",
  honey: true,
}

扩展 type：

type Animal = {
  name: string
}

type Bear = Animal & {
  honey: boolean
}

const bear: Bear = {
  name: "Winnie",
  honey: true,
}

但是有个比较明显的区别，interface 是可以自动合并类型的，但是 type 不支持：

interface Animal {
  name: string
}

interface Animal {
  tail: boolean
}

const dog: Animal = {
  name: "Tom",
  tail: true,
}

类型别名在创建后无法更改：

type Animal = {
  name: string
}

type Animal = {
  tail: boolean
}
// ERROR: Duplicate identifier 'Animal'.

一般来说，当你不知道用啥的时候，默认就用 interface 就行，直到 interface 满足不了我们的需求的时候再用 type。

类的 interface

我们可以通过实现一个接口来告诉一个类它必须包含某些属性和方法：

interface HasFormatter {
  format(): string;
}

class Person implements HasFormatter {
  constructor(public username: string, protected password: string) {}

  format() {
    return this.username.toLocaleLowerCase();
  }
}

let person1: HasFormatter;
let person2: HasFormatter;

person1 = new Person('Tony', 'admin123');
person2 = new Person('Tom', 'admin123');

console.log(person1.format()); // Tony

确保 people 是一个实现 HasFormatter 的对象数组(确保每 people 都有 format 方法):

let people: HasFormatter[] = [];
people.push(person1);
people.push(person2);

函数的定义

interface Func {
  (num1: number, num2: number): number;
}

const addFunc: Func = (num1, num2) => num1 + 
num2;

索引类型

interface Role {
  [id: number]: string;
}

const role: Role = ['super_admin', '
'user'];
//当定义了索引类型之后, 数组length方法, 将不存在, 包括Array原型链上的其他方法也不存在了


const role1: Role = {
  0: 'super_admin',
  1: 'admin',
  5: 'user'
};

绕开多余属性检查

//1、 类型断言

interface MyType {
  color: string;
}

const getTypes = (myType: MyType) => {
  return `${myType.color}`;
};
getTypes({
  color: 'red',
  type: 'color',
  num: 0
} as MyType);

//2、 索引签名
interface MyType {
  color: string;
  [prop: string]: any;
}

getTypes({
  color: 'red',
  type: 'color',
  num: 0
});

// 3、 类型兼容
interface MyType {
  color: string;
}

const getTypes = ({ color }: MyType) => {
  return `${color}`;
};

const options = { color: 'red', type: 'color' };
getTypes(options);

泛型

泛型可以让我们创建一个可以在多种类型上工作的组件，它能够支持当前的数据类型，同时也能支持未来的数据类型，这大大提升了组件的可重用性。我们来看下面这个例子：

addID 函数接受一个任意对象，并返回一个新对象，其中包含传入对象的所有属性和值，以及一个 0 到 1000 之间随机的 id 属性。

 const addID = (obj: object) => {
  let id = Math.floor(Math.random() * 1000);

  return { ...obj, id };
};

let person1 = addID({ name: 'John', age: 40 });

console.log(person1.id); // 271
console.log(person1.name); // ERROR: Property 'name' does not exist on type '{ id: number; }'.

当我们尝试访问 name 属性时，TypeScript 会出错。这是因为当我们将一个对象传递给 addID 时，我们并没有指定这个对象应该有什么属性 —— 所以 TypeScript 不知道这个对象有什么属性。因此，TypeScript 知道的唯一属性返回对象的 id。

那么，我们怎么将任意对象传递给 addID，而且仍然可以告诉 TypeScript 该对象具有哪些属性和值？这种场景就可以使用泛型了, <T> – T 被称为类型参数：

// <T> 只是一种编写习惯 - 我们也可以用 <X> 或 <A>
const addID = <T>(obj: T) => {
  let id = Math.floor(Math.random() * 1000);

  return { ...obj, id };
};

这是啥意思呢？现在当我们再将一个对象传递给 addID 时，我们已经告诉 TypeScript 来捕获它的类型了 —— 所以 T 就变成了我们传入的任何类型。addID 现在会知道我们传入的对象上有哪些属性。

但是，现在有另一个问题：任何东西都可以传入 addID ，TypeScript 将捕获类型而且并不会报告问题：

let person1 = addID({ name: 'Tony', age: 17 });
let person2 = addID('Jerry'); // 传递字符串也没问题

console.log(person1.id); // 188
console.log(person1.name); // Tony

console.log(person2.id);
console.log(person2.name); // ERROR: Property 'name' does not exist on type '"Jerry" & { id: number; }'.

当我们传入一个字符串时，TypeScript 没有发现任何问题。只有我们尝试访问 name 属性时才会报告错误。所以，我们需要一个约束：我们需要通过将泛型类型 T 作为 object 的扩展，来告诉 TypeScript 只能接受对象:

const addID = <T extends object>(obj: T) => {
  let id = Math.floor(Math.random() * 1000);

  return { ...obj, id };
};

let person1 = addID({ name: 'John', age: 40 });
let person2 = addID('Jerry'); // ERROR: Argument of type 'string' is not assignable to parameter of type 'object'.

错误马上就被捕获了，完美…… 好吧，也不完全是。在 JavaScript 中，数组也是对象，所以我们仍然可以通过传入数组来逃避类型检查：

let person2 = addID(['Tony', 17]); // 传递数组没问题

console.log(person2.id); // 188
console.log(person2.name); // Error: Property 'name' does not exist on type '(string | number)[] & { id: number; }'.

要解决这个问题，我们可以这样说：object 参数应该有一个带有字符串值的 name 属性：

const addID = <T extends { name: string }>(obj: T) => {
  let id = Math.floor(Math.random() * 1000);

  return { ...obj, id };
};

let person2 = addID(['Tony', 17]); // ERROR: argument should have a name property with string value

泛型允许在参数和返回类型提前未知的组件中具有类型安全。

在 TypeScript 中，泛型用于描述两个值之间的对应关系。在上面的例子中，返回类型与输入类型有关。我们用一个泛型来描述对应关系。

另一个例子：如果需要接受多个类型的函数，最好使用泛型而不是 any 。下面展示了使用 any 的问题：

function logLength(a: any) {
  console.log(a.length); // No error
  return a;
}

let hello = 'Hello world';
logLength(hello); // 11

let howMany = 8;
logLength(howMany); // undefined (but no TypeScript error - surely we want TypeScript to tell us we've tried to access a length property on a number!)

我们可以尝试使用泛型：

function logLength<T>(a: T) {
  console.log(a.length); // ERROR: TypeScript isn't certain that `a` is a value with a length property
  return a;
}

好，至少我们现在得到了一些反馈，可以帮助我们持续改进我们的代码。

解决方案：使用一个泛型来扩展一个接口，确保传入的每个参数都有一个 length 属性：

interface hasLength {
  length: number;
}

function logLength<T extends hasLength>(a: T) {
  console.log(a.length);
  return a;
}

let hello = 'Hello world';
logLength(hello); // 11

let howMany = 8;
logLength(howMany); // Error: numbers don't have length properties

我们也可以编写这样一个函数，它的参数是一个元素数组，这些元素都有一个 length 属性：

interface hasLength {
  length: number;
}

function logLengths<T extends hasLength>(a: T[]) {
  a.forEach((element) => {
    console.log(element.length);
  });
}

let arr = [
  'This string has a length prop',
  ['This', 'arr', 'has', 'length'],
  { material: 'plastic', length: 17 },
];

logLengths(arr);
// 29
// 4
// 30

泛型是 TypeScript 的一个很棒的特性！

泛型接口

当我们不知道对象中的某个值是什么类型时，可以使用泛型来传递该类型：

// The type, T, will be passed in
interface Person<T> {
  name: string;
  age: number;
  documents: T;
}

// We have to pass in the type of `documents` - an array of strings in this case
const person1: Person<string[]> = {
  name: 'Tony',
  age: 17,
  documents: ['passport', 'bank statement', 'visa'],
};

// Again, we implement the `Person` interface, and pass in the type for documents - in this case a string
const person2: Person<string> = {
  name: 'Tom',
  age: 20,
  documents: 'passport, P45',
};

枚举

枚举是 TypeScript 给 JavaScript 带来的一个特殊特性。枚举允许我们定义或声明一组相关值，可以是数字或字符串，作为一组命名常量。

enum ResourceType {
  BOOK,
  AUTHOR,
  FILM,
  DIRECTOR,
  PERSON,
}

console.log(ResourceType.BOOK); // 0
console.log(ResourceType.AUTHOR); // 1

// 从 1 开始
enum ResourceType {
  BOOK = 1,
  AUTHOR,
  FILM,
  DIRECTOR,
  PERSON,
}

console.log(ResourceType.BOOK); // 1
console.log(ResourceType.AUTHOR); // 2

默认情况下，枚举是基于数字的 — 它们将字符串值存储为数字。但它们也可以是字符串：

enum Direction {
  Up = 'Up',
  Right = 'Right',
  Down = 'Down',
  Left = 'Left',
}

console.log(Direction.Right); // Right
console.log(Direction.Down); // Down

当我们有一组相关的常量时，枚举就可以派上用场了。例如，与在代码中使用非描述性数字不同，枚举通过描述性常量使代码更具可读性。

枚举还可以防止错误，因为当你输入枚举的名称时，智能提示将弹出可能选择的选项列表。

TypeScript 严格模式

建议在 tsconfig.json 中启用所有严格的类型检查操作文件。这可能会导致 TypeScript 报告更多的错误，但也更有助于帮你提前发现发现程序中更多的 bug。

 // tsconfig.json
 "strict": true

严格模式实际上就意味着：禁止隐式 any 和严格的空检查。

禁止隐式 any

在下面的函数中，TypeScript 已经推断出参数 a 是 any 类型的。当我们向该函数传递一个数字，并尝试打印一个 name 属性时，没有报错：

function logName(a) {
  // No error??
  console.log(a.name);
}

logName(97);

打开 noImplicitAny 选项后，如果我们没有显式地声明 a 的类型，TypeScript 将立即标记一个错误：

// ERROR: Parameter 'a' implicitly has an 'any' type.
function logName(a) {
  console.log(a.name);
}

严格的空检查

当 strictNullChecks 选项为 false 时，TypeScript 实际上会忽略 null 和 undefined。这可能会在运行时导致意外错误。

当 strictNullChecks 设置为 true 时，null 和 undefined 有它们自己的类型，如果你将它们分配给一个期望具体值(例如，字符串)的变量，则会得到一个类型错误。

let whoSangThis: string = getSong();

const singles = [
  { song: 'touch of grey', artist: 'grateful dead' },
  { song: 'paint it black', artist: 'rolling stones' },
];

const single = singles.find((s) => s.song === whoSangThis);

console.log(single.artist);

singles.find 并不能保证它一定能找到这首歌 — 但是我们已经编写了下面的代码，好像它肯定能找到一样。

通过将 strictNullChecks 设置为 true， TypeScript 将抛出一个错误，因为在尝试使用它之前，我们没有保证 single 一定存在：

const getSong = () => {
  return 'song';
};

let whoSangThis: string = getSong();

const singles = [
  { song: 'touch of grey', artist: 'grateful dead' },
  { song: 'paint it black', artist: 'rolling stones' },
];

const single = singles.find((s) => s.song === whoSangThis);

console.log(single.artist); // ERROR: Object is possibly 'undefined'.

TypeScript 基本上是告诉我们在使用 single 之前要确保它存在。我们需要先检查它是否为 null 或 undefined：

if (single) {
  console.log(single.artist); // rolling stones
}

TypeScript 中的类型收窄

在 TypeScript 中，变量可以从不太精确的类型转移到更精确的类型，这个过程称为类型收窄。

下面是一个简单的例子，展示了当我们使用带有 typeof 的 if 语句时，TypeScript 如何将不太特定的 string | number 缩小到更特定的类型：

function addAnother(val: string | number) {
  if (typeof val === 'string') {
    // ts 将 val 视为一个字符串
    return val.concat(' ' + val);
  }

  // ts 知道 val 在这里是一个数字
  return val + val;
}

console.log(addAnother('哈哈')); // 哈哈 哈哈
console.log(addAnother(17)); // 34

另一个例子：下面，我们定义了一个名为 allVehicles 的联合类型，它可以是 Plane 或 Train 类型。

interface Vehicle {
  topSpeed: number;
}

interface Train extends Vehicle {
  carriages: number;
}

interface Plane extends Vehicle {
  wingSpan: number;
}

type PlaneOrTrain = Plane | Train;

function getSpeedRatio(v: PlaneOrTrain) {
  console.log(v.carriages); // ERROR: 'carriages' doesn't exist on type 'Plane'
}

由于 getSpeedRatio 函数处理了多种类型，我们需要一种方法来区分 v 是 Plane 还是 Train 。我们可以通过给这两种类型一个共同的区别属性来做到这一点，它带有一个字符串值:

interface Train extends Vehicle {
  type: 'Train';
  carriages: number;
}

interface Plane extends Vehicle {
  type: 'Plane';
  wingSpan: number;
}

type PlaneOrTrain = Plane | Train;

现在，TypeScript 可以缩小 v 的类型:

function getSpeedRatio(v: PlaneOrTrain) {
  if (v.type === 'Train') {
    return v.topSpeed / v.carriages;
  }

  // 如果不是 Train，ts 知道它就是 Plane 了，聪明！
  return v.topSpeed / v.wingSpan;
}

let bigTrain: Train = {
  type: 'Train',
  topSpeed: 100,
  carriages: 20,
};

console.log(getSpeedRatio(bigTrain)); // 5

TypeScript 高级方法

keyof类型操作符

interface People {
  name: string;
  sex: string;
  age: number;
}
type PeopleKey = keyof People;
//等价于 
// type PersonKeys = 'name' | 'sex' | 'age'

有了属性名联合类型，我们可以在编写代码时更准确地操作属性名。以下是一些使用keyof的实际应用：

1. 动态获取对象的属性值

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

const person: Person = { name: 'Lucy', age: 18, gender: 'female' };
const name = getProperty(person, 'name'); // 类型为string
const age = getProperty(person, 'age'); // 类型为number
const gender = getProperty(person, 'gender'); // 类型为'male' | 'female'

2. 避免硬编码属性名

class User {
  constructor(private data: Person) {}

  get<K extends keyof Person>(key: K): Person[K] {
    return this.data[key];
  }
}

const user = new User({ name: 'Lucy', age: 18, gender: 'female' });
const name2 = user.get('name'); // 类型为string
const age = user.get('age'); // 类型为number
const gender = user.get('gender'); // 类型为'male' | 'female'

typeof类型操作符

TypeScript中的typeof类型操作符可以用来获取一个值的类型信息，它返回一个代表该值类型的字符串。typeof操作符不会运行代码，只会在编译时进行类型检查。

lt str = 'hello world';
if (typeof str === 'string') {
  console.log('str is a string');
}

实用类型

`Awaited<Type>`

版本: 4.5

获取 Promise 的返回类型

let aa = Promise.resolve(true);

//4.5版本之前
type cc = typeof aa extends Promise<infer U> ? U : typeof aa;
//获取到类型为boolean

//4.5版本之后
type cc = Awaited<typeof aa>;
//获取到类型为boolean

`Partial<Type>`

版本: 2.1

把参数变为可选参数

interface People {
  sex: string;
  name: string;
  age: number;
}

const student: Partial<People> = {};

`Required<Type>`

版本: 2.8

把可选参数变为必填参数

interface People {
  name?: string;
  age?: number;
}

const student: Required<People> = {};
//类型“{}”缺少类型“Required<People>”中的以下属性: name, age

`Readonly<Type>`

版本: 2.1

参数赋值后不能被修改

interface People {
  name: string;
  age: number;
}

const student: Readonly<People> = {
  name: 'tony',
  age: 18
};
student.name = 'kk';
//无法为“name”赋值，因为它是只读属性。

`Record<Keys, Type>`

版本: 2.1

过映射类型的语法来生成索引类型

interface CatInfo {
  age: number;
  breed: string;
}

type CatName = 'miffy' | 'boris' | 'mordred';

const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: 'Persian' },
  boris: { age: 5, breed: 'Maine Coon' },
  mordred: { age: 16, breed: 'British Shorthair' }
};

`Pick<Type, Keys>`

版本: 2.1

只需要获取部分类型, 减少代码量

interface Student {
  name: string;
  age: number;
  gender: number;
  father: string;
  mother: string;
}

//只需要  name age gender
type People = Pick<Student, 'name' | 'age' | 'gender'>;

`Omit<Type, Keys>`

版本: 3.5

不要哪部分类型

interface Student {
  name: string;
  age: number;
  gender: number;
  father: string;
  mother: string;
}
//不需要  father mother
type People = Omit<Student, 'father' | 'mother'>;

`Exclude<UnionType, ExcludedMembers>`

版本: 2.8

过滤不需要的类型

type T0 = Exclude<"a" | "b" | "c", "a">;
//也就是 type T0 = "b" | "c"

type T1 = Exclude<"a" | "b" | "c", "a" | "b">;
//也就是 type T1 = "c"

type T2 = Exclude<string | number | (() => void), Function>;
//也就是 type T2 = string | number


type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; x: number }
  | { kind: "triangle"; x: number; y: number };
type T3 = Exclude<Shape, { kind: "circle" }>
//也就是
type T3 = { kind: "square"; x: number; } | 
{ kind: "triangle"; x: number; y: number; }

`Extract<Type, Union>`

版本: 2.8

取出需要的指定类型

type T0 = Extract<"a" | "b" | "c", "a" | "f">;
//也就是 type T0 = "a"

type T1 = Extract<string | number | (() => void), Function>;
//也就是 type T1 = () => void


type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; x: number }
  | { kind: "triangle"; x: number; y: number };

type T2 = Extract<Shape, { kind: "circle" }>
//也就是
type T2 = { kind: "circle"; radius: number; }

`NonNullable<Type>`

版本: 2.8

从类型中剔除null和undefined，然后构造一个类型。

type T0 = NonNullable<string | number | undefined>;
//也就是 type T0 = string | number

type T1 = NonNullable<string[] | null | undefined>;
//也就是 type T1 = string[]

`Parameters<Type>`

版本: 3.1

从函数类型Type的参数中使用的类型构造一个元组类型。

type T0 = Parameters<() => string>;
//也就是 type T0 = []
const to: T0 = [];

type T1 = Parameters<(s: string) => void>;
//也就是type T1 = [s: string]
const t1: T1 = ['s1'];

type T2 = Parameters<<T>(arg: T) => T>;
//也就是 type T2 = [arg: unknown]
const t2: T2 = [{ name: 'tony' }];

declare function f1(arg: { a: number; b: string }): void;
type T3 = Parameters<typeof f1>;
//也就是 type T3 = [
//   arg: {
//     a: number;
//     b: string;
//   }
// ];
 const t3: T3 = [{ a: 18, b: 'kk' }];

type T4 = Parameters<any>;
//也就是 type T4 = unknown[]
 const t4: T4 = ['1', '2', '3', 4, true, { name: 'kk' }];

type T5 = Parameters<never>;
//也就是 type T5 = never
// function handleError(error: any): never {
//   throw new Error(error);
// }
 const t5: T5 = handleError('never类型');

`ConstructorParameters<Type>`

版本: 3.1

从构造函数的类型构造元组或数组类型。它会生成具有所有参数类型的元组类型（如果Type不是函数，则该类型为 never ）。

type T0 = ConstructorParameters<ErrorConstructor>;
//也就是 type T0 = [message?: string | undefined]
const t0: T0 = ['sss'];

type T1 = ConstructorParameters<FunctionConstructor>;
//也就是 type T1 = string[]
const t1: T1 = ['sss'];

type T3 = ConstructorParameters<typeof C>;
//也就是 type T3 = [a: number, b: string];
const t3: T3 = [1, 'sss'];

type T4 = ConstructorParameters<any>;
// type T4 = unknown[];
const t4: T4 = [true, 'sss', 1];

`ReturnType<Type>`

版本: 2.8

由函数类型 Type 的返回值类型构造一个类型。

type T0 = ReturnType<() => string>;
//也就是 type T0 = string
const t0: T0 = 'sss';

type T1 = ReturnType<(s: string) => void>;
//也就是 type T1 = void
const t1 = (name: string): T1 => {};

type T2 = ReturnType<<T>() => T>;
//也就是 type T2 = unknown;
const t2: T2 = '1';

type T3 = ReturnType<<T extends U, U extends number[]>() => T>;
//也就是 type T3 = number[]
const t3: T3 = [1, 2];

declare function f1(): { a: number; b: string };
type T4 = ReturnType<typeof f1>;
//也就是 type T4 = {
//   a: number;
//   b: string;
// };
const t4: T4 = {
  a: 10,
  b: 'qq'
};

type T5 = ReturnType<any>;
//也就是 type T5 = any
const t5: T5 = 123;

自定义类型

type Optional<T, K extends keyof T> = Omit<T, K> &
    Partial<Pick<T, K>>

interface TableData {
    version: number 
    remark: string 
    type: number 
    forced: number 
    state: number 
    publishTime: string 
    createTime: string 
    verId: number
  }

type Params = Optional<
    Omit<TableData, 'createTime' | 'state'>,
    'publishTime' | 'verId'
  > 
 //以上类型表示,排除了createTime和state类型, 并把publishTime和verId设置为可选

装饰器

装饰器属于实验性，需要启动话，需要通过以下的方式进行启动装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上。装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。

#命令行
tsc --target ES5 --experimentalDecorators

//tsconfig.json:
{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

类装饰器

interface Params {
  username: string;
  password: string;
}
const CheckParams: ClassDecorator = (target: Function) => {
  target.prototype.check = (params: Params) => {
    if (!params.username || !params.password) {
      console.log(!params.username ? '请输入账号' : '请输入密码');
      return;
    }
    console.log('登录成功');
  };
};

@CheckParams
class LoginController {
  login(this: any) {
    console.log('登录中');
    console.log('================');
    this.check({ username: 'tony', password: '123456' });
  }
}
new LoginController().login();

方法装饰器

方法装饰器有三个参数，

第一个参数target: 如果是修饰普通方法,则target代表的是原型对象，如果修饰的是静态方法（static），target则是一个构造函数。
第二个参数propertyKey: 是函数的名字，例如这里则是 ‘show’
第三个参数descriptor: 主要是函数的一些配置属性，这里介绍2个比较常用的
- descriptor.value // 可以获取到该函数,也就是修改这个方法
- descriptor.writable // 控制该函数是否可以修改
- descriptor.enumerable //可枚举性(迭代性)
- descriptor.configurable //可配置性

const checkParams: MethodDecorator = (
  _target: ImMethods,
  _propertyKey: string | symbol,
  descriptor: PropertyDescriptor
) => {
  let oldValue = descriptor.value;
  descriptor.value = function (...args: ImParams[]) {
    const data = args[0];
    isEmpty(data.url, 'url不能为空');
    isEmpty(data.userId, 'userId不能为空');
    isEmpty(data.userType, 'userType不能为空');
    if (!isType(data.url)('String')) {
      outputError('url只能是string类型');
    }
    if (!isType(data.userId)('Number')) {
      outputError('userId只能是number类型');
    }
    if (!isType(data.userType)('Number')) {
      outputError('userType只能是number类型');
    }
    switch (data.userType) {
      case UserType.sdk_h5:
        isEmpty(data.platformId, 'platformId不能为空');
        isEmpty(data.appId, 'appId不能为空');
        isEmpty(data.roleId, 'roleId不能为空');
        if (!isType(data.platformId)('String')) {
          outputError('platformId只能是string类型');
        }
        if (!isType(data.appId)('String')) {
          outputError('appId只能是string类型');
        }
        if (!isType(data.roleId)('String')) {
          outputError('roleId只能是string类型');
        }
        break;
      case UserType.inner_web:
        break;
      case UserType.guild_web:
        break;
      default:
        outputError('userType参数有误,请检查');
        break;
    }

    return oldValue.apply(this, args);
  };
};

class Im {
  private static instance: Im;
  @checkParams
  static createInstance(data: ImParams) {
    if (!this.instance) {
      this.instance = new Im(data);
      Im.instance.isConnection = false;
    }
    Im.instance.wsUrl = generateUrl(data);
    return this.instance;
  }
}

属性装饰器

第一个参数：对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
第二个参数：成员的名字。该代码也比较简单，在装饰器中对title属性进行拦截，将大写字母转化成小写。

const VisitDecorator: PropertyDecorator = (
  target: any,
  propertyKey: string | symbol
) => {
  let value: string | undefined;

  Object.defineProperty(target, propertyKey, {
    get: () => {
      console.log('====');

      return value?.toLocaleLowerCase();
    },
    set: (v: string) => {
      value = v;
    }
  });
};

class Visit {
  @VisitDecorator
  title: string | undefined;
}

const obj = new Visit();
obj.title = 'JKWRUJ';
console.log(obj.title);

参数装饰器

参数装饰器表达式会在运行时当作函数调用，可以使用参数装饰器为类的原型

增加一些元素数据，传入三个参数：

第一个参数：对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
第二个参数：方法名称
第三个参数：参数在函数参数列表中的索引

const RequiredDecorator: ParameterDecorator = function (
  target: Object,
  propertyKey: string | symbol | undefined,
  parameterIndex: number
) {
  let requiredParams: number[] = [];
  requiredParams.push(parameterIndex);
};
class ValidateUser {
  find(name: string, @RequiredDecorator id: number) {
    console.log(id);
  }
}
new ValidateUser().find('tony', 10);

装饰器工厂

本质就是一个高阶函数，让装饰器可以传递参数，

const sleepDecoratorFactory =
  (waitTime: number) =>
  (
    target: any,
    propertyKey: string | symbol,
    descriptor: PropertyDescriptor
  ) => {
    target.name = 'zs';
    const value = descriptor.value;
    descriptor.value = () => {
      setTimeout(() => {
        value();
      }, waitTime);
    };
  };
class Music {
  @sleepDecoratorFactory(2000)
  public play() {
    console.log('start play');
  }
}
const music = new Music();
music.play();
console.log((music as any).name);
//结果 先输出 zs 再输出start play

tsconfig.json文件

使用说明

tsconfig.json 是放在项目根目录，用来配置一些编译选项等。

当我们使用 tsc 命令编译项目，且没有指定输入文件时，编译器就会去查找 tsconfig.json 文件。

如果在当前目录没找到，就会逐级向父文件夹查找。我们也可以通过在 tsc 命令中加上--project 参数，来指定一个包含 tsconfig.json 文件的目录。

如果命令行上指定了输入文件时，根目录中tsconfig.json 的配置会被忽略。

# 直接在项目根目录下执行tsc命令，会自动根据tsconfig.json配置项编译
tsc
# 指定要编译的项目，即tsconfig.json所在文件目录
tsc --project ./dir/project
# 指定要编译的文件，忽略tsconfig.json文件配置
tsc ./src/main.ts

常见配置项

接下来我们看一下 tsconfig.json 里都有哪些可配置项。tsconfig.json 文件里有几个主要的配置项：

{
  "compileOnSave": true,
  "files": [],
  "include": [],
  "exclude": [],
  "extends": "",
  "compilerOptions": {}
}

我们来逐个学习它们的作用，以及可配置的值：

compileOnSave

compileOnSave 的值是 true 或 false。如果设为 true，在我们编辑了项目中文件保存的时候，编辑器会根据 tsconfig.json 的配置重新生成文件，不过这个要编辑器支持。

files

files 可以配置一个数组列表，里面包含指定文件的相对或绝对路径。编译器在编译的时候只会编译包含在 files 中列出的文件。如果不指定，则取决于有没有设置 include 选项；如果没有 include 选项，则默认会编译根目录以及所有子目录中的文件。这里列出的路径必须是指定文件，而不是某个文件夹，而且不能使用*、?、**/等通配符。

include

include 也可以指定要编译的路径列表，但和 files 的区别在于，这里的路径可以是文件夹，也可以是文件，可以使用相对和绝对路径，而且可以使用通配符。比如"./src"即表示要编译 src 文件夹下的所有文件以及子文件夹的文件。

exclude

exclude 表示要排除的、不编译的文件，它也可以指定一个列表，规则和 include 一样，可以是文件可以是文件夹，可以是相对路径或绝对路径，可以使用通配符。

extends

extends 可以通过指定一个其它的 tsconfig.json 文件路径，来继承这个配置文件里的配置，继承来的文件配置会覆盖当前文件定义的配置。TS 在 3.2 版本开始，支持继承一个来自 Node.js 包的 tsconfig.json 配置文件。

compilerOptions

基础配置项

target：

用于指定编译之后的版本目标，可选值有：ES3(默认值)、ES5、ES2015、ES2016、ES2017、ESNEXT。如果不配置 target 项，默认是讲代码转译为 ES3 的版本，如果设为 ESNEXT，则为最新 ES 规范版本。
module：

用来指定要使用的模块标准，可选值有commonjs、amd、system、umd、es2015(或写 es6)。如果不设置 module 选项，则如果 target 设为 ES6，那么 module 默认值为 ES6，否则是 commonjs。
lib：

用于指定要包含在编译中的库文件。

如果你要使用一些 ES6 的新语法，你需要引入 ES6 这个库，或者也可以写 ES2015。

如果没有指定 lib 配置，默认会加载一些库，而加载什么库是受 target 影响的。

如果 target 为 ES5，默认包含的库有DOM、ES5和ScriptHost；如果 target 是 ES6，默认引入的库有DOM、ES6、DOM.Iterable和ScriptHost。
allowJs：

设置的值为 true 或 false，用来指定是否允许编译 JS 文件，默认是 false，即不编译 JS 文件。
checkJs：

值为 true 或 false，用来指定是否检查和报告 JS 文件中的错误，默认是 false。
declaration：

值为 true 或 false，用来指定是否在编译的时候生成响应的".d.ts"声明文件。

如果设为 true，编译每个 ts 文件之后会生成一个 js 文件和一个声明文件。

但是 declaration 和 allowJs 不能同时设为 true。
sourceMap：

值为 true 或 false，用来指定编译时是否生成.map 文件。
outFile：

用于指定将输出文件合并为一个文件，它的值为一个文件路径名，比如设置为"./dist/main.js"，则输出的文件为一个 main.js 文件。

但是要注意，只有设置 module 的值为 amd 和 system 模块时才支持这个配置。
outDir：

用来指定输出文件夹，值为一个文件夹路径字符串，输出的文件都将放置在这个文件夹。
rootDir：

用来指定编译文件的根目录，编译器会在根目录查找入口文件，如果编译器发现 1 以 rootDir 的值作为根目录查找入口文件并不会把所有文件加载进去的话会报错，但是不会停止编译。
removeComments：

值为 true 或 false，用于指定是否将编译后的文件中的注释删掉，设为 true 的话即删掉注释，默认为 false。
noEmit：

不生成编译文件，这个一般很少用了。
importHelpers：

值为 true 或 false，指定是否引入 tslib 里的辅助工具函数，默认 Wie。
isolatedModules：

值为 true 或 false，指定是否将每个文件作为单独的模块，默认为 true，它不可以和 declaration 同时设定。

严格类型检查相关

noImplicitAny

值为 true 或 false，如果我们没有为一些值设置明确的类型，编译器会默认这个值为 any 类型。

如果将 noImplicitAny 设为 true，则如果没有设置明确的类型会报错，默认值为 false。
alwaysStrict

值为 true 或 false，指定始终以严格模式检查每个模块，并且在编译之后的 JS 文件中加入"use strict"字符串，用来告诉浏览器该 JS 为严格模式。
strictNullChecks

值为 true 或 false，当设为 true 时，null 和 undefined 值不能赋值给非这两种类型的值，别的类型的值也不能赋给它们。

除了 any 类型，还有个例外就是 undefined 可以赋值给 void 类型。
strictFunctionTypes

值为 true 或 false，用来指定是否使用函数参数双向协变检查。还记得我们讲类型兼容性的时候讲过函数参数双向协变的这个例子：
```
let funcA = function(arg: number | string): void {};
let funcB = function(arg: number): void {};
funcA = funcB;
```

如果开启了 strictFunctionTypes，这个赋值就会报错，默认为 false

strictPropertyInitialization

值为 true 或 false，设为 true 后会检查类的非 undefined 属性是否已经在构造函数里初始化，如果要开启这项，需要同时开启 strictNullChecks，默认为 false。

strictBindCallApply

值为 true 或 false，设为 true 后会对 bind、call 和 apply 绑定方法参数的检测是严格检测的，如下面的例子：

function foo(a: number, b: string): string {
  return a + b;
}
let a = foo.apply(this, [1]); // error Property '1' is missing in type '[number]' but required in type '[number, string]'
let b = foo.apply(this, [1, 2]); // error 不能将类型“number”分配给类型“string”
let ccd = foo.apply(this, [1, "a"]); // right
let ccsd = foo.apply(this, [1, "a", 2]); // right

strict

值为 true 或 false，用于指定是否启动所有类型检查，如果设为 true 则会同时开启前面这几个严格类型检查，默认为 false。

额外一些检查

开启了这些检查如果有错会提示不会报错：

noUnusedLocals

值为 true 或 false，用于检查是否有定义了但是没有使用的变量，对于这一点的检测，使用 ESLint 可以在你书写代码的时候做提示，你可以配合使用。

它的默认值为 false。
noUnusedParameters

值为 true 或 false，用于检查是否有在函数体中没有使用的参数，这个也可以配合 ESLint 来做检查，它默认是 false。
noImplicitReturns

值为 true 或 false，用于检查函数是否有返回值，设为 true 后，如果函数没有返回值则会提示，默认为 false。
noFallthroughCasesInSwitch

值为 true 或 false，用于检查 switch 中是否有 case 没有使用 break 跳出 switch，默认为 false。

模块解析

moduleResolution

用于选择模块解析策略，有"node"和"classic"两种类型，我们在讲模块解析的时候已经讲过了。
baseUrl

用于设置解析非相对模块名称的基本目录，相对模块不会受 baseUrl 的影响。

paths

用于设置模块名到基于 baseUrl 的路径映射，我们前面也讲过，比如这样配置：

{
  "compilerOptions": {
    "baseUrl": ".", // 如果使用paths，必须设置baseUrl
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"] // 此处映射是相对于"baseUrl"
    }
  }
}

还有当我们要为没有声明文件的第三方模块写声明文件时，我们可以先如下设置：

{
  "compilerOptions": {
    "baseUrl": ".", // 如果使用paths，必须设置baseUrl
    "paths": {
      "*": ["./node_modules/@types/*", "./typings/*"]
    }
  }
}

然后在 tsconfig.json 文件所在的目录里建一个 typings 文件夹，然后为要写声明文件的模块建一个同名文件夹，比如我们要为 make-dir 这个模块写声明文件，那么就在 typings 文件夹下新建一个文件夹，命名为 make-dir，然后在 make-dir 文件夹新建一个 index.d.ts 声明文件来为这个模块补充声明。

rootDirs

可以指定一个路径列表，在构建时编译器会将这个路径列表中的路径内容都放到一个文件夹中，我们在前面也学习了。
typeRoots

用来指定声明文件或文件夹的路径列表，如果指定了此项，则只有在这里列出的声明文件才会被加载。
types

用来指定需要包含的模块，只有在这里列出的模块声明文件才会被加载进来。
allowSyntheticDefaultImports

值为 true 或 false，用来指定允许从没有默认导出的模块中默认导入。

source map

sourceRoot

用于指定调试器应该找到 TypeScript 文件而不是源文件位置，这个值会被写进.map 文件里。
mapRoot

用于指定调试器找到映射文件而非生成文件的位置，指定 map 文件的根路径，该选项会影响.map 文件中的 sources 属性。
inlineSourceMap

值为 true 或 false，指定是否将 map 文件的内容和 js 文件编译在同一个 js 文件中。

如果设为 true，则 map 的内容会以//# sourceMappingURL=然后接 base64 字符串的形式插入在 js 文件底部。
inlineSources

值是 true 或 false，用于指定是否进一步将.ts 文件的内容也包含到输出文件中。

其他的配置项

experimentalDecorators

值是 true 或 false，用于指定是否启用实验性的装饰器特性；
emitDecoratorMetadata

值为 true 或 false，用于指定是否为装饰器提供元数据支持。

关于元数据，也是 ES6 的新标准，可以通过 Reflect 提供的静态方法获取元数据，如果需要使用 Reflect 的一些方法，需要引入 ES2015.Reflect 这个库。

TypeScript笔记

TypeScript初识

安装TypeScript

TypeScript 中的类型

原始类型

TypeScript 中的数组

TypeScript 中的对象

TypeScript 中的函数

函数重载

any 类型

DOM 和类型转换

TypeScript 中的类

private 私有属性

protected 受保护

存取器

readonly 只读修饰符

静态属性

单例模式

抽象类

静态方法

TypeScript 中的接口

类的 interface

函数的定义

索引类型

绕开多余属性检查

泛型

泛型接口

枚举

TypeScript 严格模式

禁止隐式 any

严格的空检查

TypeScript 中的类型收窄

TypeScript 高级方法

keyof类型操作符

1. 动态获取对象的属性值

2. 避免硬编码属性名

typeof类型操作符

实用类型

Awaited<Type>

Partial<Type>

Required<Type>

Readonly<Type>

Record<Keys, Type>

Pick<Type, Keys>

Omit<Type, Keys>

Exclude<UnionType, ExcludedMembers>

Extract<Type, Union>

NonNullable<Type>

Parameters<Type>

ConstructorParameters<Type>

ReturnType<Type>

自定义类型

装饰器

类装饰器

方法装饰器

属性装饰器

参数装饰器

装饰器工厂

tsconfig.json文件

使用说明

常见配置项

compileOnSave

files

include

exclude

extends

compilerOptions

基础配置项

严格类型检查相关

额外一些检查

模块解析

source map

其他的配置项

`Awaited<Type>`

`Partial<Type>`

`Required<Type>`

`Readonly<Type>`

`Record<Keys, Type>`

`Pick<Type, Keys>`

`Omit<Type, Keys>`

`Exclude<UnionType, ExcludedMembers>`

`Extract<Type, Union>`

`NonNullable<Type>`

`Parameters<Type>`

`ConstructorParameters<Type>`

`ReturnType<Type>`