TypeScript的作用：
- 代码不够规范时，会及时给与我们提示，可以让我们更严谨、规范的书写代码.
- 类型检查严格，减少编程中的低级错误出现.
- 提高我们代码的可维护性。
写一段ts代码
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return 'hello' + this.greeting;
}
}
let greeter = new Greeter('小橙子');
let button = document.createElement('button');
button.textContent = '点我';
button.onclick = function() {
alert(greeter.greet());
}
document.appendChild(button);
把上方代码放到浏览器控制台直接运行，我们可以看到是会报错的，浏览器默认不支持这种语法：
所以我们需要借助webpack进行打包翻译为浏览器识别的JS代码。
TypeScript的打包配置
看一个demo: (目录结构如下)
|--ts
|--src
|--index.ts
|--node_modules
|--package-lock.json
|--package.json
|--webpack.config.js
src/index.ts文件：
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return 'hello' + this.greeting;
}
}
let greeter = new Greeter('小橙子');
console.log(greeter.greet());
打包配置： webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: {
main: './src/index.ts'
},
module: {
rules: [{
test: /\.ts?$/,
use: 'ts-loader', // 借助ts-loader依赖进行打包
exclude: /node_modules/ // 除node_modules文件夹下之外的以.ts结尾的文件
}]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
}
- 打包TypeScript代码时，我们需要借助 ts-loader 依赖工具进行打包
- exclude: /node_modules/ 指的是除node_modules文件夹下以外的以.ts结尾的文件，才使用ts-loader做转译。（因为node_modules下的 js 文件已经做好了转译的处理）
package.json里配置scripts打包方式：
"scripts": {
"build": "webpack"
}
执行打包：
npm run build
此时命令行会报错：
报错信息为：tsconfig.json文件为空！
注： 这告诉我们一个信息，在借助ts-loader打包处理TS的时候，它会依赖一个配置文件，叫做 tsconfig.json文件 ，在此文件中写一些配置参数。具体如下:
tsconfig.json：（在demo的根目录下新建一个tsconfig.json文件）
{
"compilerOptions": { // 编译的配置项
"outDir": "./dist", // 借助ts-loader打包后的js文件放到dist目录下
"module": "es6", // 指的是在ts文件里，我们使用的是es模块的方式进行引入的
"target": "es5", // 打包转译成es5语法
"allowJs": true // 在ts文件里允许引入一些其他的js文件
}
}
写好配置参数后，再次打包：
npm run build
然后我们把打包后的代码，复制到浏览器控制台中，按回车执行，会正确打印出hello 小橙子信息：（如图）
到此，webpack就可以完整的实现对TS的打包啦~
——————— ?————————
知识补充
在ts文件中使用lodash时，很多时候默认并不会报语法错误。我们可以借助 @types/lodash类型文件 进行识别，帮助我们提升编码效率。
我们稍微改写下上方demo中的index.ts中的代码：
import _ from 'lodash'; // 引入lodash库
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return _.join(null, '') // 使用lodash中的join方法
}
}
let greeter = new Greeter('小橙子');
console.log(greeter.greet());
安装lodash:
npm i lodash -D
安装完成之后，观察我们书写的代码并无异常。
接下来安装@types/lodash：
npm i @types/lodash -D
安装之后，再去看ts文件中的代码：
很明显，此时代码里有错误提示了。鼠标移入标红部分，会提示我们在ts文件里，引入lodash文件时，不能使用图中的方式引用了，而要改成：
import * as _ from 'lodash'; // 这才是正确的引入方式
这样我们在写代码时，就能快速的定位问题，以便我们解决问题。
注： 同理，当我们在ts中引入其他库时，也要安装对应的类型文件，以便我们错误代码的排查。
如何定位引入库相对应的类型文件？
分享一个较好的方法 ?
- 打开github. 搜索types:
- 点击进入上图中的第二项目，下拉找到TypeSearch项：
- 进行库名字的搜索，如果出现相对应的库信息，就可以使用 @types/库名 的方式进行下载引入库的类型文件。（如图）
