typeScript基础学习
关于 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