TS安装

  1. $ npm install -g typescript
  2. $ tsc -V
  3. Version 4.1.5

手动编译代码

我们使用了 .ts 扩展名，但是这段代码仅仅是 TypeScript，并不能在浏览器直接运行，需要将TypeScript转为JavaScript。
在命令行上，运行 TypeScript 编译器：

  1. tsc helloworld.ts

输出结果为一个 helloworld.js 文件，它包含了和输入文件中相同的 JavaScript 代码。

webstorm自动编译

image.png

webpack打包TS

创建相关文件

  1. localhost:ts-study cuiliang$ tree .
  2. .
  3. ├── build
  4. │   └── webpack.config.js
  5. ├── public
  6. │   └── index.html
  7. └── src
  8.     └── main.ts
  9. 3 directories, 3 files
  • 入口JS: src/main.ts ```typescript class Greeter { greeting: string; constructor(message: string){ this.greeting = message; } greet(){ return “Hello,” + this.greeting; } }

let greeter = new Greeter(“World”); alert(greeter.greet())

  2. - index页面: public/index.html
  3. ```html
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  10.     <title>webpack & TS</title>
  11. </head>
  12. <body>
  13. </body>
  14. </html>

  • webpack配置文件：webpack.config.js

    1. const path = require('path');
    2. const {CleanWebpackPlugin} = require('clean-webpack-plugin')
    3. const HtmlWebpackPlugin = require('html-webpack-plugin')
    4. module.exports = {
    5. mode: 'production',
    6. entry: './src/main.ts',
    7. module: {
    8.   rules: [{
    9.     // 对后缀是.ts的文件操作
    10.     test: /\.ts?$/,
    11.     // 利用ts-loader
    12.     use: 'ts-loader',
    13.     // 不对node_modules操作
    14.     exclude: /node_modules/
    15.   }]
    16. },
    17. output: {
    18.   filename: 'bundle.js',
    19.   path: path.resolve(__dirname, 'dist')
    20. },
    21. plugins: [
    22.   new CleanWebpackPlugin({}),
    24.   new HtmlWebpackPlugin({
    25.     template: './public/index.html'
    26.   })
    27. ],
    28. devServer: {
    29.   host: 'localhost', // 主机名
    30.   stats: 'errors-only', // 打包日志输出输出错误信息
    31.   port: 8080,
    32.   open: true
    33. },
    34. }

    npm初始化项目

    ```bash localhost:ts-study cuiliang$ npm init -y Wrote to /Users/cuiliang/WebstormProjects/ts-study/package.json:

{ “name”: “ts-study”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1” }, “keywords”: [], “author”: “”, “license”: “ISC” }

  1. <a name="Gdf3x"></a>
  2. ### 初始化ts配置文件
  3. ```bash
  4. localhost:ts-study cuiliang$ tsc --init
  5. message TS6071: Successfully created a tsconfig.json file.
  6. localhost:ts-study cuiliang$ tree .
  7. .
  8. ├── package-lock.json
  9. ├── package.json
  10. ├── public
  11. │   └── index.html
  12. ├── src
  13. │   └── main.ts
  14. ├── tsconfig.json
  15. └── webpack.config.js
  16. 3 directories, 5 files

下载依赖

  1. npm install -D typescript
  2. npm install -D webpack@4.41.5 webpack-cli@3.3.10 webpack-dev-server@3.10.2
  3. npm install -D html-webpack-plugin@4.0.0 clean-webpack-plugin@3.0.0
  4. npm install -D ts-loader

修改ts配置（tsconfig.json）

  1. // 禁用严格校验模式
  2. "strict": false,

配置打包命令（package.json）

  1. "scripts": {
  2.     "test": "echo \"Error: no test specified\" && exit 1",
  3.     "server": "webpack-dev-server --open",
  4.     "build": "npm run build"
  5.   }

运行与打包

  1. npm server
  2. npm build

image.png