编译TS
自动编译文件
编译文件时,使用 -w 指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。
tsc xxx.ts -w
复制代码
一个文件一个文件的编译太麻烦了,我们可以对整个项目进行编译
自动编译整个项目
首先在项目根目录下创建一个ts的配置文件 tsconfig.json
,然后就可以使用tsc
指令,编译项目下的所有ts文件为js文件,当然也可以开启监视模式tsc -w
监视所有的文件
我们使用 tsc --init
可以初始化一个tsconfig.json文件,通过对配置文件的设置可以进行自定义的ts编译
下面我们在介绍tsconfig.json文件中的一些配置选项
配置选项
官方文档 TypeScript: TSConfig Reference - Docs on every TSConfig option (typescriptlang.org)
{
// 此json文件中可以写注释!
/*
tsconfig.json是ts编译器的配置文件,ts编译器可以根据它的信息来对代码进行编译
*/
/*
"include" 用来指定哪些ts文件需要被编译
默认:当前路径下所有文件, **\*
路径:** 表示任意目录
* 表示任意文件
*/
"include": [
"./src/**/*"
],
/*
"exclude" 不需要被编译的文件目录
默认值:
["node_modules", "bower_components", "jspm_packages", "./dist"]
*/
"exclude": [
"./src/exclude/**/*"
],
/*
被继承的配置文件
例如:"extends": "。/configs/base",
*/
// "extends": "",
/*
指定被编译文件的列表,只有需要编译的文件少时才会用到
*/
// "files": [],
/*
compilerOptions 编译器的选项
*/
"compilerOptions": {
// target 用来指定ts被编译为的ES的版本
// 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', ...
"target": "es2015",
// module 指定要使用的模块化的规范
// 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', ...
"module": "es2015",
// lib用来指定项目中要使用的库
// 在node项目中可以声明用到的库,在前端中可以声明dom(浏览器中的内置库,但是在node中是不需要的!)
// 默认就是在浏览器中的运行环境!
//'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020',
// 'esnext', 'dom', 'dom.iterable', ...
"lib": [
"es6",
"dom"
],
// outDir 用来指定编译后文件所在的目录
"outDir": "./dist",
// 设置outFile后,所有的全局作用域中的代码会合并到同一个文件中
//"outFile": "./dist/app.js"
// 是否对js文件进行编译,默认是false
"allowJs": true,
// 是否检查js代码是否符合语法规范,默认是false
"checkJs": true,
// 是否移除注释
"removeComments": true,
// 仅用TS检查语法,不生成编译后的文件
"noEmit": false,
// 当有错误时不生成编译后的文件
"noEmitOnError": true,
/*
语法检查属性
*/
// 所有严格检查的总开关,一旦打卡,后面几项都可以不用写
"strict": true,
// 用来设置编译后的文件是否使用严格模式,默认false
// 在ES6中的模块化会自动使用严格模式,而无需在文件开头添加`'use strict'`
"alwaysStrict": true,
// 不允许隐式的any类型
"noImplicitAny": true,
// 不允许不明确类型的this
"noImplicitThis": true,
// 严格的检查空值
"strictNullChecks": true,
"moduleResolution": "node", // 选择模块解析策略
"experimentalDecorators": true, // 启用实验性的ES装饰器
"allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入。
"sourceMap": true, // 把 ts 文件编译成 js 文件的时候,同时生成对应的 map 文件
"declaration": true, // 生成相应的.d.ts文件
"noImplicitReturns": true, // 不是函数的所有返回路径都有返回值时报错
"importHelpers": true, // 从 tslib 导入辅助工具函数
"typeRoots": ["node_modules/@types"],
"rootDir": "./src"
}
}
复制代码
① include
重要
- 是一个数组,用来指定需要编译的ts文件,其中
*
表示任意文件**
表示任意目录 - 默认值:
["**/*"]
"include":["src/**/*", "test/**/*"] // 所有src目录和test目录下的文件都会被编译
复制代码
② exclude
- 定义不需要被编译的文件目录
- 默认值:
["node_modules", "bower_components", "jspm_packages"]
"exclude": ["./src/hello/**/*"] // src下hello目录下的文件都不会被编译
复制代码
③ extends
- 定义被继承的配置文件
"extends": "./configs/base" // 当前配置文件中会自动包含config目录下base.json中的所有配置信息
复制代码
④ files
- 指定被编译文件的列表,只有需要编译的文件少时才会用到
"files": [
"core.ts",
"sys.ts",
"types.ts",
"scanner.ts",
"parser.ts",
"utilities.ts",
"binder.ts",
"checker.ts",
"tsc.ts"
]
复制代码
- 列表中的文件都会被TS编译器所编译
⑤ compilerOptions
重要 编译选项,在compilerOptions中包含多个子选项,用来完成对编译的配置
对于这些选项有哪些可选值,我们可以随便写一个值,编辑器会提示我们有哪些可选值
① target
- 设置ts代码编译的目标版本
- 可选值: "ES3"(默认), "ES5", "ES6", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020", "ES2021", "ESNext".
"compilerOptions": {
"target": "ES6"
}
复制代码
- 如上设置,我们所编写的ts代码将会被编译为ES6版本的js代码
② lib
- 指定代码运行时所包含的库(宿主环境)
- 可选值:"ES5", "ES6", "ES2015", "ES2015.Collection", "ES2015.Iterable", "ES2015.Promise", "DOM", "DOM.Iterable", "ScriptHost", "WebWorker", "WebWorker.ImportScripts"......
"compilerOptions": {
"lib": ["ES6", "DOM"]
}
复制代码
一般来说,如果是运行在浏览器环境下的,就不需要自己单独设置这个
③ module
- 设置编译后代码使用的模块化系统
- 可选值:"CommonJS", "AMD", "System", "UMD", "ES6", "ES2015", "ES2020", "ESNext", "None", "es2022", "node12", "nodenext"
"compilerOptions": {
"module": "CommonJS"
}
复制代码
④ outDir
- 编译后文件的所在目录
- 默认情况下,编译后的js文件会和ts文件位于相同的目录,设置outDir后可以改变编译后文件的位置
"compilerOptions": {
"outDir": "./dist"
}
复制代码
- 设置后编译后的js文件将会生成到dist目录。可以将源码与编译后的代码分开存放
⑤ outFile
- 将所有的文件编译为
一个
js文件 - 默认会将所有的编写在全局作用域中的代码合并为一个js文件,如果 module 制定了 None、System 或 AMD 则会将模块一起合并到文件之中
"compilerOptions": {
"outFile": "./dist/app.js"
}
复制代码
这种合并,我们应该交给打包工具去做,我们后面会说
⑥ rootDir
- 指定代码的根目录,默认情况下编译后文件的目录结构会以最长的公共目录为根目录,通过rootDir可以手动指定根目录
"compilerOptions": {
"rootDir": "./src"
}
复制代码
⑦ 其他配置
标题 | 功能 |
---|---|
allowJs | 是否对js文件编译,默认值:false |
checkJs | 是否对js文件进行语法检查,默认值:false |
removeComments | 是否删除注释,默认值:false |
noEmit | 不生成编译后的文件,默认值:false |
noEmitOnError | 当有错误的时候不生成编译后的文件,默认值:false |
sourceMap | 是否生成sourceMap,默认值:false |
⑧ 严格检查
标题 | 功能 |
---|---|
strict | 启用所有的严格检查,设置后相当于开启了所有的严格检查,默认值:false |
alwaysStrict | 总是以严格模式对代码进行编译,默认值:false |
noImplicitAny | 禁止隐式的any类型,默认值:false |
noImplicitThis | 禁止类型不明确的this,默认值:false |
strictBindCallApply | 严格检查bind、call和apply的参数列表,默认值:false |
strictFunctionTypes | 严格检查函数的类型,默认值:false |
strictNullChecks | 严格的空值检查,默认值:false |
strictPropertyInitialization | 严格检查属性是否初始化,默认值:false |
⑨ 额外检查
标题 | 功能 |
---|---|
noFallthroughCasesInSwitch | 检查switch语句包含正确的break |
noImplicitReturns | 检查函数没有隐式的返回值 |
noUnusedLocals | 检查未使用的局部变量 |
noUnusedParameters | 检查未使用的参数 |
allowUnreachableCode | 检查不可达代码;true:忽略不可达代码,false:不可达代码将引起错误 |
noEmitOnError | 有错误的情况下不进行编译,默认值:false |
初始化项目
实际开发中我们都需要使用构建工具对代码进行打包,TS同样也可以结合构建工具一起使用,今天我们以webpack为例介绍一下如何结合构建工具使用TS。
通过执行命令 npm init -y
初始化一个项目并创建package.json文件
使用tsc --init
创建ts的配置文件tsconfig.json
创建src/index.ts文件,用来编写ts代码
使用构建工具webpack
安装依赖包
npm i -D webpack webpack-cli webpack-dev-server
复制代码
-
webpack
- 构建工具webpack
-
webpack-cli
- webpack的命令行工具
-
webpack-dev-server
- webpack的开发服务器
npm i -D ts-loader typescript
复制代码
-
typescript
- ts编译器
-
ts-loader
- ts加载器,用于在webpack中编译ts文件
npm i -D html-webpack-plugin clean-webpack-plugin
复制代码
-
html-webpack-plugin
- webpack中html插件,用来自动创建html文件
-
clean-webpack-plugin
- webpack中的清除插件,每次构建都会先清除目录
配置webpack
在根目录下配置webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
// 指定入口文件
entry: "./src/index.ts",
// 开发模式使用,方便查错误
devtool: "inline-source-map",
// 配置服务器
devServer: {
contentBase: "./dist",
},
// 指定打包文件所在目录
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
environment: {
arrowFunction: false, // 关闭webpack的箭头函数,可选
},
},
// 用来设置引用模块
resolve: {
extensions: [".ts", ".js"],
},
// 配置webpack的loader
module: {
rules: [
{
test: /.ts$/,
use: {
loader: "ts-loader",
},
exclude: /node_modules/,
},
],
},
// 配置webpack的插件
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
],
};
复制代码
以上是一些基本的配置,但是在实际开发中,webpack在配置开发环境与生产环境时,配置的有些东西不太相同,所以我们应该分开写我们生产环境和开发环境的webpack配置
所以我们就在根目录下创建build文件夹存放我们的webpack配置文件
npm i -D webpack-merge
复制代码
基本配置webpack.base.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
environment: {
arrowFunction: false, // 关闭webpack的箭头函数,可选
},
},
resolve: {
extensions: [".js", ".ts"],
},
module: {
rules: [
{
test: /.ts$/,
use: [
{
loader: "ts-loader",
},
],
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
],
};
复制代码
开发环境配置webpack.dev.config.js
module.exports = {
devtool: "inline-source-map",
};
复制代码
生产环境配置webpack.pro.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
plugins: [new CleanWebpackPlugin()],
};
复制代码
配置主文件webpack.config.js
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.config");
const devConfig = require("./webpack.dev.config");
const proConfig = require("./webpack.pro.config");
module.exports = (env, argv) => {
let config = argv.mode === "development" ? devConfig : proConfig;
return merge(baseConfig, config);
};
复制代码
配置tsc
根目录下创建tsconfig.json,可以根据自己需要自行配置,详细可以参考【TS】快速上手(四)配置选项 - 编译选项compilerOptions - 掘金 (juejin.cn)
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"strict": true
}
}
复制代码
编写代码
index.ts
const box = document.querySelector('#app')
const hello: string = 'Hello YK菌'
if (box !== null) {
box.innerHTML = hello
}
复制代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TS & webpack</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
复制代码
配置命令
修改package.json添加如下配置
{
......
"scripts": {
"start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
"build": "webpack --mode=production --config ./build/webpack.config.js"
},
......
}
复制代码
在src下创建ts文件,并在并命令行执行npm run build
对代码进行编译,或者执行npm start
来启动开发服务器
npm run build
复制代码
编译
npm start
复制代码
启动开发服务器
浏览器显示内容
配置babel
除了webpack,开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器,通过以下步骤可以将babel引入到项目中。
安装依赖包
npm i -D @babel/core @babel/preset-env babel-loader core-js
复制代码
-
@babel/core
- babel 的核心工具
-
@babel/preset-env
- babel 的预定义环境
-
babel-loader
- babel 在webpack中的加载器
-
core-js
- core-js 用来使老版本的浏览器支持新版ES语法
修改配置文件
修改webpack.config.js配置文件
module: {
rules: [
{
test: /.ts$/,
use: [
{
loader: "babel-loader",
// 设置babel
options: {
// 设置预定义的环境
presets: [
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器
targets: {
chrome: "58",
ie: "11",
},
// 指定corejs的版本
corejs: "3",
// 使用corejs的方式 "usage" 表示按需加载
useBuiltIns: "usage",
},
],
],
},
},
{
loader: "ts-loader",
},
],
exclude: /node_modules/,
},
];
}
复制代码
如此一来,使用ts编译后的文件将会再次被babel处理,使得代码可以在大部分浏览器中直接使用,可以在配置选项的targets中指定要兼容的浏览器版本。