TypeScript 学习笔记

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript。

TypeScript 是带有类型语法的 JavaScript。

TypeScript 是一个类型化的超集，这意味着它添加了有关如何使用不同类型值的规则。

TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 是一种面向对象的编程语言。

一、 类型

1： 基础类型

TypeScript 包含的数据类型

数据类型	关键字	描述
任意类型	any	声明为 any 的变量可以赋予任意类型的值。 任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型，它常用于: 1、变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查。  2、定义存储各种类型数据的数组：let arrayList: any[] = [1, false, 'fine']
数字类型	number	双精度 64 位浮点值。它可以用来表示整数和分数。 let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制 let decLiteral: number = 6; // 十进制 let hexLiteral: number = 0xf00d; // 十六进制
字符串类型	string	一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。 let name: string = "Runoob"; let years: number = 5; let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;
布尔类型	boolean	表示逻辑值：true 和 false。 let flag: boolean = true;
数组类型	无	声明变量为数组。 // 在元素类型后面加上[] let arr: number[] = [1, 2]; // 或者使用数组泛型 let arr: Array<number> = [1, 2]; 多维数组: var arr_name:datatype  [][]  =[ [val1,val2,val3],[v1,v2,v3] ]
元组	无	元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。 let x: [string, number]; //指明元素类型 x = ['Runoob', 1]; // 赋值 ok x = [1, 'Runoob']; //赋值 error console.log(x[0]); // 输出 Runoob 元组中允许存储不同类型的元素，而数组只能存储相同类型的元素（any[] 类型的数组可以不同）。
枚举	enum	枚举类型用于定义数值集合。 enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2
void	void	用于标识方法返回值的类型，表示该方法没有返回值。 function hello(): void { alert("Hello Runoob"); }
null	null	表示对象值缺失。 在 JavaScript 中 null 表示 "什么都没有"。 null是一个只有一个值的特殊类型。表示一个空对象引用。 用 typeof 检测 null 返回是 object。
undefined	undefined	用于初始化变量为一个未定义的值。 在 JavaScript 中, undefined 是一个没有设置值的变量。 typeof 一个没有值的变量会返回 undefined。
never	never	never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

注意：Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined。

而在TypeScript中启用严格的空校验（--strictNullChecks）特性，就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型。

// 启用 --strictNullChecks
let x: number;
x = 1; // 编译正确
x = undefined;    // 编译错误
x = null;    // 编译错误

2、定义类型

类型通过以下方式引入：

• 类型别名声明 ：type A = number | string;
• 接口声明 ：interface  A { x: number[]; }）
• 类声明 ：class  A { }
• 枚举声明 : enum  A { B, C }
• 指向某个类型的 import  声明

以上每种声明形式都会创建一个新的类型名称。

创建具有推断类型的对象（在创建变量并将其分配给特定值时，TypeScript 将使用该值作为其类型。）：

const user = {
  name: "Hayes",
  id: 0,
};

您可以使用声明显式描述此对象的形状：interface 接口声明

interface User {//使用接口声明 User 类型
  name: string;
  id: number;
}

然后，可以使用类似变量声明之后的语法来声明 JavaScript 对象符合 此 new 的形状：

const u: User = {
  name: "Hayes",
  id: 0,
};

如果你提供的对象与你提供的接口不匹配，TypeScript 将警告你。

由于 JavaScript 支持类和面向对象编程，因此 TypeScript 也是如此。

您可以将接口声明与类一起使用：

interface User {
  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("Murphy", 1);

您也可以使用接口声明对参数进行定义并将值返回给函数：

function deleteUser(user: User) {//定义参数类型
  // ...
}
 
function getAdminUser(): User {//定义接口返回数据类型
  //...
}

3、泛 型

泛型为类型提供变量。
一个常见的例子是数组。没有泛型的数组可以包含任何内容。具有泛型的数组可以描述数组包含的值。

var StringArray = Array<string>;
var NumberArray = Array<number>;
var ObjectWithNameArray = Array<{ name: string }>;

您可以声明自己的使用泛型的类型：

interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}
 

const backpack: Backpack<string>;
 
// object 是一个字符串
const object = backpack.get();
 
// add参数变量接收的是一个字符串，因此不能将数字传递给add函数。
backpack.add(23);

4、object 型

Typescript 中 Object 类型不单是指普通对象类型，它泛指所有的非原始类型，也就是对象，数组还有函数。

// 注意这里的 object 类型首字母是小写的

// 函数
const fn: object = function () {}

// 普通对象
co