typeScript基础学习

Posted 2021-03-15 brightlian

关于 TypeScript

TypeScript 是 javascript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。

---

 

什么是 TypeScript

TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。

---

 

安装 TypeScript

TypeScript 的命令行工具安装方法如下：npm install -g typescript

编译一个 TypeScript 文件：tsc hello.ts

---

 

基础类型——值类型

1、布尔值

声明方式：boolean

如：let isDone: boolean = true;

2、数值

声明方式：number

如：let num1: number = 6;

注意：其他进制、NaN、Infinity和JS的方式相同

3、字符串

声明方式：string

如let name: string = ‘lml‘;

4、空值void

声明方式：void

let without: void = undefined;

不返回任何值，一般用在函数上

声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null

5、null

声明方式：null

let unknowObj: null = null;

只能赋值为null或undefiend，是任何类型的子类型

6、undefined

声明方式：undefined

let unkonw: undefiend = undefined;

只能赋值为null或undefiend，是任何类型的子类型

 

---

基础类型——任意值

1、any

声明方式：any

如：let anyone: any = 18; anyone = ‘lml‘;

不做类型检查，可以是任何类型

在任意值上访问任何属性都是允许，也允许调用任何方法

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

2、 未声明类型的变量

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

---

类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论的规则推断出一个类型（根据第一次赋值时的类型）

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查

---

联合类型

联合类型表示取值可以为多种类型中的一种

联合类型使用 | 分隔每个类型

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

---

对象类型——接口

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

接口是对行为的抽象，而具体如何行动需要由类去实现。

TypeScript中的接口是一个非常灵活的概念，可用于对类的一部分行为进行抽象，也常用于对对象的形状进行描述。

接口定义时一般首字母大写。

定义的变量比接口少了一些属性是不允许的，多一些属性也是不允许的。赋值的时候，变量的形状必须和接口的形状保持一致

有时我们希望不要完全匹配一个形状，那么可以用可选属性，可选属性的含义是该属性可以不存在。

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

---

对象类型——数组

声明1：使用「类型 + 方括号」来表示数组，数组的项中不允许出现其他的类型。

声明2：使用数组泛型Array<elemType> 来表示数组

声明3：接口也可以用来描述数组

声明4：使用类表示数组

any 在数组中的应用，表示数组中允许出现任意类型

---

对象类型——函数

一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到

输入多余的（或者少于要求的）参数，是不被允许的

用接口定义函数的形状，我们也可以使用接口的方式来定义一个函数需要符合的形状

输入多余的（或者少于要求的）参数，是不允许的，与接口中的可选属性类似，我们用?表示可选的参数。

可选参数必须接在必需参数后面。换句话说，可选参数后面不允许再出现必需参数了

我们允许给函数的参数添加默认值，TypeScript 会将添加了默认值的参数识别为可选参数

 

---

类型断言

第一种方式：<类型>值如(<string>someValue)。

第二种方式：值 as 类型如(someValue as string)。

---

 

声明文件

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。

新语法索引

　　declare var 声明全局变量

　　declare function 声明全局方法

　　declare class 声明全局类

　　declare enum 声明全局枚举类型

　　declare namespace 声明（含有子属性的）全局对象

　　interface 和 type 声明全局类型

　　export 导出变量

　　export namespace 导出（含有子属性的）对象

　　export default ES6 默认导出

　　export = commonjs 导出模块　　

　　export as namespace UMD 库声明全局变量

　　declare global 扩展全局变量

　　declare module 扩展模块

　　/// <reference /> 三斜线指令

通常我们会把声明语句放到一个单独的文件（jQuery.d.ts）中，这就是声明文件，声明文件必需以 .d.ts 为后缀。

第三方声明文件：Query 的声明文件不需要我们定义了，社区已经帮我们定义好了。npm install @types/jquery --save-dev

---

 

 

内置对象

ECMAScript 的内置对象，如let e: Error = new Error(‘Error occurred‘);

DOM 和 BOM 的内置对象，如let allDiv: NodeList = document.querySelectorAll(‘div‘);

TypeScript 核心库的定义文件

用TypeScript写Node，Node不是内置对象，需要引入第三方声明文件：npm install @types/node --save-dev

---

 

 

 

类型别名

类型别名用来给一个类型起个新名字，我们使用 type 创建类型别名。

类型别名常用于联合类型。

---

 

 

字符串字面量类型

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

类型别名与字符串字面量类型都是使用 type 进行定义。

---

 

 

其他类型——元祖

数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。

例如：let tom: [string, number] = [‘Tom‘, 25];

---

 

 

其他类型——枚举

用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。

枚举使用 enum 关键字来定义：enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

---

 

其他类型——类

类(Class)：定义了一件事物的抽象特点，包含它的属性和方法

TypeScript 中的类

　　public：修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是public的。

　　private：修饰的属性或方法是私有的，不能在声明它的类的外部访问。

　　protected：修饰的属性或方法是受保护的，它和private类似，区别是它在子类中也是允许被访问的。

　　readonly：只读属性关键字，只允许出现在属性声明或索引签名中。

　　抽象类：abstract 用于定义抽象类和其中的抽象方法。

　　类的类型：给类加上TypeScript的类型很简单，与接口类似。

 

 

 

---

类与接口

类实现接口：实现（implements）是面向对象中的一个重要概念。一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。

接口继承接口：接口与接口之间可以是继承关系，我们使用extends使一个接口继承另一个接口。

接口继承类：接口也可以继承类，同样使用extend。

混合类型：可以使用接口的方式来定义一个函数需要符合的形状。有时候，一个函数还可以有自己的属性和方法

 

---

 

 

其他类型——泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

 

---

 

 

ts代码检查工具

编译配置文件 tsconfig.json