TypeScript入門一:配置TS工作環境


  • 配置手動編譯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某塊相互導入的互操作。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM