[JavaScript知识库]typescript学习笔记（一）

tsconfig.json 配置项

用于设置typescript编译配置；根目录下创建 tsconfig.json 之后（即使是空配置项），就可以使用 tsc -w 监控根目录下所有的 .ts 文件，即时生成对应的 .js 文件。常用配置项：

1. include 指定需要编译的 ts 文件所在的路径，** 指定任意文件夹 ，* 指定任意文件。
   示例： "include":["./src/**/*","./components/**/*"]
2. exclude 指定编译时排除的路径
   默认值 ["node_modules","bower_components","jspm_packages"]
   示例： "exclude":["./src/hello/*","./.umi/**/*"]
3. extends 定义被继承的配置文件
   示例： "extends":"./config/base"
4. files 指定被编译文件列表，只有需编译文件少时才用到
   示例： "files":["core.ts","sys.ts","types.ts"]
5. compilerOptions 重要设置
   示例： "compilerOptions":{"target":"es3"}
   子配置项包括：
   任意配置子项，都可以先设置一个错误选项，然后通过编译时错误提示选择合适的配置项目值。

• target 指定ts被编译为es的版本，取值可以是："es3","es5","es6","es2015","es2016","es2017","es2018","es2019","es2020","esnext"
  示例："target":"es2015",
• module 指定模块化要遵循的规范，取值可以是："none","commonjs","and","system","amd","umd","es6","es2015","es2020","esnext"
  示例："module":"es2015",
• lib 指定项目使用的库，默认值是支持浏览器环境
  示例："lib":["dom"],
• outDir 指定编译后文件存放路径，ts文件和js文件是一对一
  示例："outDir":"./dist",
• outFile 指定编译所有ts文件合并成一个js文件时该js文件存放路径
  示例："outDir":"./dist/app.js",
• allowJs 是否对js文件进行编译，默认值是 false
  示例："allowJs":true,
• checkJs 是否检查js代码符合ts规定的语法规范，默认值是 false
  示例："checkJs":true,
• removeComments 是否移除注释，默认值是 false
  示例："removeComments":true,
• noEmit 是否不生成编译后的文件，默认值是 false ，用于仅检测ts语法，不生成js的场合
  示例："noEmit":true,
• noEmitOnError 编译错误时是否不生成编译后的文件，默认值是 false
  示例："noEmitOnError":true,

语法检查类配置项

• alwaysStrict 编译后的js文件是否使用严格模式，默认值 false
  注意：如果代码中有 export import 语句，默认就是js代码的严格模式，就不需要再设置该配置子项了
  示例："alwaysStrict":true,
• noImplicitAny 禁止隐式的any是否开启，默认值 false
  示例："noImplicitAny":true,
• noImplicitThis 禁止隐式的this是否开启，默认值 false
  示例："noImplicitThis":true,
• strictNullChecks 严格空值检查是否开启，默认值 false
  示例："strictNullChecks":true,
• strict 严格检查总开关，默认值 false ，如果设置 strict 为 true，上边四项就可以不用设置了；设为 false，上边四项都是 false 。
  示例："strict":true,

webpack打包ts代码

环境搭建 npm i webpack webpack-cli typescript ts-loader

1. 根目录下创建 webpack.config.js 配置文件

const path = require('path')
// webpack 所有配置信息都要写到 module.exports 中
module.exports = {
	// 指定入口文件
	entry: "./src/index.ts",
	// 指定打包后文件所在目录
	output:{
		// 指定打包后文件的目录
		path: path.resolve(__dirname,"dist"),
		// 打包后文件名
		filename: "bundle.js",
	},
	// 指定webpack打包时要使用的模块
	module:{
		// 指定要加载的规则
		rules:[
			{
				// 指定当前规则生效的文件
				test: /\.ts$/,
				// 要使用的loader
				use: 'ts-loader', 
				// 指定要排除的文件
				exclude: /node_modules/,
			},
		],
	},
};

2. 根目录下创建 tsconfig.json

{
	"compilerOptions":{
		"module":"es2015",
		"target":"es2015",
		"strict":true,
	}
}

3. package.json 中配置

"scripts": {
	// ...
	"build":"webpack"	
}

4. 执行 npm run build 命令完成打包

webpack 打包生成 index.html

1. 安装包 npm i -D html-webpack-plugin
2. 修改 webpack.config.js

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
// webpack 所有配置信息都要写到 module.exports 中
module.exports = {
	// ... 前边的配置同上
	// 配置webpack插件
	plugins:[
		new HTMLWebpackPlugin(), // 使用插件默认的html模板
		/* new HTMLWebpackPlugin(options:{
			title: "这是自定义标题",
		}), // 使用插件默认的html模板，自定义了标题 */
		/* new HTMLWebpackPlugin(options:{
			template: "./src/index.html",
		}), // 使用自定义html模板 */
	],
};

webpack打包后实时查看代码变动

1. 安装包 npm i -D webpack-dev-server
2. 修改 package.json

"scripts": {
	// ...
	"start":"webpack server --open chrome.exe"
}

3. 执行 npm start

webpack打包时清空dist目录

1. 安装包 npm i -D clean-webpack-plugin
2. 修改 webpack.config.js

// ...
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// webpack 所有配置信息都要写到 module.exports 中
module.exports = {
	// ... 前边的配置同上
	// 配置webpack插件
	plugins:[
		// ... 同上
		new CleanWebpackPlugin(),
	],
};

webpack打包ts文件时如果包含import/export代码时报错

修改 webpack.config.js

// ... 配置同上
module.exports = {
	// ... 前边的配置同上
	// 设置引用模块，即代码中可以import export 的文件类型有哪些
	resolve: {
		extensions: ['.js','.ts'],
	},
};

webpack打包ts代码成指定版本的js代码

1. 安装包 npm i -D @babel/core @babel/preset-env babel-loader core-js
2. 修改 webpack.config.js

// ... 配置同上
module.exports = {
	// ... 配置参考上边
	output: {
		path: path.resolve(__dirname,"dist"),		
		filename: "bundle.js",
		// 为了兼容ie11等不支持箭头函数的浏览器
		// 若没有此配置项，生成的js代码会类似： (()=>{...})()
		// 在ie11中运行就会报错，包含了ie11无法理解的箭头函数
		environment: {
			arrowFunction: false,
		},
	},
	// ...
	// 指定webpack打包时要使用的模块
	module:{
		// 指定要加载的规则
		rules:[
			{
				// 指定当前规则生效的文件
				test: /\.ts$/,
				// 要使用的loader，有多个时，使用数组，
				// 执行时先使用后边的loader，由后到前
				use: [
					// 配置babel
					{
						// 指定加载器
						loader: 'babel-loader',
						// 设置babel
						options: {
							// 设置预定义的环境
							presets: [
								[
									// 指定环境插件
									"@babel/preset-env",
									// 配置信息
									{
										// 要兼容的浏览器
										targets: {	
											// 浏览器:版本										
											"chrome": "88", 
											"ie": "11",											
										},
										// 指定corejs的版本
										"corejs": "3",
										// 指定使用corejs的方式
										"useBuiltIns": "usage", // 按需加载
									},
								],
							],
						},
					},
					'ts-loader',					
				], 
				// 指定要排除的文件
				exclude: /node_modules/,
			},			
		],
	},
};