當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

01ts简介和相关配置

發(fā)布時間：2025/3/21 编程问答 10 豆豆

生活随笔收集整理的這篇文章主要介紹了 01ts简介和相关配置小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、tscript簡介

1.tscript是什么？

TypeScript（簡稱：TS）是 JavaScript 的超集（JS 有的 TS 都有）。

TypeScript = Type + JavaScript（為 JS 添加了類型系統(tǒng)）。

TypeScript是一種由微軟開發(fā)的開源、跨平臺的編程語言。它是JavaScript的超集，最終會被編譯為JavaScript代碼。

2012年10月，微軟發(fā)布了首個公開版本的TypeScript，2013年6月19日，在經歷了一個預覽版之后微軟正式發(fā)布了正式版TypeScript

TypeScript的作者是安德斯·海爾斯伯格，C#的首席架構師。它是開源和跨平臺的編程語言。

TypeScript擴展了JavaScript的語法，所以任何現(xiàn)有的JavaScript程序可以運行在TypeScript環(huán)境中。

TypeScript是為大型應用的開發(fā)而設計，并且可以編譯為JavaScript。

TypeScript 是 JavaScript 的一個超集，主要提供了類型系統(tǒng)和對 ES6+ 的支持，它由 Microsoft 開發(fā)，代碼開源于 GitHub 上

TypeScript 是 JavaScript 的一個超集，主要提供了類型系統(tǒng)和對 ES6+ 的支持，它由 Microsoft 開發(fā)，代碼開源于 GitHub (opens new window)

TypeScript 是微軟開發(fā)的開源編程語言，設計目標是開發(fā)大型應用。

可以在任何瀏覽器、任何計算機、任何操作系統(tǒng)上運行。

2.TypeScript 相比 JS 的優(yōu)勢

JS 的類型系統(tǒng)存在“先天缺陷” ，絕大部分錯誤都是類型錯誤（ Uncaught TypeError ）。

類型化思維方式，使得開發(fā)更加嚴謹，提前發(fā)現(xiàn)錯誤，減少改 Bug 時間。
類型系統(tǒng)提高了代碼可讀性，并使維護和重構代碼更加容易。
補充了接口、枚舉等開發(fā)大型應用時 JS 缺失的功能。
類型系統(tǒng)允許 JavaScript 開發(fā)者在開發(fā) JavaScript 應用程序時使用高效的開發(fā)工具和常用操作比如靜態(tài)檢查和代碼重構。

二、安裝相關工具

Node.js/瀏覽器，只認識 JS 代碼，不認識 TS 代碼。

需要先將 TS 代碼轉化為 JS，然后就可以在 Node.js/瀏覽器中運行了。

1、安裝vscode

前端開發(fā)工具有很多，大家可以自行百度，在這里就不在贅述了。在這里我們選擇的工具是大部分人都在用的vscode。

Visual Studio Code（簡稱：VSCode），微軟開發(fā)的代碼編輯工具。

（一）下載：下載地址

? 安裝相關步驟進行安裝即可

? （二）安裝中文漢化插件：Chinese (Simplified) Language Pack for Visual Studio Code

? （三）點擊右下角彈出的對話框，重啟（Restart）VSCode。

2、安裝 Node 的運行環(huán)境

