《TypeScript Programming》阅读笔记 - TypeScript 底层编译原理与项目配置

大纲TypeScript编译过程配置TypeScript项目TypeScript编译过程要理解TypeScript的运行机制首先要知道TypeScript是如何编译运行的类型检查发生在编译的哪一个过程首先一般的高级程序语言的编译运行的基本流程为编译器把高级语言编写的程序解析为AST抽象语法树AST接着被翻译为字节码Bytecode运行时运行字节码产生结果TypeScript的特殊之处在于它不直接编译成字节码而是编译成Javascript代码Javascript代码再经过上面的流程转换为字节码执行。有点像一个特殊的二次转换过程。具体如下图TypeScript代码首先被TSC解析为AST然后类型检查器会对AST进行类型检查检查完毕后AST被转换为Javascript代码。然后Javascript代码经过常见的流程被转换为字节码执行。从TypeScript到JavaScript的转换过程是由官方编译器TSC完成的。这里需要注意TSC和Babel的区别Babel是一个 JavaScript 编译器它的主要任务是把新版的还未支持的JS代码转换成浏览器支持的版本。即时编译 JIT那么这里还涉及到一个问题那就是Javascript是解释执行的还是编译执行的呢在传统的定义中Javascript被视为解释型语言无需预编译直接被浏览器引擎如V8, Chakara执行。但在现代高性能引擎的视角下它是一门使用即时编译技术的语言。现代 JavaScript 引擎的执行流程通常如下解析Parsing 引擎将代码拆分成有意义的单元Token并构建成抽象语法树AST。编译Compiling字节码生成 代码首先被编译成一种中间格式称为“字节码”。即时编译JIT 引擎如 V8 中的 TurboFan会监测代码如果某段代码被频繁执行热点代码JIT 编译器会将其进一步编译成高效的机器码二进制以便 CPU 直接快速执行。执行Executing 解释器如 V8 中的 Ignition执行字节码或者 CPU 直接执行优化后的机器码。它结合了两种语言的优势既保留了开发的灵活性又通过编译技术实现了高性能。配置TypeScript项目首先通过下面的命令初始化一个新的NPM项目安装相关依赖npm --init npm install --save-dev typescript tslint types/node在根目录创建tsconfig.json文件方便的对ts选项进行配置compilerOptions: { lib: [es2015], module: commonjs, outDir: dist, sourceMap: true, strict: true, target: es2015 }, include: [ src ] }选项描述includeTSC 应该在哪些文件夹中查找你的 TypeScript 文件libTSC 应该假设你的代码运行环境中存在哪些 API包括 ES5 的Function.prototype.bind、ES2015 的Object.assign以及 DOM 的document.querySelector等。moduleTSC 应该将你的代码编译为哪种模块系统CommonJS、SystemJS、ES2015 等outDirTSC 应该将生成的 JavaScript 代码放在哪个文件夹中strict在检查无效代码时尽可能严格。此选项要求你的所有代码都经过正确的类型检查。本书所有示例都将使用它你的 TypeScript 项目也应该使用。targetTSC 应该将你的代码编译为哪个 JavaScript 版本ES3、ES5、ES2015、ES2016 等创建如下所示的目录结构chapter-2/ ├──node_modules/ ├──src/ │ └──index.ts ├──package.json ├──tsconfig.json在index.ts里面写入console.log(Hello TypeScript!)然后执行下面的命令编译执行./node_modules/.bin/tsc node ./dist/index.js命令行会输出Hello TypeScript!当然有更方便的编译运行TypeScript代码的方法即使用tsx:npm install -D tsx // 安装tsx npx tsx main.ts // 直接运行代码或者使用Bun, 它是一个直接支持 TypeScript 的运行时。你不需要安装任何转换器直接bun run index.ts即可。同样还可以使用脚手架工具比如Vite快速生成文件夹结构npm create vitelatest