Null 和 Undefined
number 数值
boolean 布尔
string 字符串
类型推论
any 任意类型
unknown 任意类型
void 空值指定方法类型
联合类型
- 简单使用
- 访问联合类型的属性或方法
type 类型别名
对象的类型 — Interfaces 接口
数组类型
- 简单使用
- 「类型 + 方括号」表示法
元组类型
enum 枚举类型
DOM 和 BOM

Null 和 Undefined

let u: undefined = undefined;
let j: number | undefined; // undefined 常用于组合类型
let n: null = null;
// undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量
// 这样不会报错
let num: number = u;

但是如果指定了 —strictNullChecks 严格空校验，null 和 undefined 只能赋值给 void 和它们各自，不然会报错。

let age: number = null
let realName: string = undefined

number 数值

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

boolean 布尔

let isDone: boolean = false;
// 使用构造函数 Boolean 创造的对象不是布尔值，事实上 new Boolean() 返回的是一个 Boolean 对象
let createdByNewBoolean: Boolean = new Boolean(1);

string 字符串

let myName: string = 'Tom';
let myAge: number = 25;
// 模板字符串
let sentence: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;

类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。

以下代码虽然没有指定类型，但是会在编译的时候报错：

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

事实上，它等价于：

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。
如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 **any** 类型而完全不被类型检查：

let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

any 任意类型

普通类型，在赋值过程中改变类型是不被允许的，如果是 any 类型，则允许被赋值为任意类型

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

在任意值上访问任何属性都是允许的：

let anyThing: any = 'hello';
console.log(anyThing.myName);
console.log(anyThing.myName.firstName);

也允许调用任何方法：

let anyThing: any = 'Tom';
anyThing.setName('Jerry');
anyThing.setName('Jerry').sayHello();
anyThing.myName.setFirstName('Cat');

可以认为，声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：

let something;
something = 'seven';
something = 7;
something.setName('Tom');

等价于

let something: any;
something = 'seven';
something = 7;
something.setName('Tom'

不建议使用 any，不然就丧失了 TS 的意义，用到 any，就意味着放弃类型检查了，因为它不是用来描述具体类型的。

在使用它之前，我们需要想两件事：

能否使用更具体的类型
能否使用 unknown 代替

都不能的情况下，any 才是最后的选择。

unknown 任意类型

不建议使用 any，当我不知道一个类型具体是什么时，该怎么办？

可以使用 unknown 类型

unknown 类型代表任何类型，它的定义和 any 定义很像，但是它是一个安全类型，使用 unknown 做任何事情都是不合法的。相当于是安全版本的 any 类型

比如，这样一个 divide 函数，

function divide(param: any) {  
  return param / 2
}

把 param 定义为 any 类型，TS 就能编译通过，没有把潜在的风险暴露出来，万一传的不是 number 类型，不就没有达到预期了吗。

把 param 定义为 unknown 类型，TS 编译器就能拦住潜在风险，如下图，

function divide(param: unknown) {   
  return param / 2
}

因为不知道 param 的类型，使用运算符 /，导致报错。

再配合类型断言，即可解决这个问题，

function divide(param: unknown) {  
  // 1.类型断言 —— 不飘红，但执行时可能错误
  return param as number / 2 
  // 2、类型守卫 —— 不飘红，且确保正常执行
  if (typeof param === 'number') {
    // 推断出类型: number
    return param / 2
  }
   // 3、类型断言函数，抛出错误 —— 不飘红，且确保正常执行
    assertIsNumber(param);
    return param / 2
}
/** 类型断言函数，抛出错误 */
function assertIsNumber(arg: unknown): asserts arg is Number {
    if (!(arg instanceof Number)) {
        thrownewTypeError('Not a Number: ' + arg);
    }
}

使用 any 好比鬼屋探险，代码执行的时候处处见鬼。而 unknown 结合类型守卫等方式，可以确保上游数据结构不确定时，也能让代码正常执行。

void 空值指定方法类型

void 类型与 any 类型相反，它表示没有任何类型。

在 TypeScript 中，可以用 void 表示没有任何返回值的函数，方法体中不能return

function alertName(): void {
    alert('My name is Tom');
}
// 声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null：
let unusable: void = undefined;

联合类型

简单使用

表示取值可以为多种类型中的一种联合类型使用 | 分隔每个类型。

let UnionTypesr: string | number;

访问联合类型的属性或方法

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

function getLength(something: string | number): number {
    return something.length;
}
// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

上例中，length 不是 string 和 number 的共有属性，所以会报错。
访问 string 和 number 的共有属性是没问题的：

function getString(something: string | number): string {
    return something.toString();
}

联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型：

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错
// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

上例中，第二行的 myFavoriteNumber 被推断成了 string，访问它的 length 属性不会报错。
而第四行的 myFavoriteNumber 被推断成了 number，访问它的 length 属性时就报错了。

type 类型别名

类型别名用来给一个类型起个新名字。

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

上例中，我们使用 type 创建类型别名。
类型别名常用于联合类型。

对象的类型 — Interfaces 接口

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

简单例子

interface Person {
    readonly id: number; //只读属性
    name: string;
    age?: number;  //可选属性
    [propName: string]: any; //任意属性
}
let tom: Person = {
    id: 8978958,
    name: 'Tom',
    age: 25,
    gender: 'male'
};
interface ObjectType<T> {
  [key: string]: T
}
function isObjectLike(value: any): value is ObjectType<any>{
// ...
}

上面的例子中，我们定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person。这样，我们就约束了 tom 的形状必须和接口 Person 一致。

首字母大写形状一致

接口一般首字母大写。
赋值的时候，变量的形状必须和接口的形状保持一致。
定义的变量比接口少了一些属性是不允许的：

interface Person {
    name: string;
    age: number;
}
let tom: Person = {
    name: 'Tom'
};
// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
//   Property 'age' is missing in type '{ name: string; }'.

多一些属性也是不允许的：

interface Person {
    name: string;
    age: number;
}
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};
// index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

