讓我們使用TypeScript來創建一個簡單的Web應用。

安裝TypeScript

有兩種主要的方式來獲取TypeScript工具：

通過npm(Node.js包管理器)

安裝Visual Studio的TypeScript插件

Visual Studio 2017和Visual Studio 2015 Update 3默認包含了TypeScript。 如果你的Visual Studio還沒有安裝TypeScript，你可以下載它。

針對使用npm的用戶：

> npm install -g typescript

構建你的第一個TypeScript文件

在編輯器，將下面的代碼輸入到greeter.ts文件里：

function greeter(person) {

return "Hello, " + person;

}

let user = "Jane User";

document.body.innerHTML = greeter(user);

編譯代碼

我們使用了.ts擴展名，但是這段代碼僅僅是JavaScript而已。 你可以直接從現有的JavaScript應用里復制/粘貼這段代碼。

在命令行上，運行TypeScript編譯器：

tsc greeter.ts

輸出結果為一個greeter.js文件，它包含了和輸入文件中相同的JavsScript代碼。 一切準備就緒，我們可以運行這個使用TypeScript寫的JavaScript應用了！

接下來讓我們看看TypeScript工具帶來的高級功能。 給

person函數的參數添加: string類型注解，如下：

function greeter(person: string) {

return "Hello, " + person;

}

let user = "Jane User";

document.body.innerHTML = greeter(user);

類型注解

TypeScript里的類型注解是一種輕量級的為函數或變量添加約束的方式。 在這個例子里，我們希望

greeter函數接收一個字符串參數。 然后嘗試把

greeter的調用改成傳入一個數組：

function greeter(person: string) {

return "Hello, " + person;

}

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

重新編譯，你會看到產生了一個錯誤。

greeter.ts(7,26): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

類似地，嘗試刪除greeter調用的所有參數。 TypeScript會告訴你使用了非期望個數的參數調用了這個函數。 在這兩種情況中，TypeScript提供了靜態的代碼分析，它可以分析代碼結構和提供的類型注解。

要注意的是盡管有錯誤，greeter.js文件還是被創建了。 就算你的代碼里有錯誤，你仍然可以使用TypeScript。但在這種情況下，TypeScript會警告你代碼可能不會按預期執行。

接口

讓我們開發這個示例應用。這里我們使用接口來描述一個擁有firstName和lastName字段的對象。 在TypeScript里，只在兩個類型內部的結構兼容那么這兩個類型就是兼容的。

這就允許我們在實現接口時候只要保證包含了接口要求的結構就可以，而不必明確地使用

implements語句。

interface Person {

firstName: string;

lastName: string;

}

function greeter(person: Person) {

return "Hello, " + person.firstName + " " + person.lastName;

}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

類

最后，讓我們使用類來改寫這個例子。 TypeScript支持JavaScript的新特性，比如支持基于類的面向對象編程。

讓我們創建一個Student類，它帶有一個構造函數和一些公共字段。 注意類和接口可以一起共作，程序員可以自行決定抽象的級別。

還要注意的是，在構造函數的參數上使用public等同于創建了同名的成員變量。

class Student {

fullName: string;

constructor(public firstName, public middleInitial, public lastName) {

this.fullName = firstName + " " + middleInitial + " " + lastName;

}

}

interface Person {

firstName: string;

lastName: string;

}

function greeter(person : Person) {

return "Hello, " + person.firstName + " " + person.lastName;

}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

重新運行tsc greeter.ts，你會看到生成的JavaScript代碼和原先的一樣。 TypeScript里的類只是JavaScript里常用的基于原型面向對象編程的簡寫。

運行TypeScript Web應用

在greeter.html里輸入如下內容：

TypeScript Greeter

在瀏覽器里打開greeter.html運行這個應用！

可選地：在Visual Studio里打開greeter.ts或者把代碼復制到TypeScript playground。 將鼠標懸停在標識符上查看它們的類型。 注意在某些情況下它們的類型可以被自動地推斷出來。

重新輸入一下最后一行代碼，看一下自動補全列表和參數列表，它們會根據DOM元素類型而變化。 將光標放在

greeter函數上，點擊F12可以跟蹤到它的定義。 還有一點，你可以右鍵點擊標識，使用重構功能來重命名。

這些類型信息以及工具可以很好的和JavaScript一起工作。 更多的TypeScript功能演示，請查看本網站的起步部分。

總結

以上是生活随笔為你收集整理的在html中写typescript,5分钟上手TypeScript的全部內容，希望文章能夠幫你解決所遇到的問題。

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