TypeScript 入门教程学习笔记

TypeScript 入门教程学习笔记

1. 数据类型定义

类型	实例	说明
Number	let num: number = 1;	基本类型
String	let myName: string = 'Tom';
Boolean	let isDone: boolean = false;
Array	let arr: number[] = [1, 1, 2, 3, 5];	用 any 表示数组中允许出现任意类型
Function	1. 函数声明 function sum(x: number, y: number): number {   return x + y; } 2. 函数表达式 let mySum: (x: number, y: number) => number = function (x: number, y: number): number {   return x + y; };	重载：返回值有多个类型时，可以使用重载定义多个函数类型，如： function reverse(x: number): number; function reverse(x: string): string; function reverse(x: number | string): number | string {  if (typeof x === 'number') {   return Number(x.toString().split('').reverse().join(''));  } else if (typeof x === 'string') {   return x.split('').reverse().join('');  } } TypeScript 会优先从最前面的函数定义开始匹配
Object	接口	参见下面详细内容
联合类型	let idNumber: string | number;	1. 联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型 2. 当不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型中共有的属性或方法
内置对象	1. ECMAScript 的内置对象：Boolean、Error、Date、RegExp 等。 2. DOM 和 BOM 的内置对象：Document、HTMLElement、Event、NodeList 等。	let d: Date = new Date(); let r: RegExp = /[a-z]/; function run() {  let args: IArguments = arguments; }
备注	1. undefined 和 null 是所有类型的子类型。 2. 忽略类型，使用any。

类型推论：TypeScript 会在没有明确的指定类型的时候推测出一个类型

2. 对象的类型——接口

接口使用 interface 来定义，

用于对类的一部分行为进行抽象，也常用于对「对象的形状（Shape）」进行描述。

2.1 定义简单对象

interface Person {
  readonly id: number; // 只读属性
  name: string;
  age?: number; // 可选属性
  [propName: string]: any; // 任意属性，any这个地方影响其他所有属性类型判断
}

let tom: Person = {
  id: 89757,
  name: 'Tom',
  age: 25,
  gender: 'male'
};

2.2 定义数组

interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

一般不会这么做，因为这种方式很复杂，丢弃了数组的方法。

2.3 定义函数

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

3. 断言

语法

断言有两种语法：值 as 类型或<类型>值，常用第一种。

为什么需要断言

1. 将一个联合类型断言为其中一个类型

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型中共有的属性或方法，而有时候，我们确实需要在还不确定类型的时候就访问其中一个类型特有的属性或方法

2. 将一个父类断言为更加具体的子类

当类之间有继承关系时，类型断言也是很常见的

3. 将任何一个类型断言为 any

一方面不能滥用 as any，另一方面也不要完全否定它的作用，我们需要在类型的严格性和开发的便利性之间掌握平衡

4. 将 any 断言为一个具体的类型

遇到 any 类型的变量时，最好能够将调用了它之后的返回值断言成一个精确的类型，这样就方便了后续的操作

• 要使得 A 能够被断言为 B，只需要 A 兼容 B 或 B 兼容 A 即可
• 除非迫不得已，千万别用双重断言
• 类型声明是比类型断言更加严格的，所以为了增加代码的质量，我们最好优先使用类型声明，这也比类型断言的 as 语法更加优雅。

3. 声明文件

由于ts不能识别通过 <script> 标签引入的第三方库对象，需要定义引入的第三方全局变量类型，

声明语句为：

declare var jQuery: (selector: string) => any;

通常把声明语句放到一个单独的文件（jQuery.d.ts）中，以 .d.ts 为后缀。

推荐使用 @types 统一管理第三方库的声明文件

npm install @types/jquery --save-dev

书写声明文件

1. 创建一个 types 目录，专门用来管理自己写的声明文件
2. 配置下 tsconfig.json 中的 paths 和 baseUrl 字段

tsconfig.json 内容：

{
    "compilerOptions": {
        "module": "commonjs",
        "baseUrl": "./",
        "paths": {
            "*": ["types/*"]
        }
    }
}

4. 类型别名和字符串字面量类型

类型别名和字符串字面量类型都使用 type 定义

类型别名

类型别名可以给类型起一个名字，类型可以是一个也可以是多个

type Name = string | number;

let idNumber: Name = '001';

idNumber = 100;

字符串字面量类型

字符串字面量类型用来约束取值只能是某几个字符串中的一个

type EventNames = 'click' | 'scroll' | 'mousemove';

5. 元组

let tom: [string, number] = ['Tom', 25];

6. 枚举

枚举（Enum）类型用于取值被限定在一定范围内的场景

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

编译后得到的js文件

var Days;
(function (Days) {
    Days[Days["Sun"] = 0] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

打印 Days 来看一看结构

{
    "0": "Sun",
    "1": "Mon",
    "2": "Tue",
    "3": "Wed",
    "4": "Thu",
    "5": "Fri",
    "6": "Sat",
    "Sun": 0,
    "Mon": 1,
    "Tue": 2,
    "Wed": 3,
    "Thu": 4,
    "Fri": 5,
    "Sat": 6
}

枚举项有两种类型：常数项和计算所得项，计算所得项后的项无法自动获取初始值。

用到枚举的场景

枚举用来让代码更加语义化，比如有一条数据，0 代表停用， 1 代表启用

{ status: 0 }

你并不能很好的确定status为0是什么状态，使用enums能更清楚的知道是什么状态

enum Status = {disabled: 0, enabled: 1};

const data = {status: Status.disabled};

---

参考自：TypeScript 入门教程