Typescript学习(一)

一. Typescript安装

1. 安装命令（选其一）

• npm install -g typescript
• cnpm install -g typescript
• yarn global add typescript

2. 版本查看

• tsc -v

3. TS初体验
   新建index.ts文件，并输入以下代码

console.log("hello TS");

通过种端运行该文件

tsc index.ts

运行完成后，就会得到两个文件，一个是index.ts 和 index.ts。

index.js 是经过 编译后的JS文件

4. 环境优化（配置开发工具）

TS文件每次修改都需要重新通过命令去将文件编译成JS文件，非常的繁琐效率比较低下。这里我们提供一个方法优化编码环境。监视TS文件，并自动编译输出来指定目录，方便查看。

1. 创建tsconfig.json 文件

运行命令:
tsc --init

运行该命令后会生成一个tsconfig.json文件，修改该文件中的outDir如下，将编译后的文件放入到当前目录下的js文件夹下（无需自动创建js文件夹)。

2. vscode中点击终端->运行任务->tsc监视-tscconfig.json

完成上述步骤，开启TS文件监视后。重新创建ts文件，即可自动编译。
修改该文件如下：：

编译后的文件如下：

二. Typescript中的数据类型

Typescript中为了使编写的代码更加规范，更有利于维护，增加了类型校验。

• 布尔类型（boolean）
• 数字类型（number）
• 字符串类型（string）
• 数组类型（array）
• 元组类型（tuple）
• 枚举类型（enum）
• 任意类型 （any）
• null 和 undefined
• void类型
• never类型

1. 布尔类型（boolean）true false

let flag:boolen = true;
flag = '1'  // 非法

2. 数字类型（number）

// TS中不区分浮点型和整型
let num : number = 123;
num = 12.5

3. 字符串类型（string）

let str: string = '你好 TS';

4. 数组类型（array）

• 定义数组方式一：

// 指定数组每一项的类型为number
let arr:number[] = [1,2,3,4];
arr = ['s' , '2']  // 违法

• 定义数组方式二：

// 使用泛型定义数组
let arr1:Array<number> = [1,2,3,4,5,6];
arr1 = ['11' , 'ww'];  // 非法

5. 元组类型（tuple）

// 元组是数组的一种，可以指定每一项不同的类型（长度固定）
let tup:[string , string , number] = ['a' , 'b' , 111];

6. 枚举类型（enum）

枚举类型主要用来定义标识符。现在开发中常用数字标识一种状态。例如：0表示：未支付、1表示：支付、2表示：交易成功。当过一段时间后或者换一个开发人员后往往不能快速明确每个值的含义。这时候枚举类型就起很大作用。

// 定义枚举类型
// Flag 为枚举名 、 success 为标识符
enum Flag {
    success = 1 ,
    error = -1 
}
let f: Flag = Flag.success;
let f1: Flag = Flag.error;
console.log(f , f1); // 1 , -1

// 如果没有写值，则默认是索引值
enum Color {
    blue , 
    red = 5, 
    yellow
}
let c:Color = Color.blue;
let c1:Color = Color.yellow;
console.log(c);  // 0
console.log(c1);  // 6  yello也是没有值的，它以上一个red的值为基准，加上1也就是6

8. 任意类型 （any）
   上面代码中在我们指定具体类型后，变量只能是某一个类型，如果变量被赋值了其他类型将会报错。

// 赋值任意类型都是合法的（和ES5中有点相似）
let sub:any ='123';
sub = 123;
sub = false;
sub = [1,3,4,5,6];

9. null 和 undefined
   null 和 undefined 是其他（never）类型的子类型。

// undefined
// 我们想定义一个数字类型，但是一开始没有赋值
let num1: number;
console.log(num1); // undefined  但是编辑器会飘红
// 换一种写法
let num1: number  | undefined;
console.log(num1); // undefined 不飘红
// 变量可能是：number、null、undefined
let num1: number  | undefined | null;

10. void类型

// 表示这个方法没有返回任何类型，一般用于定义方法的时候没有返回值。
function fn():void {}

function fn():number {
	return 123;
}

11. never类型
    never包含null 和 undefined ，代表从不会出现的值。意味着：声明never的变量只能被never类型所赋值。
    基本用不着。

let a:undefined;
a=undefined;

let b:null;
b=null;

let c:never;
a=123; // 错误