TypeScript 基础编程笔记

共计 1965 个字符，预计需要花费 5 分钟才能阅读完成。

简介

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 配置

参考

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