崭露头角的typeScript

TypeScript 是 JavaScript 的超集。从这张图我们可以看出，今年最热门的还是Es6，同时TypeScript也深受很多人的喜爱。另一方面，这门语言是由微软和谷歌这两大公司在背后支持。因此在未来一段时间内，TypeScript也有可能成为前端开发语言的主流。

 

TypeScript的介绍

首先，typescript是微软开发的一门编程语言，是JavaScript的超集，同时也遵循了es6、脚本语言规范。typescript拓展了JavaScript的语法，也添加了es6规范的语法，以及基于类的面向对象编程的特性。相对于弱类型的JS而言，它形成了对组件的定义以及代码规范的约束，可以更好解决难以维护的难题。

TypeScript的优势

第一，由于支持了Es6的语法规范，在未来一段时间内也将成为了客户端脚本语言的主流；第二，强大的IDE支持，类型检查，这个特性能够减少开发的错误概率；语法提示，在IDE的编辑器中，会将类、变量、方法以及关键字都会提示出来，这也会提高开发者的效率。第三，重构，可以很方便修改变量、方法名字，IDE会将重复使用的地方重复修改掉。

Ts的搭建

在进行实际项目的时候，由于整体的架构已固定，我们应该考虑的是在架构的基础上去配置TypeScript，那如何通过webpack去实现TypeScript的接入呢，接下来我们来看下实现的过程。

• 1. 项目配置webpack
  webpack，可以说是现在前端最主流的构建工具，使用webpack4以上的项目版本来构建，在项目里面配置
  webpack以及TypeScript，命令如下。

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的编译等所有的配置项，是程序最先读取的webpack文件。

 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的类
  当架构好了ts所依赖的配置文件以及整体架构的配置之后，我们需要编写一个属于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已经被很多的企业接入到产品项目里面，这也说明了它未来的舞台地位。我们不妨慢慢地将它接入到我们自己熟悉的脚手架项目里面，学习体验下它存在的价值。