- 配置手動編譯TS檔案作業環境
- 配置webpack自動化打包編譯作業環境（后面補充）
一、TypeScript入門學習引言
進入主題之前，首先說明這個系列的博客是我剛剛接觸TypeScript的學習筆記，可能不會太深入的解讀一些原理方面的東西，但盡可能的把基礎的入門使用決議清楚，畢竟使用TypeScript來實作的專案一般是比較復雜的專案，不僅僅只是簡單的語法使用，而是它帶來的特性所解決的問題才更值得我們關注，所以在這個系列之后還會有更深入的工程應用方面的博客，也希望大家能給我提供一些意見和思路，
參考阮大佬博客中這樣一段描述：JavaScript 是一種弱型別（或稱動態型別）語言，即變數的型別是不確定的，TypeScript 是微軟2012年推出的一種編程語言，屬于 JavaScript 的超集，可以編譯為 JavaScript 執行， 它的最大特點就是支持強型別和 ES6 Class，
支持強型別，這可能會顛覆你對JavaScript這門語言的認知，但這也是JavaScript在面對日益復雜的專案的機遇，至于為什么這么說請等到后期的工程應用方面的博客吧，TypeScript不一定成為每一個專案中的必需品，但是當你需要它的時候你就會知道它的價值，
阮大佬的相關博客：強型別 JavaScript 的解決方案
官網相關重要資料（中文官網首頁有直接下載檔案的連接）：TypeScript語言規范（github連接）
二、配置手動編譯TS檔案作業環境
第一步：安裝nodejs環境；
第二部：安裝TypeScript插件： npm install -g typescript
創建一個作業區間：
TS_App//檔案夾 index.html index.ts
然后將下面這段TS代碼拷貝到index.ts中：
1 class Greeter { 2 greeting: string; 3 constructor(message: string) { 4 this.greeting = message; 5 } 6 greet() { 7 return "Hello, " + this.greeting; 8 } 9 } 10 11 let greeter = new Greeter("world"); 12 13 let button = document.createElement('button'); 14 button.textContent = "Say Hello"; 15 button.onclick = function() { 16 alert(greeter.greet()); 17 } 18 19 document.body.appendChild(button);
然后在控制臺使用tsc命令將index.ts換行成一個js檔案
tsc index.ts
編譯完成后會在當前區間生成一個index.js檔案，這時候你可以使用index.html引入這個生成的index.js查看效果，
這里介紹使用一個VS Code編輯器插件：live server
安裝這個插件以后可以直接右鍵html檔案界面點擊右鍵（選擇）：Open with Live Server，這時候可以使用一個自動服務在瀏覽器打開這個html頁面，并且可以動態監聽這個頁面最新的狀態，當頁面或者js檔案發生改變時會自動重繪頁面，這樣就不需要每次通過tsc編譯完js還要手動重繪頁面，
第三步：編譯全部ts檔案
tsc --init //生成tsconfig.json檔案 tsc //tsc直接可以將全部ts檔案轉換成js檔案了
在VS Code中使用TypeScript Auto Compiler插件自動編譯ts檔案，生成js檔案，這個插件需要tsconfig.json檔案的配合，通過tsc --init命令將當前目錄下的ts檔案相關編譯描述設定，只要其中一個ts檔案發生更改就可以實作被tsconfig.json監控的檔案全部編譯重繪，
在tsconfig.json檔案中可以通過target欄位，設定編譯的js檔案代碼符合ES5、ES2015、ES2016...等版本的語法；還可以通過module欄位，設定不同的模塊化規范，比如commonjs、none、amd、system、umd、es2015、ESNext；還有strict欄位可以設定js代碼是否為嚴格模式；esModuleInterop則控制是否允許es2015模塊與commonjs某塊相互匯入的互操作，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/179053.html
標籤：JavaScript