TypeScript 入门应用:类型系统和配置文件

勾勾的前端世界

共 1859字,需浏览 4分钟

 ·

2021-07-06 17:19


安装及使用


npm install typescript  -g 进行全局安装,也可以使用 npm install typescript -D 作为项目的开发依赖项。


TypeScript 代码默认以 .ts 后缀结尾,我们创建一个 index.ts 文件,写入以下代码:



代码中,我们使用了 ES6 中的箭头函数及模板字符等新的语法特性,然后,在命令行中执行 tsc  index.ts 进行编译后,我们能够得到一个同名的 index.js 文件,内容如下:


                      

此时我们会发现,编译过后的文件,已经被转译为了标准的 ES3 规范的代码。这就是我们说的 TS 编译转换新特性的能力。


类型系统的使用的也非常简单,在需要标准的地方,使用类型名称即可,一旦为某个变量标注了类型之后,如果没有给与对应类型的数据,在编译时就会报错,比如,这样的代码:



报错:



同时,在 VS Code 编辑器中,还会有红色的波浪线,鼠标悬浮后,会出现如下提示信息:


使用命令 tsc --locale zh-CN 可以打印出中文形式的提示信息,方便英文不好的同志们。

 


配置文件


tsc 命令不仅可以编译指定的某个 ts 文件,还可以编译整个项目或整个工程。在使用之前,我们需要一个配置文件来对设置不同的编译选项,使用 tsc --init 生成一个名为 tsconfig.json 的 ts 配置文件,compilerOptions 就是 ts 编译器所对应的一些选项,其中大部分都已经被注释掉了,且每个选项后面都有对应的选项说明。


这里对于一些常用的选项从上往下的顺序做一个简单解释:

 


修改好各项配置之后,我们就可以使用 tsc index.ts 命令进行编译了,但是在配置文件中的选型好像并没有起作用,这是因为配置文件是对整个项目工程起作用的,并不对编译一个具体指定的 ts 文件有效。因此,我们在命令行中可以直接使用 tsc 命令而不需要指定具体的那个文件。

 

原始类型



"strict": false, 配置项是对所有类型开启或关闭严格模式,如果想具体控制,可以在配置文件中具体修改。






联合类型



接着我们使用来看 Symbol 类型:




错误提示如下图:



这是什么原因呢?

 

标准库声明


Symbol 是 ES2015 标准中定义的成员,使用它的前提是必须确保有对应的 ES2015 标准库引用,我们可以修改 tsconfig.json 中 target 或者让 lib 选项包含 ES2015 就可以了。但是,这到底是为什么呢?


其实 Symbol 和其他的 String 或者 Number 一样,只不过 Symbol 是 ES2015 中新的数据类型,当我们在配置文件中定义好 target 选项后,会自动使用指定规范的标准库引用,比如我们写一个 Array ,鼠标右击,选择 '转到定义‘,就能够看到具体的引用文件了。

 

其实通过引用文件的文件名 lib.es5.d.ts 我们就能看到,当前引入的是 es5 的标准库,而 Symbol 是 es2015 中的新特性,如果直接修改 target 显然不够灵活,其实像 promise 也会出现类似的情况。最好的办法还是使用 lib 选项,来引入对应的标准库:"lib": ["es2015"], 但是这样就会覆盖默认引入的标准库 DOM ,所以我们就需要再添加对 DOM 的引入"lib":["es2015","DOM"],

 

其实标准库就是内置对象所对应的声明,我们在代码中使用内置对象,就必须要引入对应的标准库,否则找不到对应的类型就会报错了。

 

未完待续...


推荐阅读:

TypeScript 从入门到放弃(一)

前端工程化中的重要环节——自动化构建

效率提升利器:你还害怕自动化部署吗


更新不易,点个“在看”和“”吧(●'◡'●)!

浏览 42
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报