有人问经常问 TypeScript 到底要不要学？我的答案
要学~ 而且越早学习，你在未来将越有实力立于不败之地！
TypeScript 是前端的未来！
为什么这么说呢？ 因为 TypeScript 是微软（Microsoft）推出的一门语言,
TypeScript 是 JavaScript 的超集，包括 ES,
新增加了类型系统和完整的面向对象语法,
使用 TS 编写的项目更加健硕，且更容易扩展和维护。
TypeScript 基础
01.TypeScript 环境安装与运行
安装
第1步：安装TypeScript 之前 先要 安装 NodeJS 和 NPM
第2步：通过npm 安装 TypeScript
全局安装 typescript ：npm install -g typescript
校验 typescript： tsc -v
tsc作用：负责将ts代码 转为 浏览器 和 nodejs 识别的 js 代码
运行
第1步：在后缀名为.ts 的文件中书写 typescript 代码
第2步：使用 tsc 将typescript 代码 编译 成 js 代码
第3步：在浏览器或者 nodejs 中执行 js 代码
自动编译
运行 tsc --init，创建tscconfg.json文件
修改 tscconfig.json 文件，设置js文件夹："outDir": "./js/"
设置 vscode 监视任务，之后修改 项目中的ts，自动生成js；
02.TypeScript 变量与数据类型
变量
JavaScript
let 变量名 = 值;
例: let aouAge = 18;
TypeScript
let 变量名：变量类型 = 值;
例：let zouAge:number = 18
在 TS 中，为变量指定了类型，就只能给这个变量设置相同类型的值
let dName = string = 'Ruikey'
dName = 520; // 报错：Type'520' is not assignable to type 'string'
数据类型
原有类型
string number boolean Array null nudefined Symbol Object
// 字符串
let aName:string = '貂蝉';
// 数值
let dAge:number = 18;
dAge = 18.33;
dAge = -17;
// 布尔值
let isSingleDog = true;
isSingleDog = false;
// undefined 和 null
let undefined = undefined;
let null = null;
// 数组 有两种语法定义方式
let arrHeros: string[] = ['安吉拉', '亚索', '大乔'];
let arrHeros: Array<string> = ['安吉拉', '亚索', '大乔'];
// 注意：在ts中数组只能存指定数据类型元素，否则将报错
// 例如：
let arrHeros: string[] = ['安吉拉', '亚索', '大乔', 520]; // 报错 error:Type 'number' is not assignable to type 'string'
// 证明：在ts中确实不能报错不符合类型的元素
新增类型
tuple元组 enum枚举 any任意类型 never void
// 元组(tuple)：就是一个已知元素数量 和 每个元素类型的数组，内部的元素类型不必相同
let tup1:[string, number, boolean] = ['讨厌，死鬼~~', 18, true];
tup1 = ['死鬼', 19. false];
// 注意：元组的数量必须已知，否则将报错
// 例如：
tup1 = ['死鬼', 19. false, 520]; // 报错
tup1 = ['死鬼', 19. 'false']; // 报错
// 访问 元组中元素 和 长度
console.log(tup1[0]);
console.log(tup1.length);
// 特点：
// 声明时，要指定元素个数
// 声明时，要为每个元素规定 类型
// 枚举(enum)：用一组标识 来 代表 数组，方便程序员调用理解
enum Gender = {
Boy = 1,
Girl = 2,
Unknown = 3
}
console.log(Gender.Boy); // 1
console.log(Gender.Girl); // 2
console.log(Gender.Unknown); // 3
// 使用默认枚举值，自动添加数字从0 开始
enum Gender2 = {
Boy,
Girl,
Unknown
}
console.log(Gender2.Boy); // 0
console.log(Gender2.Girl); // 1
console.log(Gender2.Unknown); // 2
// 使用
let usrSex: Gender = Gender.Boy;
console.log(usrSex); // 1
if (usrSex == Gender.Boy) {
console.log('相等~~')
} else {
console.log(usrSex);
}
// any 代表任意类型，一般在获取 dom 时使用
let textName: any = document.getElementById('tetN');
// void 代码没有类型，一般用在无返回值的函数
function sayHi1(): string {
return 'hi1，你好~';
}
function sayHi2(): void {
console.log('hi啥，讨厌，死鬼~~~')；
}
// never 代表不存在的值得类型，常用作为跑出异常或无限循环 函数返回类型
function test(): never {
while(true) {
}
}
function test2(): never {
throw new Error('讨厌，死鬼~')
}
// 补充：never类型是ts中的底层类型，所有类型都是never类型的父类，所以 never类型值 可以付给 任意类型的 变量
let x: never = test();
let y: string = test();
类型推断
// 类型推断
// 概念：如果变量的声明和初始化是在同一行，可以省略掉变量类型的声明
let 变量名 = 值;
// 等同于：
let 变量名: 变量类型 = 值;
// 校验
let age = 18; // 此时变量 age 的类型被推断为 number
age = 'jack'; // 报错，因为变量 age 的类型是 number
联合类型
// 联合类型
// 概念：表示取值可以为多种类型中的一种
let 变量名: 变量类型1 | 变量类型2 = 值;
// 使用
prompt(); // 确认-> 用户输入的字符串 // 取消 -> null
let dName: string | null = prompt('请输入小狗狗名字:');
console.log('hello' + dName);
03.TypeScript 函数
函数返回值和参数
函数返回值 类型
// 特点：
// 在js中 函数返回值可以是任意类型
// 在ts中 函数中必须为函数指定函数返回值类型
// 如果函数没有返回值，则定义为 void
function 函数名(): 返回值类型 {
}
// 用变量接收函数返回值，变量的类型必须和函数的返回值类型一样
let 变量名: 变量类型 = 函数名();
// 例：
function sayHi(): string {
return 'hi~~ old driver~~'
}
let res1: string = sayHi();
console.log(res1);
函数形参 类型
// 特点:
// 实参 和 形参 的类型要一致
// 实参 和 形参 的数量要一致
function 函数名(形参1: 类型, 形参2: 类型): 返回值类型 {
}
let 变量名: 变量类型 = 函数名(实参1, 实参2);
// 例：
function jumpSan(cityName: string): void {
console.log('兄弟，跳哪里？');
console.log(`当然去你心里~~算了，跳去这【${cityName}】`);
}
jumpSan('P城');
// jumpSan(520); // 报错，实参和形参类型不一致
// jumpSan('P城'，'G港'); // 报错，实参太多
// jumpSan(); // 报错，实参太少
默认值
可选参数
// 特点：
// 就是在形参后面加上一个？号，可选参数的实参可传，也可不传
function 函数名(形参1?: 类型, 形参2?: 类型): 返回值类型 {
}
// 调用
// 可以不传递实参 函数名();
// 可以传递实参 函数名(实参值1, 实参值2);
// 例：
function buyGun(gunName: string, count?: number): void {
console.log(`有眼光~【${gunName}】是村里最亮的枪，送你【${count ? count : 1}】把，咱们P城来相见~~`);
}
buyGun('M416', 3); // 正常调用
buyGun('M416'); // 可选参数调用
默认值
// 特点：
// 不需要？号，因为带默认值的参数 本身也是可选参数
function 函数名(形参1: 类型 = 默认值1, 形参2: 类型 = 默认值2): 返回值类型 {
}
// 调用
// 不传递实参 函数名(); -->> 函数名(默认值1, 默认值2);
// 传1个实参 函数名(实参1); -->> 函数名(实参1, 默认值);
// 传2个实参 函数名(实参1, 实参2) -->> 函数名(实参1, 实参2);
// 只传第2个 实参 函数名(undefined, 实参2)；-->> 函数名(默认值1, 实参2);
// 例：
function buyGun(gunName: string = `M416`, count: number = 1): void {
console.log(`有眼光~【${gunName}】是村里最亮的枪，送你【${count}】把，咱们P城来相见~~`);
}
buyGun(); // 两个都使用默认值
buyGun('Ak47'); // 前面传，后面不传
buyGun('M24', 10); // 两个都使用实参
buyGun(undefined, 10) // 前面不传后面传
剩余参数
// 特点：
// 剩余参数 只能 定义有一个
// 剩余参数 只能 定义为数组
// 剩余参数 只能 定义在 形参列表 最后
function add(形参1: 类型, 形参2: 类型, ...形参3:类型[]): void {
console.log(a + b);
}
// 调用
// 传递2个参数 add(1,2);
// 传递3个参数 add(1,2,4);
// 传递2+个参数 add(1,2,3,4,5,6,7);
// 例：
function add(x: number, y: number, ...restOfNum: number[]): void {
// 创建一个 求和 变量，保存 求和结果，将 x 和 y 的值 求和 后 存入
let resNum: number = x + y;
// 使用 for of 语法 遍历 剩余参数 数组中 每个元素，并 累加到 求和变量中
for (let ele of restOfNum) {
resNum += ele;
}
// 将结果 打印出来
console.log('打印结果：' + resNum);
}
add(1,2); // 3
add(1,2,3,4,5,6,7); // 28
04.TypeScript 类
原来：创建对象（构造函数+new）
// 创建
function City(cName, cLevel) {
this.cname = cName;
this.clevel = cLevel;
}
City.prototype.about = function() {
console.log(`兄嘚，你跳【${this.cname}】~此地危险系数为：【${this.clevel}】`);
}
// 调用
let c1 = new City('P城', 1);
consloe.log(c1.cname); // 访问变量
c1.about(); // 调用方法
let c2 = new City('G港', 5);
consloe.log(c2.cname); // 访问变量
c2.about(); // 调用方法
创建对象（类class - TS）
// 类 class~~~
class City {
// 变量
name: string;
clevel: number;
// 构造函数
constructor(cName: string, cLevel: number) {
this.cname = cname;
this.clevel = cLevel;
}
// 方法
about() {
console.log(`兄嘚，你跳【${this.cname}】，此地危险系数为：【${this.clevel}】`);
}
}
// 调用
let c1 = new City('P城', 1);
consloe.log(c1.cname); // 访问变量
c1.about(); // 调用方法