共计 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 配置
target | 设置 JavaScript 的标准版本 |
---|---|
strict | 严格模式 |
rootDir | TS 源文件所在目录,可设置为 ./src |
outDir | TS 编译后生成的 JS 文件输出目录,可设置为 ./dist |
参考
- TypeScript 教程:https://wangdoc.com/typescript/