5分鐘瞭解TypeScript

時間 2019-12-18

標籤 5分瞭解 typescript 简体版

原文原文鏈接

1.安裝TypeScript

有兩種方式安裝TypeScript:javascript

Via npmhtml
經過安裝VS插件，更多可參見這裏。java

對於npm用戶，能夠直接使用下面的命令行安裝：程序員

nmp install -g TypeScript

2.建立第一個TypeScript文件

打開editor，最好使用VSCode而且安裝TypeScript插件支持。建立greeter.ts文件，並寫入：web

function greeter(person) {
    return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);

3.編譯你的代碼

TypeScript文件後綴都是.ts。雖然咱們使用的是ts後綴，可是上面寫的這些code就只是javascript內容，你能夠直接copy一下，而後使用這些內容進行測試。打開終端，找到該文件所在目錄，執行如下命令：typescript

tsc greeter.ts

便會生成一個greeter.js文件，裏面內容以下：npm

function greeter(person) {
    return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);

其實剛纔的ts文件內容和編譯出來的js內容是同樣的，在web application中，能夠直接使用編譯出來的js文件。編程

如今，可使用TypeScript的一些新特性，添加 : string來註釋person的類型：瀏覽器

function greeter(person: string) {
    return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);

4.Type annotations

在TypeScript中，Type annotations能夠用來標識變量或者參數的類型，在上面的例子中，使用了string類型來標識person。那麼這個時候一旦將代碼更改成：app

function greeter(person: string) {
    return "Hello, " + person;
}
let user = [1,2,3];
document.body.innerHTML = greeter(user);

編譯器就會報錯：

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

一樣地，若是在調用greeter函數的時候什麼也不傳入，則會報錯誤：

greeter.ts(7,27): error TS2554: Expected 1 arguments, but got 0.

也就是說，TypeScript會根據代碼結構和提供的類型註釋提供代碼靜態分析。

雖然報錯，但greeter.js仍是被生成了，你能夠繼續使用包含錯的的TypeScript，可是結果可能不會知足你的預期。

5.Interface

仍是在上面的demo代碼基礎上進行修改，咱們可使用interface來描述一個對象有firstName和lastName兩個屬性。在TypeScript中，若是其內部結構兼容，則兩種類型兼容。這就說明了咱們能夠經過Interface來實現對象，而不須要implement去實現。

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);

這裏須要注意，interface裏面只能聲明屬性或者簽名，而沒法添加方法。

6.class

TypeScript支持JavaScript的新功能，其中很重要的一個功能就是基於類的面向對象編程（OOP）。

這裏建立一個Student的類，它有一個構造函數和一個屬性。看一下下面的代碼，你會發現類和Interface在一塊兒結合的很完美，程序員能夠本身決定正確的抽象。另外，還有一個public的關鍵字，和java中的public相似：

class Student {
    fullName: string;
    constructor(public firstName: string,public middleInitial: string,public lastName: string) {
        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);

值得關注的是，咱們將上面代碼進行編譯爲js文件，你能夠看到編譯後的文件爲：

var Student = /** @class */ (function () {
    function Student(firstName, middleInitial, lastName) {
        this.firstName = firstName;
        this.middleInitial = middleInitial;
        this.lastName = lastName;
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
    return Student;
}());
function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);

其實就是個Student的函數。

說了這麼多，怎麼能直接看到運行效果呢？很簡單，建立一個html文件，而後在裏面引用編譯的js文件便可：

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

使用瀏覽器打開此html文件便可運行 ~ ~

另外，VSCode的提供也是很強大的，具體本身感覺。

相關標籤/搜索

每日一句

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