1.typescript編譯和TypeScript的運行環(huán)境搭建

認識TypeScript

TypeScript是擁有類型的JavaScript超集，它可以編譯成普通、干凈、完整的JavaScript代碼。

怎么理解上面的話呢？

  • 我們可以將TypeScript理解成加強版的JavaScript。
  • JavaScript所擁有的特性，TypeScript全部都是支持的，并且它緊隨ECMAScript的標準，所以ES6、ES7、ES8等新語法標準，它都是支持的；
  • 并且在語言層面上，不僅僅增加了類型約束，而且包括一些語法的擴展，比如枚舉類型（Enum）、元組類型（Tuple）等；
  • TypeScript在實現(xiàn)新特性的同時，總是保持和ES標準的同步甚至是領(lǐng)先；
  • 并且TypeScript最終會被編譯成JavaScript代碼，所以你并不需要擔心它的兼容性問題，在編譯時也不需要借助于Babel這樣的工具；
  • 所以，我們可以把TypeScript理解成更加強大的JavaScript，不僅讓JavaScript更加安全，而且給它帶來了諸多好用的好用特性；

TypeScript的特點

始于JavaScript，歸于JavaScript

  • TypeScript從今天數(shù)以百萬計的JavaScript開發(fā)者所熟悉的語法和語義開始。使用現(xiàn)有的JavaScript代碼，包括流行的JavaScript庫，并從JavaScript代碼中調(diào)用TypeScript代碼；
  • TypeScript可以編譯出純凈、 簡潔的JavaScript代碼，并且可以運行在任何瀏覽器上、Node.js環(huán)境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中；

TypeScript是一個強大的工具，用于構(gòu)建大型項目

  • 類型允許JavaScript開發(fā)者在開發(fā)JavaScript應(yīng)用程序時使用高效的開發(fā)工具和常用操作比如靜態(tài)檢查和代碼重構(gòu)；
  • 類型是可選的，類型推斷讓一些類型的注釋使你的代碼的靜態(tài)驗證有很大的不同。類型讓你定義軟件組件之間的接口和洞察現(xiàn)有JavaScript庫的行為；

擁有先進的 JavaScript

  • TypeScript提供最新的和不斷發(fā)展的JavaScript特性，包括那些來自2015年的ECMAScript和未來的提案中的特性，比如異步功能和 Decorators，以幫助建立健壯的組件；
  • 這些特性為高可信應(yīng)用程序開發(fā)時是可用的，但是會被編譯成簡潔的ECMAScript3（或更新版本）的JavaScript；

TypeScript的編譯

TypeScript最終會被編譯成JavaScript來運行，如何將其編譯成JavaScript?

    1. 我們可以在電腦上安裝TypeScript包，這樣就可以通過TypeScript的Compiler將其編譯成JavaScript；
  • 2.我們也可以借助bable的插件@babel/preset-typescript將其編譯成JavaScript;
    具體步驟參考https://www.babeljs.cn/docs/babel-preset-typescript
    image.png
下面是通過TypeScript的Compiler將其編譯成JavaScript的步驟

全局安裝typescript

npm install typescript -g

查看typescript版本

tsc --version

編寫ts文件math.ts

function sum(a: number, b: number) {
  return a + b;
}
console.log(sum(1, 4));

打開終端，進入math.ts所在目錄,使用tsc把ts文件編譯成js文件,

tsc math.ts

會發(fā)現(xiàn)在當前目錄下生成了一個math.js文件

function sum(a, b) {
    return a + b;
}
console.log(sum(1, 4));
image.png

TypeScript的運行環(huán)境搭建

如果我們每次為了查看TypeScript代碼的運行效果，都通過經(jīng)過兩個步驟的話就太繁瑣了：

  • 第一步：通過tsc編譯TypeScript到JavaScript代碼；
  • 第二步：在瀏覽器或者Node環(huán)境下運行JavaScript代碼；

是否可以簡化這樣的步驟呢？

  • 比如編寫了TypeScript之后可以直接運行在瀏覽器上？
  • 比如編寫了TypeScript之后，直接通過node的命令來執(zhí)行？

上面我提到的兩種方式，可以通過兩個解決方案來完成：

  • 方式一：通過webpack，配置本地的TypeScript編譯環(huán)境和開啟一個本地服務(wù)，可以直接運行在瀏覽器上；
  • 方式二：通過ts-node庫，為TypeScript的運行提供執(zhí)行環(huán)境；

使用ts-node搭建ts環(huán)境

ts-node作用：把執(zhí)行的ts文件的內(nèi)容編譯成js,然后直接在node環(huán)境執(zhí)行。不會單獨生成一個js文件
安裝ts-node

npm install ts-node -g

另外ts-node需要依賴 tslib 和 @types/node 兩個包：

npm install tslib @types/node -g

現(xiàn)在，我們可以直接通過 ts-node 來運行TypeScript的代碼：

ts-node math.ts
image.png

使用webpack搭建ts環(huán)境

1.調(diào)整項目目錄和文件內(nèi)容，并執(zhí)行npm init自動生成 package.json文件

image.png

./src/main.ts

import { sum } from "./math";

console.log(sum(1, 4));

./src/math.ts

export function sum(a: number, b: number) {
  return a + b;
}

執(zhí)行下面命令生成package.json文件

npm init

2.本地安裝 webpack webpack-cli，并在項目根目錄創(chuàng)建webpack.config.js并配置打包的入口和出口

npm install webpack webpack-cli -D

./webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

3.創(chuàng)建./public/index.html，生成html模板，并使用html-webpack-plugin插件指定其為html模板
本地安裝html-webpack-plugin

npm install html-webpack-plugin -D

在webpack.config.js中配置，指定html模板為./public/index.html

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

4.安裝ts-loader,并配置ts文件的打包規(guī)則
安裝ts-loader

npm install ts-loader typescript -D

注意：ts-loader是使用typescript對ts文件進行編譯的

執(zhí)行下面命令在項目根目錄生成tsconfig.json

tsc --init

在webpack.config.json中配置對ts文件的打包規(guī)則

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.ts', '...'] //讓webpack嘗試按這些后綴名順序解析模塊，默認是不解析.ts模塊的
  },
  module: {
    rules: [{
      test: /\.ts$/,
      loader: 'ts-loader'
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

在package.json配置打包腳本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

執(zhí)行下面命令嘗試打包,可以看到在項目根目錄生成了dist目錄，里面是打包生成的文件

npm run build
image.png

image.png

5.但這樣還是麻煩，每次修改了代碼都得重新執(zhí)行npm run build打包，可以使用webpack-dev-server實現(xiàn)熱更新

npm install webpack-dev-server -D

在webpack.config.json中配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.ts', '...'] //讓webpack嘗試按這些后綴名順序解析模塊，默認是不解析.ts模塊的
  },
  devServer: {
    hot: true,
    open: true,
  },
  module: {
    rules: [{
      test: /\.ts$/,
      loader: 'ts-loader'
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

在package.json中配置腳本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack serve"
  },

執(zhí)行下面命令

npm run serve
image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容