TypeScript初体验

1.TypeScript介绍

1.1TypeScript是什么

TypeScript是JavaScript的超集（Js有的Ts都有）
TypeScript=Type+JavaScript （在Js的基础上加了类型支持）
微软开发的开源编程语言，在运行Js的环境中都可运行
例：
Ts 有明确的类型
let age1:number = 18
JS无明确类型
let age2 = 18

1.2 为什么要加类型支持

JS弱类型，会出现类型错误（UNcaught TypeError）
从编程语言的动静来分：TS静态语言 JS动态语言
静态类型：编译期进行类型检查；动态类型：执行期进行类型检查
JS要在执行时才发现错误，TS编译时就可发现错误，结合VSCode TS可以在代码编写时发现错误

1.3 TS优势

1.更早发现错误，减少找BUG，改BUG的时间，提升开发效率
2.程序中任何位置都有代码提示，随时随地的安全感，增强了开发体检
3.强大的类型系统提升了代码的可维护性，使得重构代码更加容易
比如开发中某个数据是字符串类型，后面需要改成字符串数组类型，TS直接修改，然后所有需要修改的地方都会有红色波浪线，而JS要一个一个去修改
4.支持最新的ECMAScript，优先体验最新语法，让你走在前端技术的最前沿
5.TS 类型推断机制，不需要在代码的每个地方都显示标注类型，让你在享受优势的同时，尽量降低成本

2.TypeScript初体验

2.1安装编译TS的工具包

为什么要安装：node 浏览器只认识JS不认识TS
安装命令： npm i -g typescript
Typescript包：用来编译TS的包，提供tsc命令，TS转化为JS
验证是否安装成功： tsc -v

2.2 编译并运行

1.创建hello.ts文件
2.将TS编译为JS：终端输入tsc hello.ts(此时，在同级目录中会出现一个同名的JS文件)
3.执行JS文件： node hello.js
(关掉JS文件就可以不报错)
简化运行 ts-node
安装 npm i -g ts-node
执行： ts-node hello.ts(不会生成js 文件)

3 TypeScript常用类型

Ts是JS的超集，TS加了类型检查，JS有类型，但是不会进行类型检查

3.1TS类型注解

例：let age: number = 18
number就是类型注解，对变量添加类型约束，约定变量的类型，约定了什么类型，就只能给变量赋值什么类型的数据

3.2TS常用类型

JS已有类型
基本类型 ：Number String Boolean null undefined Symbol BigInt
引用类型：object
TS 增加的类型 联合类型，自定义类型（类型别名），接口，元组，字面量类型，枚举，void,any等

3.3 原始类型

TS按照JS类型类写

3.4 数组类型

对象类型在TS中更加细化，每种类型都有自己的注解
数组类型两周写法

let numbers: number[] = [1,2,3]
let strings: Array<string> = ['1','2','3']

3.5 联合类型

有两个或多个其他类型组成

let arr: (number|string)[] = [1,'a']
let arr: number | string[] 要么是number 要么是string

3.6 类型别名

当一个复杂类型被多次使用，简化

type CustomArray = (number | string)[]
let arr: CustomArray = [1,'q']

1.使用type关键字创建类型别名 类型别名可以是任意符合的变量名 后面可以直接使用类型别名

3.7 函数类型

函数参数和返回值的类型
两种方式：分别制定参数和返回值类型；同时指定
方式一：

function fun(num1: number, num2: number): number {
  return num1+ num2
}
const fun = (num1: number, num2: number): number => {
  return num1+ num2
}

方式二：

const add: (num1: number, num2: number) => number = (num1,num2) => {
	return num1 + num2
}

这种方式只适用于函数表达式

void 类型

function fun ( num1: number) : void {
	console.log(num1)
}

可选参数
调用函数实现某种功能时，参数可以传也可以不传
比如slice slice(1) slice(1,3)

