读《TypeScript》总结——概述

152 阅读2分钟

编译器

程序由一些文本(程序员编写)构成。这些文本由编译器解析,转换成抽象语法树(abstract syntax tree, AST),AST是去掉空白、注释、缩进用的制表符或空格之后的数据结构。编译器再把AST转换成字节码。字节码再传给运行时计算程序计算,得到最终结果。大致步骤如下:

  1. 文本解析为AST
  2. AST转换成字节码
  3. 运行时计算字节码呈现最终结果

TypeScript的特殊之处在于不直接编译成字节码,而是编译成JavaScript代码。TypeScript在编译成AST之后,会对代码做类型检查。

TypeScript的整个编译过程如下:

  1. TypeScript源码编译成TypeScript AST
  2. 类型检查器检查TypeScript AST
  3. TypeScript AST编译成JavaScript
  4. JavaScript编译成JavaScript AST
  5. JavaScript AST编译成字节码
  6. 运行时计算字节码呈现最终结果

上面的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"
    ]
}

以下是部分说明:

选项说明
includeTSC在哪个文件夹中寻找TypeScript文件
libTSC假定运行代码的环境中有哪些API?包括ES5的Function.prototye.bind,ES2015的Object.assgin和DOM的document.querySelector
moduleTSC把代码编译成哪个模块系统(commonJs, systemJs,ES2015等)
outDirTSC把生成的JavaScript代码放在哪个文件夹
strict严格模式
targetTSC把代码编译成哪个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文件。那么,最初始化的环境就搭建好了。