TypeScript 梳理

静态类型检查

在代码运行前进行检查，发现代码的错去或不合理之处，减少运行时异常的出现几率，此种检查叫“静态类型检查”，TypeScript的核心就是静态类型检查，简而言之就是把运行时的错误前置。

同样的功能，TypeScript的代码量要大于JavaScript，但由于TypeScript的代码解构更加清晰，在后期代码的维护中TypeScript却远胜于JavaScript。

编译TypeScript

浏览器不能直接运行TypeScript代码，需要编译为JavaScript，再由浏览器解析器执行

1、命令行编译

要把 .ts文件编译为  .js 文件，需要配置  TypeScript  的编译环境

第一步 创建ts文件

创建一个 xx.ts 文件；

第二步 全局安装 TypeScript

 npm i  typescript -g；

第三步 使用命令编译 .ts 文件

tsc  xx.ts

会多出一个 .js文件， 这样就可以将ts文件转换为js文件。需要每次手动转换。

2、自动化编译

第一步 创建TypeScript编译控制文件

tsc --init

1、工程中会生成一个 tsconfig.json 配置文件，其中包含着很多编译时的配置

2、默认编译的js版本是ES7，可以手动调整

第二步 监视目录中的  .ts  文件变化

tsc --watch

第三步 小优化，当编译出错时不生成  .js  文件

tsc --noEmitOnError --watch

这样当写 ts 出错时是不会生成 js 文件的

备注：当然也可以修改  tsconfig.json  中的  onEmitOnError  配置

类型声明

let a:string  //变量a只能存储字符串
let b:number   //变量b只能存储数值
let c:boolean   //变量c只能存储布尔值


b = 'xx'  //警告：不能将类型"string"分配给类型"number"


//参数x是数字，参数y也是数字，函数返回值(第三个number限制)也必须是数字
function count(x:number,y:number):number{
    return x + y
}


count(100,'200')  //报错
count(100,200,300)  //报错
count(100) //报错

 : 后也可以写字面量类型

let a:'你好'  //a的值只能是字符串"你好"

let b:100    //b 的值只能是数值100

类型推断

TS会根据我们的代码，进行类型推导

let b = 99  //TS会推断出变量b的类型是数字

b = false  //报错，不能将类型"boolean"分配给类型"number"

注意：类型推断不是万能的，面对复杂类型时推断容易出问题，所以尽量还是明确编写类型声明。

类型总览

JavaScript的数据类型

string、number、boolean、null、undefined、bigint、symbol、object

此外object还包含有：Array、Function、Date、Error等

TypeScript的数据类型

以上所有JavaScript的数据类型

6个新的数据类型：any、unknown、never、void、tuple、enum

2个用于自定义类型：type、interface

注意：在JavaScript中的构造函数Number、String、Boolean等，它们用于创建对应的包装对象，在日常开发时很少使用，在TypeScript中也是常理，所以在TypeScript中进行类型声明时，通常都是用小写的number、string、boolean

let num2:Number
num2 = 100
num2 = new Number(100)

//以上不推荐

常用类型

any：任意类型

一但将变量类型限制为any，那就意味着放弃了对该变量的类型检查

let a: any  //显式

let b  //隐式

let x: string

x = a //可以

注意 any类型的变量，可以赋值给任意类型的变量

 unkonwn：未知类型

1、可以理解为一个类型安全的 any ，适用于不确定数据的具体类型

注意 unknown 会强制开发者在使用前进行类型判断，从而提供更强的类型安全性

let a: unknown

let x: string

x = a //不可以，x的类型是string，不能将类型"unknown"分配给类型"string"

//解决
//1、加类型判断
if( typeof a ==="string" ){
    x = a
}

//2、加断言
x = a as string

x = <string>a

2、读取any类型数据的任何属性都不会报错，而unknown正好与之相反

let str1: any
str1 = 'hello'
str1.toUpperCase()  //无警告


let str2: unknown
str2 = 'hello'
str2.toUpperCase()  //警告 str2的类型未知


//可以使用断言指定str2的类型为string
( str2 as string ).toUpperCase()

never :任何值都不是

1、几乎不用 never去限制变量，因为没有意义