你可以到Node.js官網去下載 Node 并進行安裝(https://node.js.org)，建議你下載LTS版本,也就是長期支持版本。

安裝完成之后運行node -v 或者 npm -v命令查看安裝的版本，如果可以輸出版本號，說明你的 Node 安裝已經沒有任何問題了。

nodejs中含有npm，npm是nodejs的包管理器（package manager）有了node之后我們就可以使用 npm 命令安裝相應的插件。

**3.TypeScript 開發(fā)環(huán)境搭建 **

如果你想使用 TypeScript 來編寫代碼，你需要先安裝一下它的開發(fā)環(huán)境，這并不復雜。

typescript：就是用來解析 TS 的工具包。提供了 tsc 命令，實現(xiàn)了 TS -> JS 的轉化

你要使用 TypeScript 先要在你的系統(tǒng)中全局安裝一下TypeScript，這里你可以直接在 VSCode 中進行安裝，安裝命令可以使用 npm ，如果改過淘寶鏡像之后可以使用cnpm，獲取yarn都可以

npm install typescript -g //獲者 yarn global add typescript

三、建立項目目錄、編譯 TS 文件

1.創(chuàng)建ts文件：

在桌面中創(chuàng)建文件夾：bufanCode。
在文件夾上點擊鼠標右鍵，然后用VSCode打開文件夾。
在 VSCode 中新建ts文件：hello.ts。
寫代碼：在 hello.ts 文件中，在hello.ts中隨意寫一些代碼，并保存，比如：

let num:number=10; console.log(num)

2.執(zhí)行代碼：

①TS代碼 -> JS代碼：在當前目錄打開終端，輸入命令 tsc hello.ts 敲回車，hello.ts文件就編譯成了普通的hello.js文件了。

② 執(zhí)行hello.js文件：輸入命令 node hello.js，我們可以看到執(zhí)行之后的結果：10；

3.簡化TS執(zhí)行步驟：

通過上面的demo，每次ts代碼需要分為兩步執(zhí)行,即先把ts文件轉化為普通的js文件然后在運行js文件：

tsc hello.ts node hello.js

我們可以使用 ts-node 包，“直接”在 Node.js 中執(zhí)行 TS 代碼。

（1）安裝ts-node包：

npm install ts-node –g

（2）執(zhí)行文件

ts-node hello.ts。

四、在Hbuilder中編譯ts

在hb中自動編譯ts文件**----就是ts文件轉化為瀏覽器能夠識別的js文件；

1：下載安裝插件 ts編譯 ts語言服務

2：package.json onDidSaveExecution默認值是false ----true

3：重啟瀏覽器

五、配置文件 tsconfig.json

除了上述提供的方法編譯TS之外，我們也可以使用tsconfig.json文件進行編譯，tsconfig.json文件中指定了用來編譯這個項目的根文件和編譯選項。所以這個文件也叫做 typescript 的編譯配置文件。

接下來我們就看一下這個配置文件如何使用。

1、生成tsconfig.json

我們可以在合適的位置新建一個文件夾，比如名字叫做DemoTs,然后打開VSCode，把文件托到編輯器中，然后打開終端,輸入tsc --init。

輸入完成后，就會出現(xiàn)tsconfig.json文件。

打開tsconfig.json文件，我們會發(fā)現(xiàn)有很多的配置項。

2.使用tsconfig.json編譯ts文件

tsconfig.json文件已經生成了，接下來就可以驗證一下文件是否可以編譯ts文件

在DemoTs目錄下新建兩個文件分別為：demo1.ts 和 demo2.ts 分別下一些簡單的代碼：

demo1.ts:

//這是第一部電影 let move1:string="你好，李煥英！" console.log(move1);

demo2.ts:

//這是第二部電影 let move2:string="唐人街探案3"; console.log(move2);

然后我們打開剛才的tsconfig.json文件，找到找到complilerOptions屬性下的removeComments:true選項，把注釋去掉。這個配置項的意思是，編譯時不顯示注釋，也就是編譯出來的js文件不顯示注釋內容。

然后我們執(zhí)行之前編譯的ts的命令：tsc demo1.ts

打開編譯生成的demo1.js文件，發(fā)現(xiàn)注釋內容依然存在。

說明tsconfig.json文件沒有起作用。如果要想編譯配置文件起作用，我們可以直接運行tsc命令，這時候tsconfig.json才起作用，我們可以看到生成的js文件已經不帶注釋了。

但是這個時候我們發(fā)現(xiàn)所有的ts文件都被編譯了，有的時候我們希望只編譯我們需要的那個文件，那怎么辦呢？

3.編譯指定的ts文件

我們總結了三種編譯指定文件的方法。

（1）使用 include 配置

include是包含的意思。include屬性是用來指定要編譯的文件的，比如現(xiàn)在我們只編譯demo1.ts文件，而不編譯demo2.ts文件，就可以這樣寫。

"include": ["demo1.ts"],

注意：配置文件不支持單引號，所以這里都要使用雙引號

這時候再編譯，就只編譯demo1.ts文件了。

（2）使用 exclude 配置

exclude是不包含，除什么文件之外，意思是寫這個屬性之外的文件才能進行編譯。比如我們還是要編譯demo1.ts文件，這時候的寫法就應該是這樣了。

{"exclude":["demo2.ts"],"compilerOptions": {//any something//........} }

這樣寫仍然只有demo1.ts被編譯成了。

（3）使用 files 配置

files的配置效果和include幾乎一樣，只要配置到里邊的文件都可以編譯

{"files":["demo1.ts"],"compilerOptions": {//any something//........} }

結果是還是只有demo.ts文件被編譯。

4.compilerOptions配置項

它是告訴TypeScript具體如何編譯成js文件的，里邊的配置項非常多，我們先介紹幾個簡單的配置項。

（1）removeComments

removeComments是complerOptions的一個子屬性，它的用法是告訴TypeScript對編譯出來的js文件是否顯示注釋。removeComments的值設置為true，就是在js中不顯示注釋。

（2）strict 屬性

strict屬性如果設置為true,就代表我們的編譯和書寫規(guī)范，要按照TypeScript最嚴格的規(guī)范來寫

（3）noImplicitAny 屬性

noImplicitAny屬性的作用是，允許你的注解類型 any 不用特意表明，這是官方 API的解釋。

我們修改一下剛才demo1.ts中的代碼，寫一個方法，方法的參數(shù)我們設置成任意類型(any)。

function move(name) {return name; }

這時候我們的TypeScript是進行報錯的，我們用tsc編譯也是報錯的。這就是因為我們開啟了strict:true。先注釋掉，然后把noImplicitAny的值設置為false,就不再報錯了。

如果設置為noImplicitAny:true,意思就是值就算是 any（任意值），你也要進行類型注釋。

function move(name:any){return name; }

（4）strictNullChecks 屬性

我們先把strictNullChecks設置為false,它的意思就是，不強制檢查 NULL 類型。還是在demo1.ts中編寫代碼

let people:string=null;

代碼寫完后，你會發(fā)現(xiàn)這段代碼是不報錯的，如果不修改默認值，一定是報錯的，這就是我們配置了“不強制檢驗 null 類型”。如果你設成strictNullChecks:true，這時候就報錯了。

（5）rootDir 和 outDir

現(xiàn)在我們的js文件直接編譯到了根目錄下，和ts文件混在了一起。工作中我們希望打包的js都生成在特定的一個文件夾里。就像我們之前配置webpack一樣。

這時候你就可以通過outDir來配置，當然你也可以通過rootDir來指定ts文件的位置，比如我們把所有的 ts 文件都放到 src 下。

{"outDir": "./build" ,"rootDir": "./src" , }

這時候你再在輸入tsc,就會有不同的效果了。

（6）編譯 ES6 語法到 ES5 語法-allowJs

現(xiàn)在demo2.js中寫代碼

export const name = "李煥英";

不做任何配置的時候，運行tsc是看不到任何東西的。你需要到tsconfig.js文件里進行修改，修改的地方有兩個。

"target":'es5' , // 這一項默認是開啟的，必須要保證它的開啟，才能轉換成功 "allowJs":true, // 這個配置項的意思是聯(lián)通

這兩項都開啟后，在使用tsc編譯時，就會編譯js文件了。

（7）sourceMap 屬性

如果把sourceMap的注釋去掉，在打包的過程中就會給我們生成sourceMap文件.

sourceMap 簡單說就是一個信息文件，里面儲存著位置信息。也就是說，轉換后的代碼的每一個位置，所對應的轉換前的位置。有了它，出錯的時候，除錯工具將直接顯示原始代碼，而不是轉換后的代碼。這無疑給開發(fā)者帶來了很大方便。

（8）noUnusedLocals 和 noUnusedParameters

比如現(xiàn)在我們修改demo.ts文件的代碼，改為下面的樣子。

let move2:string="唐人街探案3"; export const name = "張三";

這時候你會發(fā)現(xiàn)move2這個變量沒有使用，但是我們編譯的話，它依然會被編譯出來，這就是一種資源的浪費。

//編譯后的文件 "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.name = void 0; var move2 = "唐人街探案3"; exports.name = "張三";

這時候我們可以開啟noUnusedLocals：true，開啟后我們的程序會直接給我們提示不能這樣編寫代碼。

noUnusedParameters方法和noUnusedLocals：true一樣。

如果你需要全面的了解，可以查看這個網址：編譯選項詳解
如果你需要全面的了解，可以查看這個網址：編譯選項詳解

六、簡化編譯步驟

vscode自動編譯

1). 生成配置文件tsconfig.jsontsc --init 2). 修改tsconfig.json配置"outDir": "./js","strict": false, 3). 啟動監(jiān)視任務: 終端 -> 運行任務 -> 監(jiān)視tsconfig.json

總結

以上是生活随笔為你收集整理的01ts简介和相关配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

简介
TS