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/库名 的方式进行下载引入库的类型文件。(如图)