TypeScript笔记(2)—— 使用VSCode实时编译TypeScript代码

简介: TypeScript笔记(2)—— 使用VSCode实时编译TypeScript代码

TypeScript(2)
如何使用VSCode自动编译TypeScript代码

上一节中我们介绍了TypeScript的开发环境配置,并以一个实例展示了如何编译TypeScript代码为原生的JavaScript代码。在开发过程中,我们往往需要时时预览代码的效果,这就需要不断地对我们的TypeScript代码进行编译——让人窒息的操作。不过别慌,本文将使用一种方法自动地将TypeScript编译为JavaScript。

接着上一节。我们在"tscode"目录中建立子目录"02_autoCompile"以存放本节地内容。

打开终端,进入目录"02_autoCompile":

cd .\02_autoCompile\

接着,使用如下命令创建编译的配置文件:

tsc --init

若文件成功被创建可以看到左侧的目录中生成了一个名为tsconfig.json的json配置文件,并提示信息:

Successfully created a tsconfig.json file.

如图所示:

打开该配置文件,其内容如下(为方便理解,已将英文注释替换成了中文):

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */
    /* 基本选项 */
    // "incremental": true,                         /* 启用增量编译 */
    "target": "es5",                                /* 指定ECMAScript目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT' */
    "module": "commonjs",                           /* 指定模块代码生成: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', 或者 'ESNext' */
    // "lib": [],                                   /* 指定要包含在编译中的库文件 */
    // "allowJs": true,                             /* 允许编译javascript文件 */
    // "checkJs": true,                             /* 在 .js 文件中报告错误 */
    // "jsx": "preserve",                           /* 指定JSX代码生成: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
    // "declaration": true,                         /* 生成相应的 '.d.ts' 文件 */
    // "declarationMap": true,                      /* 为每个对应的'.d.ts'生成相应的sourcemap文件 */
    // "sourceMap": true,                           /* 生成相应的 '.map' 文件 */
    // "outFile": "./",                             /* 指定一个输出文件的文件名 */
    // "outDir": "./",                              /* 重定向输出到该指定的目录 */
    // "rootDir": "./",                             /* 为输入文件指定一个根目录. 使用--outDir选项以控制输出目录结构 */
    // "composite": true,                           /* 使能(允许)项目编译 */
    // "tsBuildInfoFile": "./",                     /* 指定一个文件以存储附加的编译信息 */
    // "removeComments": true,                      /* 不向输出分发注释 */
    // "noEmit": true,                              /* 不要分发输出. */
    // "importHelpers": true,                       /* 从' tslib '导入分发帮助程序 */
    // "downlevelIteration": true,                  /* 当以“ES5”或“ES3”为目标时,在“for-of”、“spread”和“destructuring”中为iterables提供完全支持 */
    // "isolatedModules": true,                     /* 将每个文件作为一个单独的模块进行传输(类似于“ts.transpileModule”) */
    /* 严格类型检查选项 */
    "strict": true,                                 /* 启用所有严格的类型检查选项 */
    // "noImplicitAny": true,                       /* 在隐含'any'类型的表达式和声明中引发错误。 */
    // "strictNullChecks": true,                    /* 允许严格的 null 校验 */
    // "strictFunctionTypes": true,                 /* 允许对函数类型的严格校验 */
    // "strictBindCallApply": true,                 /* 允许函数中严格的'bind', 'call', 和 'apply' 方法 */
    // "strictPropertyInitialization": true,        /* 允许对类中属性初始化的严格检查 */
    // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                        /* 在严格模式下解析,并为每个源文件发出"use strict" */
    /* 附加校验 */
    // "noUnusedLocals": true,                      /* 报告未使用的局部变量的错误 */
    // "noUnusedParameters": true,                  /* 报告未使用参数的错误 */
    // "noImplicitReturns": true,                   /* 当函数中并非所有代码路径都返回值时报告错误 */
    // "noFallthroughCasesInSwitch": true,          /* 在switch语句中报告失败案例的错误 */
    // "noUncheckedIndexedAccess": true,            /* 在索引签名结果中包含'undefined' */
    // "noPropertyAccessFromIndexSignature": true,  /* 需要索引签名中未声明的属性才能使用元素访问。 */
    /* 模块解析选项 */
    // "moduleResolution": "node",                  /* 指定模块解析策略: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                             /* 解析非绝对模块名的基目录。 */
    // "paths": {},                                 /* 一系列用于重新映射 import 以查找与'baseUrl'相关的位置的入口. */
    // "rootDirs": [],                              /*根目录列表,其组合内容代表运行时(Runtime)项目的结构 */
    // "typeRoots": [],                             /* 包含类型定义的文件夹列表 */
    // "types": [],                                 /* 要包含在编译中的类型声明文件*/
    // "allowSyntheticDefaultImports": true,        /* 允许从没有默认导出的模块默认导入。这不影响代码发出,只是类型检查 */
    "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports' */
    // "preserveSymlinks": true,                    /* 不要解析符号链接的真实路径 */
    // "allowUmdGlobalAccess": true,                /* 允许从模块访问UMD全局 */
    /* 源映射选项 */
    // "sourceRoot": "",                            /* 指定调试器应该定位类型脚本文件的位置,而不是源位置。 */
    // "mapRoot": "",                               /* 指定调试器应该定位映射文件的位置,而不是生成的位置。 */
    // "inlineSourceMap": true,                     /* 生成一个带有源映射的文件,而不是一个单独的文件。 */
    // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; 需要'--inlineSourceMap' 或者 '--sourceMap' 测设定 */
    /* 实验性选项 */
    // "experimentalDecorators": true,              /* 支持ES7装饰器的实验性支持,比如你想用装饰器等功能,则需要启用TypeScript实验性功能。 */
    // "emitDecoratorMetadata": true,               /* 启用对为装饰器发出类型元数据的实验支持。 */
    /* 高级选项 */
    "skipLibCheck": true,                           /* 跳过声明文件的类型检查。 */
    "forceConsistentCasingInFileNames": true        /* 不允许对同一文件进行大小写不一致的引用。 */
  }
}

