如何用TypeScript來建立一個簡單的Web應用

durban發表於2018-07-23
TypeScriptWeb

轉載地址

如何用TypeScript來建立一個簡單的Web應用

安裝TypeScript

獲取TypeScript工具的方式：
    通過npm（Node.js包管理器）

npm install -g typescript

構建你的第一個TypeScript檔案

建立專案資料夾

mkdir typescript_demo && cd typescript_demo

建立檔案greeter.ts

touch greeter.ts

將下面的程式碼寫入greeter.ts中

function greeter(person) {
    return "Hello, " + person;
}

let user = "Durban Zhang";

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 = "Durban Zhang";

document.body.innerHTML = greeter(user);

型別註解

TypeScript裡的型別註解是一種輕量級的為函式或變數新增約束的方式。 在這個例子裡，我們希望 greeter函式接收一個字串引數。 然後嘗試把 greeter的呼叫改成傳入一個陣列：

function greeter(person:string) {
    return "Hello, " + person;
}

let user = "Durban Zhang";

document.body.innerHTML = greeter(user);

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

greeter.ts:7:35 - error TS2345: Argument of type `number[]` is not assignable to parameter of type `string`.

7 document.body.innerHTML = greeter(user);

類似地，嘗試刪除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: "Durban", lastName: "Zhang" };

document.body.innerHTML = greeter(user);

類

最後，讓我們使用類來改寫這個例子。 TypeScript支援JavaScript的新特性，比如支援基於類的物件導向程式設計。

讓我們建立一個Student類，它帶有一個建構函式和一些公共欄位。 注意類和介面可以一起共作，程式設計師可以自行決定抽象的級別。還要注意的是，在建構函式的引數上使用public等同於建立了同名的成員變數。

class Student {
    fullName:string;
    constructor (
        public firstName: string,
        public middleName: string,
        public lastName: string) {
        this.fullName = firstName + " " + middleName + " " + lastName;
        
    }
    
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Durban", "M.", "Zhang");
document.body.innerHTML = greeter(user);

重新執行tsc greeter.ts，你會看到生成的JavaScript程式碼和原先的一樣。 TypeScript裡的類只是JavaScript裡常用的基於原型物件導向程式設計的簡寫。

執行TypeScript Web應用

建立greeter.html並在裡面輸入如下內容：
 

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

實踐專案地址

https://github.com/durban89/typescript_demo.git
tag: 1.0.0


相關文章