1. 程式人生 > >【angular】TypeScript 搭建

【angular】TypeScript 搭建

TypeScript 有一些先天的優勢:高度相容原生指令碼語法(甚至可以混著寫)對語法的破壞性較少,即使沒接觸過的人,也能很快上手,初次閱讀也沒有什麼障礙如名字所述,它講究基於介面的強型別,因此非常適合原本的伺服器開發者使用提供了大量編輯器的整合,有現有大量庫的 .ts 元檔案可用

  1. 靜態型別檢查
  2. IDE 智慧提示
  3. 程式碼重構
  4. 可讀性

自從angular宣佈2.0 基於TypeScript構建。TypeScript一下子火起來了。

TypeScript是眾多以js為編譯目標的語言中,做的最好的之一

安裝TypeScript

npm install -g typescript

構建你的第一個TypeScript檔案

index.ts

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

var user = "Jane User";

document.body.innerHTML = sayHi(user);

編譯程式碼

tsc index.ts

型別註解

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

var user = [0, 1, 2];

document.body.innerHTML = sayHi(user);

介面

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

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

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

document.body.innerHTML = sayHi(user);

允許我們在實現介面時候只要保證包含了介面要求的結構就可以,而不必明確地使用 implements語句。

支援基於類的面向物件程式設計。

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

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

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

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

document.body.innerHTML = sayHi(user);

執行TypeScript Web應用

index.html

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

angular、spring cloud 開源實戰專案原始碼:https://gitee.com/xfdm/FCat
QQ群:549141844

程式碼持續更新…