崭露头角的typeScript首先，typescript是微软开发的一门编程语言，是JavaScript的超集，同时也遵

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-cli
npm 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已经被很多的企业接入到产品项目里面，这也说明了它未来的舞台地位。我们不妨慢慢地将它接入到我们自己熟悉的脚手架项目里面，学习体验下它存在的价值。

▼更多精彩内容，请长按二维码▼