"高级拓展语言"TypeScript

前言：

javaScript是一门很灵活的编程语言，几乎可以编写很多功能，但是JS在规范上却没那么严格统一，就好比十个人看哈姆雷特，就会出现十个不同哈姆雷特一样，我们不能确保每个人写JS的代码风格一样，维护性也不高；所以一般企业都是有自己一套写代码的规范，或者干脆使用TS来写代码，所以看来TS的好处 ↓

TypeScript：

TS是微软推行出的一个进阶编码语言，其实微软就是将JS存在的问题弥补，首先它势必要有自己一套规范的格式编写风格，当然他也是支持原生JS的写法，只是新增了一些类似于ES6一样的拓展特性来管理原生JS而已；其次就是代码规范提示功能，他有想Eslint类型的规范提示功能，如果不按照它的规范规定写代码就会报错的，但没有Eslint那么严格，还是可以接受的；最后关于TS说是新一代的变成语言也是不为过的，它带来的不仅仅是规范标准让代码维护性提高，最重要是它里面的特性，比如Class类（在继承方面，原生JS是没有像其他java，C语言一样的类的，这也是它的不足之处），作用域（说到作用域，在JS中其实是不存在的，平时我们说的作用域，其实是Function函数内部的域而已，脱离了函数根本就没有像java一样的作用域），这两个特性足以提高了TS的档次，后续博主可以更新一下关于TS的专栏知识点，大家也可以通过查阅文档或者逛逛社区去深入一下TS语言吧 ~

webpack对TS的打包支持

预备：

既然TS那么火热，但是浏览器占时是不识别TS语言的，就像ES6一样，他也需要通过webpack结合一下翻译器将TS代码转换成浏览器可以识别的语言，那我们开始吧 ↓

开始：

因为是这篇是单独说TS的打包支持的所以我们新建一个文件夹演示这个demo，同 【webpack】新的起航23 – 使用Library打包一个库 一样的新建流程这里就不多叙述

基本配置完成后（初始化生成package.json并且安装完webpack webpack-cli）：

我们新建src > index.tsx，生成一个TS的文件，如果你不会写TS代码可以通过官网一样有自带的转换器的（这个功能就很好跟babel官网一样，赞~）

TypeScript官网： http://www.typescriptlang.org/

index.tsx：

class Greeter {greeting: string;constructor(message: string){this.greeting = message;}greet(){return 'Hello, ' + this.greeting;}
}let greeter  = new Greeter("world");
let button = document.createElement('button');
button.textContent = 'Say Hello';
button.onclick = function(){alert(greeter.greet());
}document.body.appendChild(button);

这里可能会出现不识别开发工具不识别TS，这里博主使用的是vsCode开发工具，也顺便说一下如何解决，首先去扩展工具中（快捷键ctrl + shift + x）搜索ts，看是否安装了TS检查代码工具 ↓

如果没有就把它安装到你的开发工具中去，此时再次进入index.tsx，一般就会自动识别了，但可能还会有报错，此时我们在index.tsx中按F1输入tyepscript，按照下面图示做就可以解决识别问题了 ↓

完成TypeScript的代码编写，此时我们去配置webpack：

webpack.config.js:

此时就需要一个loader来去编译tsx/ts结尾的TS代码文件打包，ts-loader登场

const path = require('path'); module.exports = {mode: 'production',entry: './src/index.tsx',module:{rules:[{test: /\.(tsx|ts)$/,exclude: /node_modules/,loader: 'ts-loader'}]
},output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')}
}

安装 ts-loader（注意还要安装一下typescript 库）：

npm install ts-loader typescript --save-dev

配置完成，打包npm run build编译：

此时可能会有报错，提示你需要配置一个tsconfig.json ，如果你在开发工具识别TS问题，已经点击了那个Go to Project Configuration的话，他就会自动生产这个tsconfig.json的文件，如果你测试项目中没有的话，就手动新建，添加下面的内容即可 ↓

tsconfig.json:

{"compilerOptions": {"module": "commonJS","target": "es2016","jsx": "preserve"},"exclude": ["node_modules","**/node_modules/*"]
}

此时重新运行npm run build 就不会报错了，关于更多tsconfig.json的配置可以看官方文档 → tsconfig.json

完成检测：

此时我们可以复制打包好的ts压缩代码，粘贴到浏览器的控制台，回车如果输出了true说明，打包翻译typescript成功，撒花~

TypeScript中使用其他库

关于上面的ts配置识别等都基本完成了，此时有一个问题，就是如果我们在ts中使用其他第三方插件库时，会发现并不会检测这些库对应的代码编写提示和报错，怎么处理呢？ ↓

Lodash库为例：

解决：

安装 npm install @types/lodash --save-dev，这个工具库就是让ts中能识别lodash的提示及报错的库，安装好之后，我们重新打开index.tsx，此时为下图：↓

同样如果你在ts中用到jquery，或者框架中使用ts，如Angular，Vue 这样的框架，都可以安装对应的识别工具库，这些库都可以在 npm仓库上 找到的 或者 在TypeSearch 中搜索也行

结语

简单回顾一下，关于TS在webpack中的配置编译，首先我们解决了TS在开发工具中的识别检测问题，其次我们安装了ts-loader编译我们写的ts代码，然后还需要额外配置一个tsconfig.json的配置文件让webpack打包成功，最后拓展了在TS中如何使用第三方插件库及其报错提示

更多关于webpack对TS的配置可以看官方文档 → Typescript，及其第三方插件库的提示报错识别这些定义可以在 TypeSearch 中找到

#下一篇【配置webpackDevServer实现请求转发~】