TypeScript概念
是 JavaScript 的一个超集,它可以编译成纯JavaScript,也可以在任何浏览器操作系统运行。简单来说就是JS的一个升级版本,给JS加了限制规范(接口等),也扩展了JS(类等)的能力
对比JavaScript语言(弱类型:任何对象所从属的类型再执行的时候才会确定类型、动态语言:一个变量可以赋不同数据类型的值),TS为强类型(任何对象所从属的类型都必须能在编译时刻确定)、静态语言:一旦一个变量被指定了某个数据类型,如果不经过强制转换,那么它就永远是这种数据类型,不允许隐式的类型转换)
安装使用
安装编译器,安装后通过tsx 文件名,可以将ts文件转译为js文件
npm install -g typescript
安转运行环境,安装后可以直接通过ts-node 文件名直接运行ts文件。
npm install -g ts-node
项目使用
项目引入
yarn add typescript
引入后可以通过下面命令将ts文件转译为js文件
tsc 文件名(ts文件)
创建tsconfig配置文件
通过下面命令会自动创建一个tsconfig.json的ts配置文件
tsc --init
配置ts报错为中文
tsc --locale zh-CN
注意引入模块后,有些模块的申明文件需要单独引入
yarn add @types/模块名 -D
基础类型
注意和JS不同,JS区分基础类型和复杂数据类型,TS不区分,即基础类型就是数据类型,它包括JS中的6中数据类型(undefined、null、boolean、number、string、object),不包含symbol。除此之外还包含函数、数组、元祖、枚举、任意值(any)、空值(void)、Never。我们通过在变量后面加冒号跟数据类型来定义变量的类型。编译器在编译阶段时会根据定义的类型进行检查,类型不符合将报错。
布尔值、数字、字符串、对象、函数
let isDone: boolean = false; //布尔值
let money: number = 100; //数字
let str: string = 'hello world' //字符串
let obj: object = {name:'yf'} //对象
let fun: Function = (x: number, y: number) =>{console.log(x+y)}
数组
正常形式
let list: number[] = [1, 2, 3];
数组泛型
泛型是在编译期间不确定方法使用的类型(广泛之意思),在方法调用时,指定泛型具体指向类型。
let list: Array<number> = [1, 2, 3];
元祖
元组类型允许表示一个已知元素数量和类型的数组(即允许数组中有不同的变量类型)
let x: [string, number] = ['hello', 10];
注意当访问一个越界的元素,会使用联合类型替代,即我们可以给x[2]赋值string或者number类型的值。
x[2] = 'world'; //OK
x[3] = 2; //OK
x[4] = true //这里会报错,string和number的联合类型不能是boolean。
枚举(enum)
理解为定义一个变量,变量有所有的取值,通过不同的属性找到取值。枚举值默认从0开始,依次加1。也可以通过自己设定。
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
alert(colorName); // 显示'Green'因为上面代码里它的值是2.
注意不同枚举变量是不可以比较的。
enum Color1 { red, blue }
enum Color2 { red, blue }
Color1.red === 0 // true
Color1.red === Color2.red //error 无法进行比较
从枚举值到枚举名可以反向映射。
enum Enum {
A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"
编译成
var Enum;
(function (Enum) {
Enum[Enum["A"] = 0] = "A";
})(Enum || (Enum = {}));
var a = Enum.A;
var nameOfA = Enum[a]; // "A"
常数枚举
一个枚举类型可以包含零个或多个枚举成员。 枚举成员具有一个数字值,它可以是常数或是计算得出的值 当满足如下条件时,枚举成员被当作是常数:
- 不具有初始化函数并且之前的枚举成员是常数。 在这种情况下,当前枚举成员的值为上一个枚举成员的值加1。 但第一个枚举元素是个例外。 如果它没有初始化方法,那么它的初始值为
0
。 - 枚举成员使用常数枚举表达式初始化。 常数枚举表达式是TypeScript表达式的子集,它可以在编译阶段求值。 当一个表达式满足下面条件之一时,它就是一个常数枚举表达式:
- 数字字面量
- 引用之前定义的常数枚举成员(可以是在不同的枚举类型中定义的) 如果这个成员是在同一个枚举类型中定义的,可以使用非限定名来引用。
- 带括号的常数枚举表达式