TypeScript介绍
TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。
它的第一个版本发布于 2012 年 10 月，经历了多次更新后，现在已成为前端社区中不可忽视的力量，不仅在 Microsoft 内部得到广泛运用，而且 Google 的 Angular2 也使用了 TypeScript 作为开发语言。vue3和react也完全支持typescrpt
英文网站: www.typescriptlang.org/
中文网站（推荐）：ts.xcatliu.com/
为什么选择 TypeScript
- 类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了
- 可以在编译阶段就发现大部分错误，这总比在运行时候出错好
- 增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等
运行环境
安装 TypeScript
TypeScript 的命令行工具安装方法如下：
npm install -g typescript
编译 TypeScript 文件：
//tsc编译 hello.ts文件为 hello.js文件
tsc hello.ts
在线环境
在线编写网站：
www.tslang.cn/play/index.… www.typescriptlang.org/play/index.…
ts-node 直接运行ts文件
npm i ts-node -g
ts-node hello.ts
报错: 找不到console.log, 安装
npm install -D tslib @types/node
基础语法
原始数据类型
原始数据类型包括： 布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt。
ts中使用原始类型定义变量 let 变量名:数据类型
let num： number = 100
let message: string = 'helloword'
let isOk: boolean = true
let un: undefined
let nul: null
注：undefined 和 null 是所有类型的子类型。即 undefined 类型的变量，可以赋值给 number 类型的变量
let num: bumber = undefined;
let u: undefined;
let num: number = u
空值void： 在 TypeScript 中，可以用 void 表示没有任何返回值的函数。
任意值
任意值 Any 用来表示允许赋值为任意类型
let b: any
b = 'hello'
b = 100
变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：
let b // let b:any
b = 'hello'
b = 100
类型推论
TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。
let c = 'hello'//let c:string = 'hello'
//c = 100
联合类型
联合类型（Union Types）表示取值可以为多种类型中的一种
let age: number | string = 23
age = '18'
//age = true 只能是age定义的属性
数组类型
使用 类型 + [] 表示数组
let arr:number[] = [1, 2, 3]
//let arr:number[] = [1, 2, '3'] 数组中的元素只能是number类型
函数类型
function sum(x:number, y:number):number {//最后一个number为函数返回值类型
retrun x + y
}
sum(10, 20)
//sum(10, '20') 只能是sum定义的属性
//sum(10, 20, 30) 不能输入多余项
空值void： 在 TypeScript 中，可以用 void 表示没有任何返回值的函数
function sum1(x:number, y:number):void {//void表示函数没有返回值
console.log('>>>')
}
函数可选参数
function fun(x?:number):number {
return x
}
fun(100)
fun()
函数参数-可变数组
function maxThree(num:string[]):number {
return 1
}
maxThree(['1', '2'])
对象类型
在 TypeScript 中，我们使用接口 interfaces 来定义对象的类型。
//接口 interface + 接口名 指定属性和属性的类型
//作用：定义对象类型
//声明接口
interface: person {
name: string,
age: number
}
let obj:person = {
name: 'jack',
age: 20,
}
obj = {
name: 'rose',
age: 18,
//score: 98 只能是person定义的属性
}
声明文件
当使用第三方库时，需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。
declare var $: (selector: string) => any;
进阶
枚举
枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。
const green = 0
const red = 1
const yellow = 2
//枚举类型 Light
enum Light {
GREEN = '绿灯'//0
RED = '红灯'//1
YELLOW = '黄灯'//2
}
console.log(Light.RED)
泛型
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
function sum<T, E>(x: T, y: E) {
return x
}
sum<number, string>(10, '20') //T = number
泛型约束在函数内部使用泛型变量时，由于事先不知道变量类型，所以不能随意的操作他的属性或方法，这时可以对泛型进行约束，只允许这个函数传入包含length属性的变量
//T 约束是具有length属性类型
interface Ilength {
length: number
}
function fun1<T extends Ilength>(num: T):void {
console.log(num.length)
}
fun1<number[]>([1, 2, 3])
泛型类
//表示坐标
class Point<T> {
x: T;
y: T;
constructor(x: T, y: T) {
this.x = x,
this.y = y
}
}
new Point<number>(123.98, 23.45)
new Point<string>('东经108.56', '北纬56.45')
TypeScript 中类的用法
public private和protected
TypeScript可以使用三种访问修饰符(Access Modifiers)，分别是public、 private 和 protected
- public修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是public的
- private修饰的属性或方法是私有的，不能在声明它的类的外部访问
- protected 修饰的属性或方法是受保护的，它和private 类似，区别是它在子类中也是允许被访问的
//类与修饰符
class Student {
public name: string
private age: number
public score: number
constructor(name: string, age: number, score: number) {
this.name = name
this.age = age
this.score = score
}
public say() {
console.log(this.name + '说话')
}
}
let stu1 = new Student('jack', 18, 98)
stu1.say()
stu1.name = 'rose'
元组
数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象
//定义一对值分别为 string 和 number 的元组
let tom: [string, number] = ['Tom', 25];
