TypeScript 是 JavaScript 的超集。从这张图我们可以看出，今年最热门的还是Es6，同时TypeScript也深受很多人的喜爱。另一方面，这门语言是由微软和谷歌这两大公司在背后支持。因此在未来一段时间内，TypeScript也有可能成为前端开发语言的主流。
什么是ts
首先，typescript是微软开发的一门编程语言，是JavaScript的超集，同时也遵循了es6、脚本语言规范。typescript拓展了JavaScript的语法，也添加了es6规范的语法，以及基于类的面向对象编程的特性。
Ts的优势
第一，由于支持了Es6的语法规范，在未来一段时间内也将成为了客户端脚本语言的主流；第二，强大的IDE支持，类型检查，这个特性能够减少开发的错误概率；语法提示，在IDE的编辑器中，会将类、变量、方法以及关键字都会提示出来，这也会提高开发者的效率。第三，重构，可以很方便修改变量、方法名字，IDE会将重复使用的地方重复修改掉。
Ts的搭建
在进行实际项目的时候，由于整体的架构已固定，我们应该考虑的是在架构的基础上去配置typescript，那如何通过webpack去实现typescript的接入呢，接下来我们来看下实现的过程。
1. 项目配置webpack
webpack，可以说是现在前端最主流的构建工具。使用webpack4以上版本来构建，命令如下。
npm install --save-dev webpack webpack-clinpm install --save-dev typescript ts-loader复制代码
2. 创建tsconfig.json
指定了用来编译这个项目的根文件和编译选项。compilerOptions指编译选项,可以被忽略，include指定编译器包含哪些typescript文件。
{ "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "module": "es2015", "target": "es5", }, "include": [ "./src/**/*" ] } 复制代码 3. 创建webpack.config.js
webpack的配置文件。在这文件里面，包含了入口文件，出口路径与出口文件，配置typescript的编译等所有的配置项，是程序最先读取文件。
const path = require('path'); module.exports = { entry: './src/index.ts', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: [ '.tsx', '.ts', '.js' ] } }; 复制代码 4. 编写ts的类
当架构好了typescript所依赖的配置文件以及整体架构的配置之后,我们需要编写一个属于typescript的类来进行验证。
class Person{ name: string; sex: string; constructor () { this.name= "Eknow"; this.sex= "boy"; }; intro() { return "My name is " + this.name+ ", i'm a " + this.sex ; }}let person = new Person();console.log( person.intro() ); 复制代码 5. 添加npm run dev命令
当我们安装webpack之后，我们可以默认使用webpack xx.js文件来进行编译。为了更简洁的运行命令，我们可以在package.json文件里面的script属性添加如下代码。
"scripts": { "dev": "webpack --config webpack.config.js" },复制代码 6. 执行命令
当我们需要进行运行项目时，只需要在cmd面板上输入npm run dev即可，
运行之后会出现日志提示信息，通知是否运行成功。以下是成功后的日志信息。
运行成功之后，打开调试工具，证明通过webpack成功接入了typescript这一语言了。
结语
以上便是对typescript的一些介绍以及基本的项目配置。目前，typescript已经被很多的企业接入到产品项目里面，这也说明了它未来的舞台地位。我们不妨慢慢地将它接入到我们自己熟悉的脚手架项目里面，学习体验下它存在的价值。
▼更多精彩内容，请长按二维码▼