环境搭建

  • 须要下载安装Node.js

  • npm全局装置typescript

    • npm i typescript -g

简略应用

  • 创立后缀为 .ts 的文件

  • 编译文件

    • 单个文件：

      • 编译：tsc xxx.ts
      • 继续监督：tsc xxx.ts -w 代表始终监督这个文件，批改这个文件中的代码后主动编译文件，然而只会监督这一个文件

    • 多个文件：须要先创立一个叫tsconfig.json的文件，哪怕是一个空的也能够

      • 编译：tsc
      • 继续监督：tsc -w或者tsc --watch

      • tsconfig.json罕用配置：这个配置咱们既能够手动新建也能够通过命令实现，命令是tsc --init

        /*    tsconfig.json是ts的编译器的配置文件，ts编译器能够依据它的信息来对代码进行编译        - "include": 用来指定哪些ts文件须要编译            - ** 示意任意目录            - * 示意任意文件        - "exculde": 用来指定哪些不须要编译的            - 有默认值：["node_modules","bower_components","jspm_packages"]            - 额定排除的话和include一样的应用形式        - "extends"：定义被继承的配置文件        - "files"：指定被编译的文件的列表，只有须要编译的文件少时才会用到        - "compilerOptions"：编译器的配置*/{    "include": [        "./src/**/*"    ],    "compilerOptions": {        // target：用来指定咱们ts编译成什么版本的js        "target": "ES3",        // module：指定要应用的模块化的标准        "module": "ES6",        // lib：用来指定我的项目中要应用的库，一般来说不须要改        // "lib": []                // outDir：指定编译后文件缩放的目录        "outDir": "./dist/js",        // outFile：将代码合并成一个文件        // "outFile": "./dist/js/app.js"        // allowJs：是否对js文件进行编译，默认是false        "allowJs": false,        // checkJs：是否查看js代码是否合乎语法标准，默认是false        "checkJs": false,        // removeComments：是否移除正文,默认false        "removeComments": false,        // noEmit：不生成编译后的文件，编译其实执行了，然而就是不生成最初的文件，多用于查看下语法，其余用的不多，默认false        "noEmit": false,        // noEmitOnError：当有错的时候不生成编译后的文件，默认false        "noEmitOnError": true,        // 所有严格模式的中开关        "strict": false,        // alwaysStrict：编译后是否应用严格模式，默认为false        "alwaysStrict": false,        // noImplicitAny：不容许隐式的应用any,默认false        "noImplicitAny": true,        // noImplicitThis：不容许不明确的this，默认false        "noImplicitThis": false,        // strictNullChecks：严格查看空值，默认false        "strictNullChecks": false    }}

webpack中应用ts

  • package.json中配置

    {"name": "ts2","version": "1.0.0","description": "","main": "index.js","scripts": {  "test": "echo \"Error: no test specified\" && exit 1",  "build": "webpack",  "dev": "webpack serve"},"author": "","license": "ISC","devDependencies": {  "@babel/core": "^7.17.7",  "@babel/preset-env": "^7.16.11",  "babel-loader": "^8.2.3",  "clean-webpack-plugin": "^4.0.0",  "core-js": "^3.21.1",  "html-webpack-plugin": "^5.5.0",  "ts-loader": "^9.2.8",  "typescript": "^4.6.2",  "webpack": "^5.70.0",  "webpack-cli": "^4.9.2",  "webpack-dev-server": "^4.7.4"}}

  • webpack.config.js中配置

    // 引入node的门路辨认模块const { resolve } = require('path')// 引入html主动生成插件const HtmlWebpackPlugin = require('html-webpack-plugin')// 引入每次打包前先革除上一次打包后果的插件const { CleanWebpackPlugin } = require('clean-webpack-plugin')module.exports = {  // 配置入口文件  entry: './src/index.ts',  // 配置输入文件  output: {      path: resolve(__dirname,'dist'),      filename: 'built.js',      // 配置打包环境的      environment: {          // 通知webpack别应用箭头函数          arrowFunction: false      }  },  module: {      // 配置webpack对模块的打包规定      rules: [          {              // 配置对ts文件的打包编译规定              test: /\.ts$/,              use: [                  // 配置babel                  {                      loader: 'babel-loader',                      // 设置babel                      options: {                          // 配置预约义的环境                          presets: [                              [                                  // 指定环境的插件                                  "@babel/preset-env",                                  // 配置信息                                  {                                         // 要兼容的指标浏览器                                      targets: {                                          "chrome": "88",                                          "ie": "11"                                      },                                      // 指定corejs的版本                                      "corejs": "3",                                      // 应用corejs的形式。 "usage"示意按需加载                                      "useBuiltIns": "usage"                                  }                              ]                          ]                      }                  },                  'ts-loader'              ],              exclude: /node_module/          }      ]  },  plugins: [      // 革除上一次的打包的文件夹      new CleanWebpackPlugin(),      // 打包后的文件夹中主动生成一个index.html文件      new HtmlWebpackPlugin({          // 依照这个index.html文件去生成          template: './src/index.html'      })  ],  // 设置打包的环境  mode: "development",  // 批改文件自动更新  devServer: {      // 主动关上浏览器      open: true  },  resolve: {      extensions: ['.js','.ts','json']  }}

  • tsconfig.js中配置

    {  "compilerOptions": {      "module": "ES2015",      "target": "ES2015",      "strict": true  }}