编译器
程序由一些文本(程序员编写)构成。这些文本由编译器解析,转换成抽象语法树(abstract syntax tree, AST),AST是去掉空白、注释、缩进用的制表符或空格之后的数据结构。编译器再把AST转换成字节码。字节码再传给运行时计算程序计算,得到最终结果。大致步骤如下:
- 文本解析为AST
- AST转换成字节码
- 运行时计算字节码呈现最终结果
TypeScript的特殊之处在于不直接编译成字节码,而是编译成JavaScript代码。TypeScript在编译成AST之后,会对代码做类型检查。
TypeScript的整个编译过程如下:
- TypeScript源码编译成TypeScript AST
- 类型检查器检查TypeScript AST
- TypeScript AST编译成JavaScript
- JavaScript编译成JavaScript AST
- JavaScript AST编译成字节码
- 运行时计算字节码呈现最终结果
上面的1-3步由TSC操作,后三步由浏览器或者Node JS或其他引擎操作。
类型系统
类型系统分两种:
- 显示句法告诉编译器所有值的类型,如java和C
- 自动推导值的类型,如JavaScript、Python、Ruby
TypeScript两种兼备。
初始化
初始化项目
mkdir ts-study
cd ts-study
npm init -y
npm install --save-dev typescript tslint @types/node
tsconfig.json
每个TypeScript项目都应该在根目录放一个名为tsconfig.json的文件,在该文件中定义要编译哪些文件,把文件编译到哪个目录,使用哪个版本的javascript运行等等。
在根目录新建一个tsconfig.json,输入如下内容:
{
"compilerOptions": {
"lib": ["ES2015"],
"module": "commonjs",
"outDir": "dist",
"strict": true,
"target": "es2015",
"sourceMap": true
},
"include": [
"src"
]
}
以下是部分说明:
| 选项 | 说明 |
|---|---|
| include | TSC在哪个文件夹中寻找TypeScript文件 |
| lib | TSC假定运行代码的环境中有哪些API?包括ES5的Function.prototye.bind,ES2015的Object.assgin和DOM的document.querySelector |
| module | TSC把代码编译成哪个模块系统(commonJs, systemJs,ES2015等) |
| outDir | TSC把生成的JavaScript代码放在哪个文件夹 |
| strict | 严格模式 |
| target | TSC把代码编译成哪个JavaScript版本(ES3、ES5、ES2015、ES2016等) |
这只是一部分选项,更多选项查看tsconfig.js详细配置。
tslint.json
tslint.json用来保存TSLint的配置,tslint不是必备的配置,但是强烈建议所有TypeScript项目都使用,从而保证编程风格统一。
自动生成tslint.json:
npx tslint --init
tslint的配置,详细请查看tslint.json详细配置
正式上手
设置好tslint和tsconfig后,新建src文件夹,第一个TypeScript文件就保存在这。
mkdir src
touch src/index.ts
打开src/index.ts文件,在里面输入:
let a = 1 + 2;
let b = a + 3;
let c = {
apple: a,
banana: b
};
let d = c.apple * 3;
然后在命令行输入命令:
npx tsc
运行完毕之后,在dist文件夹下应该会出现编译好的index.js文件。那么,最初始化的环境就搭建好了。