为了文件更好地归类,我们希望生成的JavaScript都放在同一个子目录中,因此,我们取消对outDir的注释,并填写目录名如下:

"outDir": "./js",

这里指定的js目录我们不用手动创建,一但自动编译运行起来后,该目录将会自动生成。

如果我们不配置"outFile"选项,那么生成JavaScript文件的文件名与原TypeScript文件名保持一致,仅仅是后缀由".ts"变成了".js"。接下来,关闭JavaScript 严格模式。(严格模式下有诸多限制,如你不能使用未声明的变量等等。我们这里选择了关闭,你也可以选择使用严格模式):

"strict": false,

修改后的配置文件如下:

{
  "compilerOptions": {
    "target": "es5",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "outDir": "./js",                               /* Redirect output structure to the directory. */
    "strict": false,                                /* Enable all strict type-checking options. */
    "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES */
    "skipLibCheck": true,                           /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
  }
}

接下来,就可以启动监视任务了,方法如下:

以此点击"Terminal -> Run Task"(若你安装了额外的中文插件则对应为"终端 -> 运行任务"),如图:

滚动到最下面,点击"Show All Task…"(中文插件对应为"显示所有任务")

可以看到有这里有两个任务,一个是监视(watch)任务,一个是构建(build)任务,如图:

选择红框所圈出的"监视任务"。——接下来就可以自动编译代码了。此时终端已被启动,你将在终端中看到如下内容:

这里提示有error没有关系,只是因为我们还没有创建ts文件。

为了展示效果,接下来我们在"02——auto_Compile"目录下建立一个ts文件和一个Html文件,仍然采用上一节中的TypeScript代码。注意观察VSCode左侧目录变化以及终端输出内容的更新。

  • 当我们建立好文件"anto_Com.ts"后(还未保存该文件代码),终端中提示检测到更改,js子目录被自动生成。

    接下来使用"ctrl + S"保存以上ts代码,可以看到对应的js文件"“被自动地生成在了”./js"子目录中:

    之后只要我们没有停止该监视任务,但凡是我们改动了项目目录中的ts文件,对应的同名js文件就会自动地生成或更改于"./ts"目录中。

如更改并保存:

对应的js文件便立即被自动地完成编译:

怎么样,是不是特别省事呢。喜欢的话记得点赞加关注哦!

目录
相关文章
|
3月前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript数组转置
[小笔记]TypeScript/JavaScript数组转置
35 0
|
6天前
设置VSCode代码编辑器右侧的Minimap代码缩略图滚动条切换显示、隐藏的快捷键Alt+M
设置VSCode代码编辑器右侧的Minimap代码缩略图滚动条切换显示、隐藏的快捷键Alt+M
|
6天前
|
JSON JavaScript 前端开发
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
|
3月前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
26 0
|
7天前
Vscode 插件-代码敲出不同的特效
Vscode 插件-代码敲出不同的特效
|
1月前
|
存储 IDE 编译器
编程笔记 GOLANG基础 005 第一个程序:hello world 使用vscode
编程笔记 GOLANG基础 005 第一个程序:hello world 使用vscode
|
1月前
|
Go 开发工具
编程笔记 GOLANG基础 004 GOLANG常用命令及VSCODE快捷键
编程笔记 GOLANG基础 004 GOLANG常用命令及VSCODE快捷键
|
2月前
|
JavaScript 前端开发 编译器
如何编译Typescript文件?
如何编译Typescript文件?
|
3月前
|
JavaScript 前端开发 Java
小笔记:如何使用代码注释:关于JavaScript与TypeScript 注释和文档的自动生成
小笔记:如何使用代码注释:关于JavaScript与TypeScript 注释和文档的自动生成
155 0
|
3月前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的zip(不使用map)
[小笔记]TypeScript/JavaScript模拟Python中的zip(不使用map)
19 0