Typescript [ 环境搭建 ]

前言

Typescript 相对于今天的前端来讲，可能相当主要了吧，由于我一直在用 Javascript , 所以对 ts 并不是太感冒，看了相关各种文章都是说的种种好，忍不住了 ~ biu ~

简单来说：ts 是 Js 的超集，它扩展了 js 并且添加了类型，还有一个很大的优点就是 ts 完全兼容 Js, 在 ts 文件中可以直接编写 Js 代码。好了，废话不多说，进入主题

环境搭建 [ ts ]

首先呢，要想使用 ts 来进行开发，是不阔以的，因为浏览根本识别不了 ts ，只能识别 Js，因此在学习 ts 之前，我们需要先搭建 ts 环境，说白了，就是如何将 ts 编译成 Js， 然后才能在浏览器端运行

首先需要安装 node ，需要用里边的 npm 包安装工具，在这里我就不多介绍了，大家基本都是 vue，react 脚手架开发高手，这个东西应该是很普遍了

然后安装 ts 解析编译器

npm install -g typescript

ok， 可以了上手练练 ts 了，按照如下结构创建一个目录结构，当然你页可以自定义结构

// 目录结构
typescript 
--- src
    --- demo.ts

这里我只创建了一个 demo.ts 文件，为的就是演示一下纯 ts 的开发环境，接下来，随便编写一些代码

console.log("hello ts")

重点 看起来没什么不一样哈，一句 console 跟 Js 没什么区别，别着急，这是 ts 文件，我们该如何来识别 ts 才是关键，下面我们需要一个 ts 的配置文件 tsconfig.json

更新目录

// 目录结构
typescript 
--- src
    --- demo.ts
    --- tsconfig.json

这个文件有点类似于 webpack 中 webpack.config.js 文件，默认的名字，它会被 typescript 编译器所执行，截个图看一下吧，在根目录下执行 tsc 命令

tsconfig.json 后缀是 json，那么就是一个对象，我们暂时就编写内容 {}，好了，离起飞只差一步了

最后在根目录下执行 tsc "./src/demo.ts" 进行编译，则会生成一个编译后的 demo.js 文件，这个 demo.js 文件就可以运行在浏览器中了。

更新编译后目录

// 目录结构
typescript 
--- src
    --- demo.ts
    --- demo.js
    --- tsconfig.json

简单的说了一下纯 ts 如何进行开发和编译，那有的童鞋可能会说写一个 ts 文件就需要手动编译一下，其实不然，在根目录直接运行 tsc 可以一次性编译目录下的所有 ts 文件。

环境搭建 [ webpack ]

webpack 环境搭建可能是市面比较常见的了，因为现在大家都是脚手架工程开发，其实也比较简单，跟着我一步一步来，对于 webpack 不了解的童鞋可以查看我的相关文章，全家桶系列 查看

第一步，我首先们创建一个目录 webpack-ts 来作为 webpack 工程根目录, 然后初始化一下工程，执行命令

npm init -y

这个时候会在根目录下生成 package.json ，主要的作用就是依赖管理

第二步，然后安装一下需要的开发依赖，在根目录执行如下命令

• webpack
• webpack-cli
• typescript ts 编译器
• ts-loader 解析 ts 的loader

npm i -D webpack webpack-cli typescript ts-loader

这个时候会在根目录生成 node_modules , 同时会安装上述依赖包

第三步，根目录下创建 webpack.config.js 配置文件，并编写以下配置内容

// 引入一个包
const path = require('path');

//webpack 中所有的配置信息都应该写在module.exports中
module.exports = {

   // 指定环境
    mode:"production",

    // 指定入口文件
    entry: "./src/index.ts",

    // 指定打包文件所在目录 
    output: {
      //指定打包文件的目录
      path: path.resolve(__dirname, 'dist'),
      //打包后文件的名字
      filename: "bundle.js",
    },
    
    //指定webpack打包时要使用的模块
    module: {
      rules: [
        {
          test: /\.ts$/, //以ts结尾的文件
          use: 'ts-loader',
          // 要排除的文件
          exclude: /node-modules/
        }
      ]
    }，
    
    // 用来配置引用模块，可以将这些文件识别为模块
    resolve: {
        extensions: ['.ts', '.js']
    }
}

只配置 webpack.config.js 还不行，因为我们主要要使用 ts ，所以还得需要一个 tsconfig.json 文件

第四步，根目录下创建 tsconfig.json 与 webpack.config.js 同级，并编写以下内容

// 具体配置信息什么意思，先不去关注，稍后我会出一篇关于 tsconfig.json 的文章 
{
  "compilerOptions":{
    "target":"ES2015",  // ts编译的es版本
    "module":"ES2015", // 指定的模块化
    "strict":true  // 是否是严格模式 
  }
}

ok，截至到这里，基本结构和配置都已经差不多了，我们来看一下此时的目录结构

webpack-ts
--- src  // 自加
--- node_modules
--- package.json
--- tsconfig.json
--- webpack.config.js

接下来就可以打包实践一下了，在 src 目录下编写一个 index.ts 文件，随便写几句代码，然后在 package.json 中添加一个打包命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" // 打包命令
 }

根目录下执行 npm run build 会发现自动生成了一个 dist 目录，目录下生成了一个 bundle.js

这些是webpack的知识点，不太清楚的请参考我的webpack相关文章 查看 或者查看下一篇文章，有相关配置 ts快速入门

结语

截至到这里，分享了两种关于 ts 的环境搭建方式，基于 webpack 的已经可以正常编译和打包，剩下的就需要webpack 相关配置了 ，如：启动项目命令，webpack-dev-server 热更新，打包自动生成index.html 模板等等

后边我会基于webpack创建的工程，来进行 ts 语法的分享

最后附上 tsconfig.json 的常用的相关配置

{
  /* 
      tsconfig.json 是ts编译器的配置文件，ts编译器可以更具它的信息来对代码进行编译
      "include" 用来表示指定哪些ts文件需要被编译
      路径；
          *表示任意文件，
          **表示任意目录
      "exclude" 用来表示不需要被编译的文件目录
              默认值：{"node_modules", "bower_components", "jspm_packages"}
  */
      "include": [
          "./src/**/*"
      ], 
      
      // "exclude": [
      //     "./src/hello/**/*"
      // ]
  
      //compilerOptions 编译器的选项 
      "compilerOptions": {
          //target 用来指定ts被编译为ES的版本
          //'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'.
          "target": "ES2015",
  
          //module 指定要使用的模块化的规范
          //'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'
          "module": "es2015",
          
          //lib 用来指定项目所用的库
          // 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext', 'dom', 
          // 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection', 
          // 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include',
          //  'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 
          // 'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.promise', 
          // 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl',
  
  
          //outDir 用来指定编译后文件所在的目录
          "outDir": "./src/dist",
  
          //outFile 将代码合并为一个文件
          // "outFile": "./dist/app.js",
  
          // 是否对js文件进行编译，默认是false
          "allowJs": false,
  
          // 是否检查js代码是否符合语法规范，默认值是false
          "checkJs": true,
  
          // 是否移除注释
          "removeComments": true,
  
          // 不生成编译后的文件
          "noEmit": false,
  
          // 当有错误时不生成编译文件
          "noEmitOnError": true,
  
          // 所有严格检查的总开关
          "strict": true,
  
          // 用来设置编译后的文件是否使用严格模式，默认是false
          "alwaysStrict": true,
  
          // 不允许隐式的any类型
          "noImplicitAny": true,
  
          // 不允许不明确类型的this
          "noImplicitThis": true,
  
          // 严格检查空值
          "strictNullChecks": true
  
      }
  }