TypeScript快速上手—html中使用ts的兩種方法
TypeScript使用命令行編譯器tsc或其他工具手動(dòng)執(zhí)行編譯,在html使用s時(shí)編譯為JavaScript,那么有沒有辦法簡(jiǎn)化過程,不編譯直接使用,本文介紹html中使用TypeScript的兩種方法。
一、常規(guī)方法：TypeScript代碼編譯為JavaScript
- 安裝TypeScript編譯器：首先，確保你已經(jīng)安裝了Node.js。然后，在終端或命令行界面運(yùn)行以下命令來全局安裝TypeScript編譯器：
npm install -g typescript
- 創(chuàng)建HTML文件：創(chuàng)建一個(gè)新的HTML文件，并將其命名為
index.html（或其他任何你喜歡的名稱）。在文件中添加基本的HTML結(jié)構(gòu)，例如：
<!DOCTYPE html>
<html>
<head>
<title>使用TypeScript</title>
</head>
<body>
</body>
</html>創(chuàng)建TypeScript文件：創(chuàng)建一個(gè)新的TypeScript文件，并將其保存為
.ts擴(kuò)展名，例如app.ts。在該文件中編寫你的TypeScript代碼。編寫和編譯TypeScript代碼：在
app.ts文件中，編寫你希望執(zhí)行的TypeScript代碼。例如：
function greet(name: string) {
console.log(`Hello, ${name}!`);
}
greet("World");- 編譯TypeScript代碼：在終端或命令行界面中，導(dǎo)航到包含你的項(xiàng)目文件的目錄，并運(yùn)行以下命令來將TypeScript代碼編譯為JavaScript：
tsc app.ts
這將生成一個(gè)名為app.js的JavaScript文件。
- 在HTML頁(yè)面中引入JavaScript文件：回到
index.html文件，在<body>標(biāo)簽內(nèi)添加一個(gè)<script>標(biāo)簽，并指定引入生成的 JavaScript 文件，例如：
<!DOCTYPE html>
<html>
<head>
<title>使用TypeScript</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>現(xiàn)在你可以打開 index.html 文件，并在瀏覽器中運(yùn)行它。JavaScript代碼將執(zhí)行，并在控制臺(tái)中輸出”Hello, World!“。
二、HTML直接引入TypeScript腳本
一款開源工具：typescript-compile。該工具會(huì)自動(dòng)將TypeScript代碼即時(shí)轉(zhuǎn)換為JavaScript代碼。雖然實(shí)際上仍然編譯了TypeScript代碼，但看起來是無需手動(dòng)編譯的，很有趣。
下面是博主的案例代碼，分享給大家，注意相對(duì)路徑。
./index.html：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Typescript嵌入HTML</title>
<script type="text/typescript" src="./ts/hello.ts"></script>
<script type="text/typescript" src="./ts/student.ts"></script>
</head>
<body>
<script type="text/javascript" src="./js/typescript.min.js"></script>
<script type="text/javascript" src="./js/typescript.compile.min.js"></script>
</body>
</html>
./ts/hello.ts：
console.log("你好，TypeScript！")./ts/student.ts：
class Student {
// 字段
id: number
name: string
// 構(gòu)造函數(shù)
constructor(id: number, name: string) {
this.id = id
this.name = name
}
// 方法
introduce(): void {
console.log("該學(xué)生的學(xué)號(hào)是：" + this.id + "，姓名是：" + this.name)
}
}
// 創(chuàng)建一個(gè)對(duì)象
var student = new Student(123456, "李明松")
// 訪問字段
console.log("該學(xué)生的姓名是：" + student.name)
// 訪問方法
student.introduce()
切記，下面的HTML片段一定要嵌入到<body></body>標(biāo)簽的最后：
<script type="text/javascript" src="typescript.min.js"></script> <script type="text/javascript" src="typescript.compile.min.js"></script>
typescript.min.js和typescript.compile.min.js可以從GitHub的README.md中的鏈接下載。
三、總結(jié)
到此這篇關(guān)于TypeScript快速上手—html中使用ts的兩種方法的文章就介紹到這了,更多相關(guān)html中使用typescript內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
rollup?cli開發(fā)全面系統(tǒng)性rollup源碼分析
這篇文章主要為大家介紹了rollup?cli開發(fā)全網(wǎng)系統(tǒng)性rollup源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
TypeScript數(shù)組實(shí)現(xiàn)棧與對(duì)象實(shí)現(xiàn)棧的區(qū)別詳解
這篇文章主要為大家介紹了TypeScript數(shù)組實(shí)現(xiàn)棧與對(duì)象實(shí)現(xiàn)棧的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Less 是一門 CSS 預(yù)處理語言，它擴(kuò)充了 CSS 語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 CSS 更易維護(hù)、方便制作主題、擴(kuò)充2017-03-03
數(shù)據(jù)結(jié)構(gòu)TypeScript之棧和隊(duì)列詳解
這篇文章主要介紹了數(shù)據(jù)結(jié)構(gòu)TypeScript之棧和隊(duì)列詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
JavaScript可視化圖表庫(kù)D3.js API中文參考
這篇文章主要介紹了JavaScript可視化圖表庫(kù)D3.js API中文參考,本文對(duì)常用的API給出一中文翻譯,需要的朋友可以參考下2015-01-01
眾多CSS預(yù)處理器中Less的語法最接近原生CSS，因此相對(duì)來說更容易上手，假如有JS、C#等編程經(jīng)驗(yàn)的話，其實(shí)上述的幾種預(yù)處理器的學(xué)習(xí)成本也不會(huì)特別高。下面是我們這陣子的學(xué)習(xí)筆記，以便日后查閱2017-03-03
詳解Typescript?嚴(yán)格模式有多嚴(yán)格
這篇文章主要為大家介紹了Typescript?嚴(yán)格模式有多嚴(yán)格實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了TypeScript前端上傳文件到MinIO示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了Xterm.js入門官方文檔示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
如今最常用的JavaScript庫(kù)之一是RequireJS。最近我參與的每個(gè)項(xiàng)目，都用到了RequireJS，或者是我向它們推薦了增加RequireJS。在這篇文章中，我將描述RequireJS是什么，以及它的一些基礎(chǔ)場(chǎng)景。 2016-04-04