TypeScript 基础编程笔记

简介

TypeScript有助于提高代码质量，保证代码安全，更适合用在大型的企业级项目。不一定适合那些小型的、短期的个人项目。

TypeScript官网在线编译页面TypeScript Playground：http://www.typescriptlang.org/play/

TypeScript官方提供的编译器叫做tsc，可以将TypeScript脚本编译成JavaScript脚本。本机想要编译 TypeScript代码，必须安装tsc。

根据约定，TypeScript脚本文件使用.ts后缀名，JavaScript脚本文件使用.js后缀名。tsc的作用就是把.ts脚本转变成.js脚本。

静态类型检查

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

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

编译TypeScript

命令行编译

要把.ts文件编译为.js文件，需配置Typescript编译环境，步骤如下：

第一步：创建一个 index.ts 文件，例如：


const person = {
  name: '张三',
  age: 18,
}
console.log(我叫${person.name}，今年${person.age}岁)

第二步：全局安装TypeScript：npm i typescript -g。

第三步：使用tsc命令编译.ts文件：tsc index，可省略后缀.ts。

自动化编译

第一步：创建TypeScript编译控制文件：tsc --init，工程中会生成一个tsconfig.json配置文件，其中包含着很多编译时的配置。默认编译的JS版本是ES7，可以手动调整为其他版本，例如"target": "ES6",。

第二步：监视目录中.ts文件变化：tsc--watch，实现自动编译。

第三步：小优化，当编译出错时不生成.js文件：tsc --noEmitOnError --watch。当然，最好是修改 tsconfig.json中的noEmitOnError配置项。

常用类型

TypeScript有两个“顶层类型”（any和unknown），但是“底层类型”只有never唯一一个。

any类型

any类型表示没有任何限制，该类型的变量可以赋予任意类型的值。对于没有指定的类型，TypeScript如果无法推断出类型，就会认为类型是any。变量类型一旦设为any，TypeScript实际上会关闭这个变量的类型检查。

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

unknown类型

unknown含义是未知，表示类型不确定，可能是任意类型，但是它的使用有一些限制，不像any那样自由，可以视为严格版的any，适用于不确定数据的具体类型。


let a: unknown
a = 10
a = 'hello'
let x: string
// 第一种方式（加类型判断）
if (typeof a === 'string') {
x = a
}
// 第二种方式（加断言）
x = a as string
// 第三种方式（加断言）
x = <string>a

unknown类型跟any类型的不同之处在于，它不能直接使用。主要有以下几个限制：

unknown类型的变量，不能直接赋值给其他类型的变量（除了any类型和unknown类型）
不能直接调用unknown类型变量的方法和属性
unknown类型变量能够进行的运算有限，只能进行比较运算（==、===、!=、!==、||、&&、?）、取反运算（!）、typeof运算符和instanceof运算符这几种，其他运算都会报错

只有经过“类型缩小”，unknown类型变量才可以使用。所谓“类型缩小”，就是缩小unknown变量的类型范围，确保不会出错。

never类型

该类型为空，不包含任何值。由于不存在任何属于“空类型”的值，所以该类型被称为never，即不可能有这样的值。

never类型的一个重要特点是，可以赋值给任意其他类型。

void

void用来表达“空”，通常用于函数返回值。函数返回值为空，调用者也不应依赖其返回值进行任何操作。

函数没有显示返回值的，会有一个隐式返回值，即undefined（undefined是void可以接受的一种空）。

TS配置

target设置JavaScript的标准版本strict严格模式rootDirTS源文件所在目录，可设置为 ./srcoutDirTS编译后生成的JS文件输出目录，可设置为 ./dist

参考

TypeScript 教程：https://wangdoc.com/typescript/