TypeScript 是JavaScript的一个超集,支持ECMAScript 6标准。以下简称TS。 TS是微软开源的语言,设计目标是开发大型应用,它可以编译成纯JavaScript,编译出来的 JavaScript可以运行在任何浏览器上。
为什么要使用TypeScript?
文件扩展名为:
.ts
,语法上区分大小写,语句末尾的分号是可选的。 建议使用let替换var,let为ES6引入关键词,主要是为了解决var作用域混乱的问题。
ESMA International(爱玛国际)是一个JS标准组织,负责维护版本。
ECMAScript = ES
ES3/ES5版本:支持目前所有主流浏览器,没有ES4这个版本(失败了)
ES6版本 = ES2015:颠覆性版本,开始支持面向对象编程,支持const、let,引入了Module的概念,但目前主流浏览器未支持,需要使用TSC来编译成ES5再使用。
ECMA约定,ES的版本由ES+年份来命名,ES7=ES2016,ES8=ES2017
前置条件:先安装好nodejs
npm install -g typescript
tsc --version
Version 4.3.5
1、新建一个app.ts
文件;
mkdir src
cd src
touch app.ts
2、新建ts配置文件
cd ../
tsc --init
内容如下:
{
"compilerOptions": {
"module": "commonjs",
"target": "ES5",
"strict": false,
"noImplicitAny": true,
"strictNullChecks": false,
"sourceMap": false,
"outDir": "./dist"
},
"include": [
"src/**/*"
],
"compileOnSave": false
}
3、编写代码
4、编译成js
tsc -t es5 -w ./src/*.ts
5、运行js
node app.js
tsconfig.json
{
"compilerOptions": { //编译配置选项 确定如何编译ts文件
"module": "commonjs",
"target": "es5",
"sourceMap": false,
"noImplicitAny": true,
"strictNullChecks": false,
"outDir": "./dist"
},
"include": [
"src/**/*"
]
}
以下参数与配置文件里的配置项意义相同:
配置项 | 说明 |
---|---|
--module | 可简写为-m,载入扩展模块,可以使用commonjs、amd、umd、system、es6、es2015、none这些选项 |
--target | 可简写为-t,用于指定生成代码的兼容版本,可以从es3、es5、es2015、es6中选择一个,如果不设置,默认生成的代码兼容到es3。 |
--declaration | 可简写为-d,额外生成一个 .d.ts 扩展名的文件。 |
--removeComments | 如果设置为true时,则删除文件的注释 |
--out | 编译多个文件并合并到一个输出的文件 |
--sourcemap | sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。如果设置为true,则会生成一个 sourcemap (.map) 文件。 |
--watch | 可简写为-w,设置为true时开启监视模式,编译器将监视ts文件变化。当文件变化时,自动编译成js。 |
--outDir | 指定生成js文件的目录 |
--noImplicitUseStrict | 当设置为true时,编译输出时不会调用'use strict'指令(也就是不生成use strict) |
--sourceRoot | 设置在调试时定位的目标文件根目录 |
--forceConsistentCasingInFileNames | 设置为true时,将强制区分大小写。默认为false。 |
--exclude | exclude用于排除不需要编译的ts文件,该属性和files属性冲突,两者只能设置其一。 |
--files | 当files属性不存在时,编译器会编译当前目录和子目录中的所有文件。当files属性存在是,仅仅是编译files列表中的文件。该属性和exclude属性冲突。如果同时指定了exclude和files,则files属性优先。 |
--compileOnSave | 该属性用于启用保存时编译功能。**注意:**当前仅仅只有VS2015配置TypeScript1.8.4以后或者在atom中搭配atom-typescript插件才有效 |
break、as、catch、switch、case、if、throw、else、var、number、string、get、module、type、instanceof、typeof、public、private、enum、export、finally、for、while、void、null、super、this、new、in、return、true、false、any、extends、static、let、package、implements、interface、function、new、try、yield、const、continue、do
https://www.tslang.cn/docs/home.html 中文手册
https://www.imooc.com/learn/1306
https://www.runoob.com/typescript/ts-tutorial.html
http://www.semlinker.com/master-ts-generic/ 一文读懂 TypeScript 泛型及应用
https://segmentfault.com/a/1190000023858355 细数这些年被困扰过的 TS 问题
https://24kcs.github.io/vue3_study/chapter2/1_type.html 尚硅谷教程
安装插件:
TypeScript Toolbox
TSLint
JSON to TS
HTML Boilerplate
Beautify
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。