TypeScript基础总结 | 青训营

71 阅读3分钟

虽然我们已经有JS语言,但JS语言在开发的过程中对类型不是很敏感,很多时候即使数据类型不是我们想要的类型也可以运行,不会报错,这对我们debug非常不友好,正是由于这样的问题,使用TS开发显得很有优势。

JS与TS对比

TypeScript是JavaScript的超集,它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。TS完全兼容JS,换言之,任何的JS代码都可以直接当成JS使用。相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的功能;TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;同样的功能,TS的代码量要大于JS,但由于TS的代码结构更加清晰,变量类型更加明确,在后期代码的维护中TS却远远胜于JS。

开发环境与使用

使用node开发环境,全局安装TS:npm i -g typescript 编写完TS代码后,进入项目目录,终端运行tsc,将TS文件编译为JS文件,然后运行JS文件就可以了。

基本类型

类型声明是TS非常重要的一个特点,通过类型声明可以指定TS中变量(参数、形参)的类型,指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错,下面是一些类型。

类型描述
number任意数字
string任意字符串
boolean布尔值true或false
字面量限制变量的值就是该字面量的值
any任意类型
unknown类型安全的any
void没有值(或undefined)
never不能是任何值
object任意的JS对象
array任意JS数组
tuple元素,TS新增类型,固定长度数组
enum枚举,TS中新增类型

配置文件

直接使用tsc指令,则可以自动将当前项目下的所有ts文件编译为js文件,但是前提是,要先在项目根目录下创建一个ts的配置文件 tsconfig.json,添加配置文件后,只需只需 tsc 命令即可完成对整个项目的编译。下面是一些常见配置选项:

include:定义希望被编译文件所在的目录

exclude:定义需要排除在外的目录

extends:定义被继承的配置文件

files:指定被编译文件的列表,只有需要编译的文件少时才会用到

compilerOptions:编译选项是配置文件中非常重要也比较复杂的配置选项,在compilerOptions中包含多个子选项,用来完成对编译的配置。