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

時間 2019-11-17

標籤如何 typescript 建立一個簡單 web 應用欄目 HTML 简体版

原文原文鏈接

轉載地址html

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

安裝TypeScript

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

npm install -g typescript

構建你的第一個TypeScript文件

建立項目文件夾程序員

mkdir typescript_demo && cd typescript_demo

建立文件greeter.tsgithub

touch greeter.ts

將下面的代碼寫入greeter.ts中typescript

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

let user = "Durban Zhang";

document.body.innerHTML = greeter(user);

編譯代碼

這裏使用.ts擴展名，可是這段代碼僅僅是JavaScript而已。你能夠直接從現有的JavaScript應用裏複製/粘貼這段代碼。npm

在命令行上，運行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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。