TypeScripts
TypeScripts简介
TypeScripts 简称 TS ，是 JavaScrijpt 的超集，简单理解为， Js 有的 ts 都有， Js 的代码在 TS 的环境下都可以运行。在 Js 的基础之上，为 Js 添加了类型支持。TypeScript = Type + JavaScript
Js 添加类型支持原因
（1） Js 的类型系统是弱类型，没有类型的概念，就是没有原则底线。没有类型校验，导致在项目开发的时候，经常遇到类型错误的问题，影响开发效率；
（2） Js 属于动态类型的编程语言，边解析边执行，所以错误在运行阶段才能被发现；
（3） TS 属于静态类型的编程语言，它会在编译期间进行类型检查，从而提前发现错误；
如何使用 TS
全局安装编译 TS 的工具包，命令npm i -g typescript
ts-node 简化运行 TS 的步骤
每次在 TS 文件中的代码通过 tsc 生成一个 Js 的文件，然后又执行 Js 的文件，运行复杂需要简化，命令npm i - g ts-node，使用 ts-node 包，直接在 Node.js 中运行 TS 代码，它提供了 ts-node 命令可简化执行命令。
TS 类型注解
TypeScript 是 Js 的超集， Ts 提供了 Js 的所有功能，并且额外增加了类型系统。TS 中定义变量(常量)可以指定类型，A类型的变量不能保存B类型的数据。
格式：let 变量名: 类型 = 初始值
eg：let num:number = 1
说明：代码中的 :number就是类型注解，为变量添加类型约束。约定变量的类型为 number ，就只能给变量赋值该类型的值，否则会报错
类型推论
TS 中某些没有明确指定类型的情况下， TS 的类型推论机制会自动提供类型
let num = 1 // num类型自动推断为:number
// 函数返回值的类型被自动推断为:number
function add(a:number,b:number){
return a + b
}
TS 类型
- JS 已有类型
原始类型：numbr、string、Boolean、null、undefined、symbol
对象类型：object（数组、对象、函数等）
- TS 新增类型
联合类型、自定义类型、接口、元组、字面量类型、枚举、void、any
原始类型
原始类型（简单数据类型）：number、string、boolean、null、undefined、symbol
{
let num: number = 1 // 数值类型
let str: string = 'abc' // 字符串类型
let isOk: boolean = true // 布尔类型
let un: undefined = undefined // undefined
let nu: null = null // null
}
联合类型
格式：let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
| 在TS中叫做联合类型，即由两个或多个其他类型组成的类型，可以是这些类型中的任意一种
数组类型
格式：let 变量: 类型[] = [值1,....]
let 变量: Array<类型> = [值1,....]
拓展：定义一个数组，它的元素可以是字符串类型，也可以是数值类型
类型别名
格式：type 别名 = 类型
用于给类型起别名、定义新类型
函数-单个定义
函数类型实际上指的是
函数参数和返回值的类型
格式：
function 函数名(形参1: 类型,形参2: 类型):返回值的类型{返回值} //普通函数
const 函数名 = (形参1: 类型,形参2: 类型):返回值类型=>{返回值} //箭头函数
函数-统一定义函数格式
定义多个具有相同参数类型和返回值类型的函数时，相同的代码会重复写很多次，显得繁琐。把拥有相同形参类型和返回值类型的函数当做一个整体来定义，提炼自定义类型（使用类型别名，适用于函数表达式）
函数-可选参数
使用函数使用某个功能时，参数可以传也可以不传。这种情况下在给函数参数指定类型时可以用到可选参数，另外可选参数只能出现在参数列表的最后
格式：可选参数: 在可选参数名的后面添加 ?(问号)
eg：function fn (a?:number,b?:number,c?:number):void {}
对象类型-单独使用
格式：
const 对象名:{
属性名1: 类型1,
属性名2: 类型2,
属性名3: 类型3,
方法名1(形参1:类型1,形参2:类型2)=>返回值类型
} = {属性1:值1, 属性名2: 值2}
（可选属性用?）
const 对象名: {属性名1?:类型1,属性名2:类型2} = {属性名2: 值2}
对象类型-类型别名
用类型别名来简化定义对象的类型的方式
type Man = {
name: string
age: number
sayHello(): void
}
let obj1: Man = {
name: '小明',
age: 18,
sayHello () {
console.log(this.name)
}
}
function fn1 (o:Man):void{
console.log(o.age);
}
fn1(obj1)
对象类型-接口
当一个对象类型被多次使用时，可以用两种方式来描述对象的类型，达到复用的目的。类型别名是type，接口是interface
格式：
interface 接口名 {
属性1: 类型1 ,
属性2: 类型2
}
type和interface都可以给对象指定类型，类型别名不仅可以为对象指定类型，也可以为任意类型指定别名，但接口只能为对象指定类型，可以继承
接口继承
比如有两个接口，都有x、y两个属性，重复写两次的话显得繁琐，使用继承解决这个问题，两个接口之间有相同的属性或方法，可以将公共的属性和方法抽离出来，通过继承来实现复用
格式：
interface 接口2 extends 接口1 {
属性1： 类型1， // 接口2中特有的类型
...
}
使用extends关键字实现接口 2 继承接口 1 ，继承后，接口 2 就有了接口 1 的所有属性和方法
元组
元组是另一种特殊的数组，它确切的包含多少个元素，特定索引对应的类型。例如模拟 react 中的 useState ， useState 的返回值是一个数组，第一个元素是 number ，第二个是修改 number 的函数。
function useState (n:number): [number, (n: number) => void] {
const setN = (n: number): void => {}
return [n, setN]
}
const [count, setCount] = useState(10)
字面量类型
字面量类型约定只能取某些个特定的值，一般和联合类型一起使用。
例如let str1 = 'hello TS'， str1 是一个变量（let），它的值可以是任意字符串，所以类型为 string ；
例如const str2 = 'hello TS'， str2 是一个常量（const），它的值不能变化只能是 hello TS ，所以它的类型为：“hello TS”。此处的“hello TS”就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型；
字面量它一般和联合类型一起使用，用来表示一组明确的可选值列表（如下）
//说明：参数 direction 的值只能是 up/down/left/right 中的任意一个，优点是相比于 string 类型，字面量类型更精确和严谨
// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时，写上''，就会有类型提示：
changeDirection('up')
小结
TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持。对于这块还有许多需要积累的知识，还要投入更多时间深入学习 JavaScript 。
