Typescript 4.x 学习笔记

【0】为什么会有typescript？

前言：我们都知道，一个新技术的产生，往往是为了解决旧技术的痛点，typescript（以下简称ts）出现的目的就是为了解决js弱类型的痛点，让js的代码会更加健壮，而且ts不会影响打包后的代码，因为ts的类型限制在打包之后都会消失，他最主要的作用就是让我们在编程的时候，能拥有静态类型报错。

【1】前置准备

首先，由于ts文件无法直接被浏览器解析，所以我们必须npm在仓库中下载依赖才能将ts文件运行与解析
第一步：下载全局ts依赖

npm i typescript -g

在下载完毕依赖之后，我们可以通过控制台查询版本，看看是否安装依赖成功，有如下依赖即为成功

第二步：安装ts-node的依赖

该包可以直接执行ts文件

npm i -g ts-node@8.5.4

我们通过如下测试截图，可以直接用ts-node 地址执行ts文件代码

也可以通过前面下载的ts依赖，通过tsc 地址命令，将ts文件编译成js文件然后执行

我们可以很明显的看到，所有类型限制在编译成js之后，都成功去掉了

接下来，我们来正式学习ts

【2】类型注解

在ts中，我们最常用的简单的类型写法，就是类型注解
格式如下：

const nikename:类型名 = 值;

实例如下：

const nikename:string = "蔡徐坤"

注意，我们使用类型定义的时候，必须写成小写形式的string，而不是String大写开头的，因为String是一个js提供的类，而非ts提供的字符类型。

以上这种类型设置被称之为类型注解。

类型注解有如下几种：

const name:string = "蔡徐坤";
const age:number = 13;
const male:boolean = true;
const friend:string[] = ["吴亦凡","李易峰","谢博"]
const friend:Array<string> = ["吴亦凡","李易峰","谢博"]
// 这个是泛型写法，我们后续会学习
const obj:{
    name:string,
    age:number
} = {
    name:"蔡徐坤",
    age:16
}
// 对象数组类型注解
type arrType = {
    name:string,
    age:number
}
function foo():arrType[]{};
// 在对象类型中，我们默认添加的key和type都是必须的，我们也可以设置可选的属性
// 方法就是在key后面加一个？
type arrType2 = {
    name:string,
    age:number,
    friend?:string[]
}

【3】类型断言

当我们在定义变量的时候，没有设置类型注解，但是给他赋了值，ts会根据这个值，对变量进行类型断言

即，如下代码效果完全等同

let name = "蔡徐坤"
// ===
let name:string = "蔡徐坤"

但是假若我们利用const来断言那就有点不同了

const name = "蔡徐坤";
// ===
const name:"蔡徐坤" = "蔡徐坤"

他会相当于用字面量进行断言了

【4】函数返回值类型

我们也可以给函数设置相应的返回值类型，格式如下：

function foo(n:number,n2:number):number{
    return n+n2;
}

这里我们设置了函数的返回值为数值。

那么当我们函数返回值为空的时候，可以将返回值设置为void

function foo():void{}

【5】匿名函数的注解和上下文类型推导

假如我们往[].forEach()这种高阶函数，传入一个匿名函数进行遍历，我们无需给这个匿名函数添加相应的类型注解，因为他会自动根据上下文推导出来，假若我们额外添加了，反倒还可能报错，这种自动推导的匿名函数类型被称之为**“上下文类型”**

【6】any

any可以将变量设置成可以任意赋值的变量类型，被其设置的变量就相当于原生JS。
他的最大作用在于，可以给可能会产生类型值变化或者嵌套层级很深的网络请求数据赋值any，因为我们很难完全地将所有数据都提前声明