可选属性

有时我们希望不要完全匹配一个形状，那么可以用可选属性：

interface Person {
    name: string;
    age?: number;
}
let tom: Person = {
    name: 'Tom'
};

interface Person {
    name: string;
    age?: number;
}
let tom: Person = {
    name: 'Tom',
    age: 25
};

可选属性的含义是该属性可以不存在。
这时仍然不允许添加未定义的属性：

interface Person {
    name: string;
    age?: number;
}
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};
// examples/playground/index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'

任意属性

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}
let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

使用 [propName: string] 定义了任意属性取 string 类型的值。
需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};
// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Index signatures are incompatible.
//     Type 'string | number' is not assignable to type 'string'.
//       Type 'number' is not assignable to type 'string'.

上例中，任意属性的值允许是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了。

另外，在报错信息中可以看出，此时 { name: 'Tom', age: 25, gender: 'male' } 的类型被推断成了 { [x: string]: string | number; name: string; age: number; gender: string; }，这是联合类型和接口的结合。

一个接口中只能定义一个任意属性。如果接口中有多个类型的属性，则可以在任意属性中使用联合类型：

interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number;
}
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}
let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};
tom.id = 9527;
// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

上例中，使用 readonly 定义的属性 id 初始化后，又被赋值了，所以报错了。
注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候：

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}
let tom: Person = {
    name: 'Tom',
    gender: 'male'
};
tom.id = 89757;
// index.ts(8,5): error TS2322: Type '{ name: string; gender: string; }' is not assignable to type 'Person'.
//   Property 'id' is missing in type '{ name: string; gender: string; }'.
// index.ts(13,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

上例中，报错信息有两处，第一处是在对 tom 进行赋值的时候，没有给 id 赋值。
第二处是在给 tom.id 赋值的时候，由于它是只读属性，所以报错了。

数组类型

在 TypeScript 中，数组类型有多种定义方式，比较灵活。

简单使用

// 「类型 + 方括号」表示法 
let array1: number[] = [1, 1, 2, 3, 5];
// 数组泛型
let array2: Array<number> = [1, 1, 2, 3, 5];
// 用接口表示数组
interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
// 类数组
// any在数组中的应用 用 any 表示数组中允许出现任意类型
let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

「类型 + 方括号」表示法

最简单的方法是使用「类型 + 方括号」来表示数组：

let fibonacci: number[] = [1, 1, 2, 3, 5];

数组的项中不允许出现其他的类型：

let fibonacci: number[] = [1, '1', 2, 3, 5];
// Type 'string' is not assignable to type 'number'.

数组的一些方法的参数也会根据数组在定义时约定的类型进行限制：

let fibonacci: number[] = [1, 1, 2, 3, 5];
fibonacci.push('8');
// Argument of type '"8"' is not assignable to parameter of type 'number'.

上例中，push 方法只允许传入 number 类型的参数，但是却传了一个 "8" 类型的参数，所以报错了。这里 "8" 是一个字符串字面量类型，会在后续章节中详细介绍。

元组类型

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

// 元组 数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。
let Tom: [string, number] = ['Tom', 25]
Tom.push(100)       // 可以使用数组方法，但只能 push 定义的 number 或者 string 类型

enum 枚举类型


// 枚举 枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true
console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

DOM 和 BOM

let body: HTMLElement = document.body
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', (e: MouseEvent) => {
    e.preventDefault()
  // Do something
});

学习 Web 前端

数据类型

Null 和 Undefined

number 数值

boolean 布尔

string 字符串

类型推论

any 任意类型

unknown 任意类型

void 空值指定方法类型

联合类型

简单使用

访问联合类型的属性或方法

type 类型别名

对象的类型 — Interfaces 接口

简单例子

首字母大写形状一致

可选属性

任意属性

只读属性

数组类型

简单使用

「类型 + 方括号」表示法

元组类型

enum 枚举类型

DOM 和 BOM

数据类型

Null 和 Undefined

number 数值

boolean 布尔

string 字符串

类型推论

any 任意类型

unknown 任意类型

void 空值 指定方法类型

联合类型

简单使用

访问联合类型的属性或方法

type 类型别名

对象的类型 — Interfaces 接口

简单例子

首字母大写 形状一致

可选属性

任意属性

只读属性

数组类型

简单使用

「类型 + 方括号」表示法

元组类型

enum 枚举类型

DOM 和 BOM

void 空值指定方法类型

首字母大写形状一致