TypeScript基础-TS环境和数据类型

转载自个人网站https://jinxiaoliang.cn/ts/197.html

Typescript是Javascipt的超集，包含ES567，新增了类型系统和完整的面向对象。使用ts编写的项目更加健硕，并且更容易扩展和维护

1.TS环境安装

TS新增的那一部分语法，不管是浏览器还是nodejs都是无法识别并执行的，
因此需要一个工具将ts转换为浏览器或者nodejs识别的js代码。

1.1 安装node或者nvm
点击查看安装教程

1.2 安装TypeScript
在命令行工具输入如下命令，完成全局安装typescript

npm install -g typescript

输入如下命令查看typescript是否安装完成

tsc -v

若出现版本号，则说明安装成功

1.3 第一个ts程序-hello.ts
1.3.1 新建一个.ts为后缀的文件，并编写ts代码

function sayHi(name: string):void {
    console.log('Hi' + name)
}

let Myname:string = "jinxiaoliang";

sayHi(Myname)

1.3.2 然后在终端执行tsc hello.ts
1.3.3 相应目录下就会生成hello.js文件，这时我们就可以在浏览器中和nodejs环境中执行，如下图所示:

1.4 ts-node工具
作用：ts-node工具能够自动将ts代码转换成js代码，并在nodejs执行
安装：npm install -g ts-node
使用：ts-node ts文件名
例如我们在nodejs中执行hello.ts文件，我们在终端中执行如下命令

ts-node hello.ts

如下图所示

2. TypeScript数据类型|变量

2.1 TypeScript变量
在js中变量可以存储任意类型的变量
然而在ts中声明变量时，必须要指定变量的类型
语法如下：
let 变量名：变量类型
指定了变量的类型，存储数据时也要存储相应类型的数据
例如：

let age:number;
age = 21; //正确
age = 'jack'; //报错

2.2 TypeScript数据类型
ts兼容js的所有数据类型
在ts中null和undefined也是一种数据类型
undefined类型的变量，只能存储undefined值,代表变量未被初始化
null类型的变量，只能存储null值，代表变量不指向任何对象（指向一个空对象）

let a:undefined = 10; //报错

let b:null = 12; //报错

因为undefined和null是其他类型的子类，因此这两个变量的值可以赋值给其他类型的值。

let c:undefined = undefined;
let d:number = c;// undefined 

2.3 联合类型
let 变量名:变量类型1 | 变量类型2 | …
变量的取值，可以是两种类型中的任意一种

let result: string | number;
result = 12;
result = '1221';

2.4 any类型
any类型，表示可以存储任意类型的数据

let result:any;
result = 12;
result = '1221';
result = true;
//...

2.5 数组
语法一：let 数组名:类型[] = [值1, 值2]
语法二：let 数组名:Array<类型> = [值1, 值2]

//语法一
let arr:string[] = ['1', '2', '3'];

//语法二
let arr:Array<string> = ['1', '2', '3'];

2.6 元组
就是一个规定了元素数量和每个元素类型的“数组”，而每个元素的类型，可以不相同
语法：let 原则名:[类型1, 类型2] = [值1, 值2];

let tup:[string, number, boolean] = ['1221', 12, true];