TypeScript 学习笔记

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

以下仅为部分 TypeScript 的特性。以后会适当进行补充。

TypeScript Handbook（中文版）

变量类型约束

  • 在给一个变量加了类型约束后，该变量之后就只能被赋值为该类型的值。

js 基本类型

// Boolean
let isHide: boolean = true;

// Number
let count: number = 20;

// String
let str: string = "hello ts~";

// Undefined
let u: undefined = undefined;

// Null
let n: null = null;

任意类型

  • 任意类型表示该变量可以被赋值为任意类型的值
// any 标记任意类型
let anyValue: any = "any thing";

函数类型

  • 在 TypeScirpt 中，可以用 void 标记没有任何返回值的函数
function setName(value): void {
  this.name = value;
}
  • 输入多余的（或者少于要求的）参数，是不被允许的
function sum(x: number, y: number): number {
  return x + y;
}

sum(1, 2, 3); // 报错
  • ?: 标记可选参数
    • 可选参数必须接在必需参数后面
function sum(x: number, y?: number): number {
  return x + y;
}
  • 可以给函数的参数添加默认值，TypeScript 会将添加了默认值的参数识别为可选参数
function sum(x: number, y: number = 5): number {
  return x + y;
}

sum(1); // 6
sum(1, 2); // 3
  • 剩余参数
function pushArr(array: any[], ...items: number[]) {
  items.forEach(function(item) {
    array.push(item);
  });
}

let a = [];
pushArr(a, 1, 2, 3);

对象类型

  • TypeScript 通过定义接口来约束对象类型，它可以约束对象属性的数量、名称、类型、特性（是否只读）。
// 定义接口
interface Person {
    name: string;           // 必选属性
    readonly id: number;    // 必选只读属性
    age: number;            // 必选属性
    github?: string;        // 可选属性
}

let percy: Person = {
    name: 'William',
    id: 334455, // 只读
    age: 22
};
  • 为对象添加任意属性
    • 任意属性允许你为对象添加任意数量的属性，但是属性和属性值的类型还是要受到类型的约束
    • 一旦定义了任意属性，那么确定属性和可选属性都必须是它的子属性（即属性值的类型必须符合任意属性的规定）
// 定义支持任意属性的接口
interface Person {
  name: string; // 必选属性
  [propName: string]: any; // 任意属性
}

数组类型

  • 「类型 + 方括号」表示法
let numArr: number[] = [1, 2, 3, 4];

numArr.push("a"); // 报错
// 为数组使用联合类型
let numArr: (number | string)[] = [1, 2, 3, 4];

numArr.push("a");
  • 数组泛型表示法
let numArr: Array<number> = [1, 2, 3, 4];
  • 接口表示法
interface NumberArray {
  [index: number]: number;
}

let numArr: NumberArray = [1, 2, 3, 4];

类数组类型

事实上常见的类数组都有自己的接口定义，如 IArguments, NodeList, HTMLCollection 等。

其它类型相关的特性

类型推论（Type Inference）

  • 在没有明确指定变量类型的时候，TypeScript 会自动推断出变量类型
let num = 9;
// 等价于 let num: number = 9;

联合类型（Union Types）

  • 联合类型表示变量的值可以为多种类型中的一种。
let numStr: number | string;
numStr = 7;
numStr = "seven";
  • 如果一个值的类型是联合类型，那么我们只能访问此联合类型的所有类型里共有的属性或方法。
let numStr: number | string = "sss";

numStr.length; // 报错，因为 number 类型没有 length 属性

使用内置对象标记变量类型

  • 部分 js 内置对象
// RegExp
let reg: RegExp = /\d{4}/g;

// Date
let date: Date = new Date();

// Error
let err: Error = new Error("something wrong");
  • 部分 DOM 和 BOM 的内置对象
// HTMLElement
let firstDiv: HTMLElement = document.querySelector("div");

// NodeList
let allDiv: NodeList = document.querySelectorAll("div");

类型别名

类型别名用来给一个类型起个新名字（使用关键字 type），通常用于缩写联合类型。

let a: number | string;

// 等价于
type numberString = number | string;
let b: numberString;

字符串变量的取值约束

  • 字符串字面量类型可以用来约束变量的取值只能是某几个字符串中的一个。
type messageType = "text" | "image" | "voice";

let msg: messageType;

msg = "text";
msg = "xxx"; // 报错

利用元组限制数组元素的类型

  • 利用元组可以精确定位数组指定索引元素的类型

  • 越界的数组元素的类型必须是元组中的类型中的一个

let arr: [number, string];

arr = [3, "aaa"];
arr = [3, 3]; // 报错
arr = [3]; // 报错
arr = [3, "bb", "3"];
arr = [3, "s", true]; // 报错

arr[0] = 3444;
arr[0] = "sss"; // 报错

参考资料