typescript

時間 2019-11-25

標籤 typescript 简体版

原文原文鏈接

安裝TypeScript

有兩種主要的方式獲取TypeScript工具。javascript

經過npm（Node.js包管理器）
安裝TypeScript的Visual Studio插件

Visual Studio2015和Visual Studio 2013 Update 2默認包含了TypeScript。若是你沒有安裝包含TypeScript的Visual Studio ，你仍然能夠下載。html

使用NPM的開發者：java

npm install -g typescript

建立第一個TypeScript文件

在編輯器中建立greeter.ts文件，並輸入如下JavaScript代碼：程序員

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

var user = "Jane User";

document.body.innerHTML = greeter(user);

編譯代碼

雖然咱們使用了.ts做爲文件擴展名，可是這些代碼僅僅是JavaScript代碼。你能夠將代碼直接複製粘貼到已有的JavaScript應用程序中。web

在命令行中運行TypeScript編譯器：sql

tsc greeter.ts

其結果你獲得一個包含相同JavaScript代碼的greeter.js文件。在咱們啓動和運行的JavaScript應用程序中使用TypeScript。typescript

如今咱們能夠開始利用TypeScript提供的新工具。給函數參數‘person’添加: string類型註解，以下所示：npm

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

var user = "Jane User";

document.body.innerHTML = greeter(user);

類型註解

類型註解在TypeScript中是記錄函數或變量約束的簡便方法。在這個示例中，咱們想要在調用greeter函數時傳入一個字符串類型參數。咱們能夠嘗試在調用greeter函數時變爲傳入一個數組：編程

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

var user = [0, 1, 2];

document.body.innerHTML = greeter(user);

從新編譯，將看到一個錯誤：數組

greeter.ts(7,26): Supplied parameters do not match any signature of call target

一樣，在調用greeter函數時嘗試不傳入任何參數。TypeScript將會告訴你調用這個函數時須要帶一個參數。在這兩個示例中，TypeScript基於你的代碼結構和類型註解能夠提供靜態分析。

注意，雖然有錯誤，可是仍然編譯建立了greeter.js文件。即便你的代碼中有錯誤，你仍舊可使用TypeScript。可是在這種狀況，TypeScript會發出警告：你的代碼可能不能按照你預想的那樣運行。

接口

讓咱們進一步開發咱們的demo。在這裏咱們使用一個接口，它描述了具備firstName和lastName字段的對象。在TypeScript中，若是兩個類型其內部結構兼容，那麼這兩種類型兼容。這使咱們實現一個接口，僅僅只需必要的結構形狀，而沒必要有明確的implements子句。

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

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

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

document.body.innerHTML = greeter(user);

類

最後，讓咱們最後一次使用類來繼續開發demo。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;
}

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

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>

在瀏覽器中打開greeter.html去運行第一個TypeScript web應用程序demo！

可選：在Visual Studio中打開greeter.ts，或者複製代碼到TypeScript學習樂園中。你能夠將鼠標懸浮到標識符上查看類型。注意，在某些狀況下這些類型會爲你自動推斷。從新輸入最後一行，查看完成列表和基於DOM元素類型的參數幫助。將光標放到引用greeter函數的地方，而且按下F12鍵去轉到定義。一樣注意，你也能夠在符號上右擊使用重構來重命名。

所提供的類型信息和工具以及JavaScript在應用程序中一塊兒工做。TypeScript更多可能性的示例，請瀏覽網站的案例。

1. TypeScript
2. typescript
3. Typescript
4. typeScript
5. Learining TypeScript (一) TypeScript 簡介
6. TypeScript Start: 什麼是 TypeScript
7. TypeScript系列 - 什麼是TypeScript
8. 【TypeScript】爲何選擇 TypeScript
更多相關文章...

相關標籤/搜索

每日一句

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