加入QQ群：864680898，一起学习进步！点击群名可查看本人网站，有最新文章！

（一）Typescript 的使用

TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法。几乎包括es6的语法，就算有的es6的特性在typescript中报错，但是转成javascript时能正常执行。

搭建typescript学习的环境

执行下面步骤，或者git clone https://github.com/mySkey/ts-demo.git

1、安装typescript

npm install -g typescript

npm update -g typescript 更新版本
tsc --version 查看version
tsc --help 查看help

2、创建tsconfig.json，cd到项目目录

tsc --init
npm init -y

3、安装热更新插件live-server，可以自动刷新浏览器

npm install -g live-server
npm install -g concurrently  // 同时开启tsc加载ts文件后编译成js 和 启动的live-server服务（不必每次去刷新浏览器）

4、编辑package.json的scripts，然后执行 npm run dev 就能自动打开浏览器，并且每次改了文件保存自动刷新

"scripts": {
  "tsc": "tsc -w",
  "server": "live-server",
  "dev": "concurrently \"npm run tsc\"  \"npm run server\""
}

数据类型及变量的定义

布尔值

let boo: boolean = false;

数字

// 十进制
let num: number = 1;
// 十六进制
let hexLiteral: number = 0xf00d;
// 八进制
let binaryLiteral: number = 0b1010;
// 二进制
let octalLiteral: number = 0o744;

字符串

而且也能使用字符串模板

let str: string = 'hello world!';

数组

typescript中的数组被定义了类型后，只能存放该类型的数据，存多种的话要使用元组，有两种方式可以定义数组。第一种，可以在元素类型后面接上[]

let arr: number[] = [1,2,3];

第二种方式是使用数组泛型，Array<元素类型>

let arr1: Array<string> = ['1','2'];

元组 Tuple

Tuple元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

let tup: [string, number];
tup = ['hello world!', 1];  // Ok
tup = [1, 'hello world!'];  // Error

当访问一个已知索引的元素，会得到正确的类型

console.log(typeof tup[0]);
console.log(typeof tup[1]);

当访问一个越界的元素，会使用联合类型替代，但是出现其他没有定义的类型一样错误

tup[2] = 'mySkey';  // Ok
tup[3] = 32;        // Ok

tup[4] = true; // Error

enum枚举

1、enum枚举类型是对JavaScript标准数据类型的一个补充，使用场景的话：一个订单的状态 0 未支付 1 已支付 2 待收货 3 确认收货

enum Status {notPay, pay, wait, confrim};
let c: Status = Status.wait;
console.log(c);   // 2

2、也能更改编号

enum Status {notPay = 1, pay, wait, confrim};
let c: Status = Status.wait;
console.log(c);   // 3

3、还能手动赋值

enum Status {notPay = 1, pay = 5, wait = 6, confrim = 8};
let c: Status = Status.wait;
console.log(c);   // 6

4、可以通过枚举的值来获取名字

enum Status {notPay, pay, wait, confrim};
let c: string = Status[2];
console.log(c);   // wait

any任意值

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型，以下几种常见情况

1、一个变量会更改数据类型的时候

let n: any = 4;
n = "maybe a string instead";
n = false; // okay, definitely a boolean

2、有一个数组，它包含了不同的类型的数据

let list: any[] = ['hello world', 1, true];

void

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是void

let voinFn = ()=>console.log('good night!')

null和undefined

let und: undefined = undefined;
let nul: null = null;

类型断言

通过类型断言这种方式可以告诉编译器该数据的类型，相当于转换类型。使用方法有两种方式

1、<> 符号形式

let myName: any = 'mySkey';
let nameLength: number = (<string>name).length;
console.log(nameLength)

2、as语法形式

let myName: any = 'mySkey';
let nameLength:number = (name as string).length;
console.log(nameLength)

（一）Typescript 的环境搭建与数据类型