function mySlice:(start?: string, end?:string): void {
	console.log("输出“，start ,end)
}

注： 可传可不传参数后面加问号，可选参数只能出现在参数列表最后

对象类型
JS中的对象是由属性和方法构成的，TS中对象的类型就是在描述对象的结构（有什么类型的属性和方法）

let obj : {num: number;name: string} = {
num: 1,
name: "lili"
}

1.用{}指定对象结构，属性用 属性名：类型 方法用 方法名(): 类型
2.方法中有参数，在小括号中指定参数类型
3.一行中指定属性类型时，用分号分隔
如果一个方法中只指定一个属性的类型，可换行，去掉分号
方法类型可用箭头函数 sayHi: ()=> void
对象可选属性
跟函数可选参数语法一样，都是?:

3.8接口

问题：多个对象结构是一致的，重复的结构需要再写
接口：对象类型多次使用，一般用接口，达到复用的目的
1.interface关键字来声明
2.接口名为合法标识符
3.其他地方使用接口名定义对象
4.一行一个属性，不需要分号

interface Person {
num: number
name: string
sayHi() : void
}
let p：Person = {
num: 1，
name: "lili"，
sayHi() {
console.log(name)
}
}

接口和别名的对比
相同点：都可以给对象指定类型
不同点：接口只能给对象指定类型；别名可以给任意类型指定别名

接口继承
如果两个接口中有相同的属性和方法，可以将公共的部分抽取出来，通过继承来复用

3.9 元组

场景：如果表示某坐标，坐标为两位，如果用数组的话不严谨，数组可以有多个数据
解决：元组tuple 另一种形式的数组，可以准确知道包含多少个元素，以及特定元素对应的类型

let position: [number,number] = [1,2]

3.10 类型推论

在TS中某些没有明确指出类型的地方，TS的类型推断机制会帮助提供类型，换言之，有了TS类型推断机制，有些地方类型可以不写
发生类型推断的两种场景：1.变量定义并初始化时 2.决定函数返回值
能省略就省略，提高开发效率

let age = 18

若没有初始化，后面可以赋值任意类型,推荐这种情况下手动添加类型注解

let age: number
age = 10

function add (num1: number,num2: number) {
  return num1 + num2
}

在vscode中可以将鼠标方法变量上查看类型

3.11 类型断言

场景：有一个a标签，定义一个变量alink，通过getElementById获取这个节点对象，这个对象的类型是 HtmlElement 但是这种类型只包含标签的公共属性，若需要用到alink.href属性，这种情况就会报错

const alink = document.getElementById("link") as HTMLAnchorElement

两种方式
1.as 后面跟更具体的类型
2. <>

const alink = <HtmlAnchorElement>document.getElementById("link") 不常用且跟react语法冲突

可以在浏览器控制台console.dir()打印DOM元素，在最后面可以看到元素类型（可以先选中标签，然后dir($0)）
当开发者比TS更能准确知道类型时，用类型断言

3.12 字面量类型

let str1 = "hello" //string类型
const str2 = "Hello"  //Hello类型

const修饰常量，值不可以改变，它的类型就是Hello，Hello就是字面量类型
使用模式：字面量类型和联合类型一起使用
使用场景：用来表示一组明确的可选值列表
比如游戏中，方向只有上下左右

function fun(direction: 'up' | 'down' | 'right' | 'left') {
	console.log(direction)
}

3.13 枚举类型

枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值
枚举：定义一组命名常量，它描述一个值，该值可以是这些命名常量中的一个

enum Direction {up, down, left, right}
function fun(direction: Direction) {
	console.log(direction)
}
fun(Direction.up)

1.enum关键字
2.枚举变量名首字母大写
3.枚举值之间用逗号分隔
4.直接使用枚举名作为类型注解
5.形参类型为枚举类型，实参应该是枚举值中的一个，用.访问

枚举成员的值
枚举中的每个成员都有值，默认从0开始自增序列
枚举成员的值是数字的枚举成为数字枚举，也可以给枚举成员初始化值

enum Direction {up, down=9, left, right}

left值为10 right值为11

字符串枚举
枚举成员值都是字符串，由于字符串没有自增持行为，所以必须要初始值

枚举原理和特性
1枚举是TS中位数不多的非JS类型级扩展的特性之一
因为：其他类型仅仅是被当做类型，枚举类型不仅用作类型还提供值，也就是说，其他类型在编译时会被移除，
而枚举类型会被编译成JS代码
上述代码编译成JS之后

var Direction;
(function (Direction) {
    Direction[Direction["up"] = 0] = "up";
    Direction[Direction["down"] = 9] = "down";
    Direction[Direction["left"] = 10] = "left";
    Direction[Direction["right"] = 11] = "right";
})(Direction || (Direction = {}));

枚举与前面的字面量类型+联合类型类似，都表示一组明确的可选值列表
一般情况下，推荐使用字面量类型+联合类型，比较直观

3.14 any类型

不推荐使用，可以对any类型的变量进行任意操作，不会有类型提示
可以临时使用any表示很长或者复杂的类型
两种隐式any：1.声明变量不提供类型也不提供默认值 2.若函数定义时，参数无类型，则是any
这两种都要加类型

3.15 typeof

TS中的typeof可以在类型上下文中引用变量或属性的类型
使用场景：根据已有变量的值，获取该值的类型，简化书写

let p: {x: number; y: number} = {x: 1, y: 3}
function formatPoint(point: {x: number; y: number}) {}
formatPoint(p)

function formatPoint(point: typeof p)

typeof处在参数注解的位置就是类型上下文
typeof只能查询变量或属性的类型，不能查询函数调用的类型（ typeof(add(1)) ）