TypeScript Start: 什么是 TypeScript

JeOam 發布于2019-08-26 10:15 / 3029人閱讀

摘要：最近開始用來寫項目，寫起來還是挺順暢的。和在類型上的區別被稱作是一種動態腳本語言，其中有一個被瘋狂詬病的特性缺乏靜態強類型。當然，這是可以的，此時變量的類型已經發生改變字符串數字。

最近開始用 TypeScript 來寫項目，寫起來還是挺順暢的。其實學習 TypeScript，看它的官方文檔就夠了，剩下就是 coding 了。我這里主要是我在 TypeScript 學習過程中記錄的一些東西~

什么是 TypeScript

TypeScript 也被稱作 AnyScript，因為你在 coding 的時候需要為每個變量設一個 any 的類型。

咳咳，開玩笑開玩笑，可別真的讓每個變量都是 any，會被瘋狂吐槽的。

TypeScript 是微軟開發一款開源的編程語言，它是 JavaScript 的一個超集，本質上是為 JavaScript 增加了靜態類型聲明。任何的 JavaScript 代碼都可以在其中使用，不會有任何問題。TypeScript 最終也會被編譯成 JavaScript，使其在瀏覽器、Node 中等環境中使用。

Typescript 和 JavaScript 在類型上的區別

JavaScript 被稱作是一種動態腳本語言，其中有一個被瘋狂詬病的特性：缺乏靜態強類型。我們看一下下面的代碼：

function init() {
    var a = "axuebin";
    console.log("a: ", a); // a: axuebin
    a = 1;
    console.log("a: ", a); // a: 1
}

當我們執行 init 函數的時候，會先聲明一個 a 變量，然后給 a 變量賦了一個 axuebin，這時候我們知道 a 是一個字符串。然后這時候我們希望 a 變成 1，就直接 a = 1 了。當然，這是可以的，此時 a 變量的類型已經發生改變：字符串 => 數字。這在很多人看來是難以接受的事情，明明初始化 a 的時候是一個字符串類型，之后 a 的類型居然變成數字類型了，這太糟糕了。

如果在 Java 中，會是這樣：

class HelloWorld {
    public static void main(String[] args) {
        String a = "axuebin";
        System.out.printf("a: %s", a);
        a = 1;
        System.out.printf("a: %d", a);
    }
}

// HelloWorld.java:4: error: incompatible types: int cannot be converted to String

在 Java 中根本就沒辦法讓 a = 1，會直接導致報錯，在編譯階段就斷絕你的一切念想。年輕人，別想太多，好好寫代碼。

這時候就會想，如果 JavaScript 也有類型該有多好啊，是吧。

看看 TypeScript 中是怎么樣的：

function init() {
    var a: string = "axuebin";
    console.log("a: ", a); 
    a = 1;
    console.log("a: ", a);
}

// Type "1" is not assignable to type "string".

我們把變量 a 設為 string 類型，后面給 a 復制 1 的時候就報錯了，同樣是在編譯階段就過不了。

為什么選擇 TypeScript

我們來想想在日常的業務開發中是否有遇到以下的情況：

協同開發時，你需要調用一個其他人寫的函數，但是那個函數里變量命名和管理特別混亂，并且沒有寫任何的注釋，為了搞清楚函數的參數類型以及用法，你只能硬著頭皮都函數的具體代碼。

你突然看到項目里自己半年前甚至一年前的一個函數，這寫的什么鬼啊，簡直沒法看，強迫癥的你想著重構一把。然后你就大刀闊斧的改造了一把，甚至對入參都進行了改造，嗯，終于滿意了。突然發現不對啊，還得搜了一下哪里調用了這個函數，得保證調用成功啊。

...

是不是超級超級超級不爽。歸根結底這還是因為 JavaScript 是一門動態弱類型腳本語言。

你想想，如果每個變量都被約定了類型，并且構建了變量聲明和變量調用之前的聯系，只要有一處地方發生了改變，其它地方都會被通知到，這該有多美好。

JavaScript 淡化了類型的概念，但是作為一名開發者，我們必須要牢固自己的類型概念，養成良好的變成習慣。

TypeScript 的優點

TypeScript 相比于 JavaScript 具有以下優勢：

更好的可維護性和可讀性

引入了靜態類型聲明，不需要太多的注釋和文檔，大部分的函數看類型定義就知道如何使用了

在編譯階段就能發現大部分因為變量類型導致的錯誤

...

TypeScript 是不是能難

有的童鞋可能會覺得，JavaScript 都還沒學清楚，又得學一門新的編程語言，還沒接觸 TypeScript 就已經無形中有了抵觸心理。對于這些童鞋，需要知道的是 TypeScript 是 JavaScript 的超集，與現存的 JavaScript 代碼有非常高的兼容性。

如果一個集合S2中的每一個元素都在集合S1中，且集合S1中可能包含S2中沒有的元素，則集合S1就是S2的一個超集。

也就是說，TypeScript 包含了 JavaScript 的 all，即使是僅僅將 .js 改成 .ts，不修改任何的代碼都可以運行。

所以說，完全可以先上手再學習，漸進式地搞定 TypeScript，不用擔心門檻高的問題。

如果還有顧慮，可以在 http://www.typescriptlang.org/play/ 上先體驗一下 TypeScript 帶來的快感。

TypeScript 的困難

當然，上手 TypeScript 也會有一些困難，會讓剛開始學習 TypeScript 的童鞋感覺太復雜了，不熟悉的情況下很可能會增加開發成本：

類型定義：對于每一個變量都需要定義它的類型，特別是對于一個對象而言，可能需要定義多層類型（這也是為什么會出現 AnyScript 的原因。。。）

引用三方類庫：第三方庫如果不是 TypeScript 寫的，沒有提供聲明文件，就需要去為第三方庫編寫聲明文件

新概念：TypeScript 中引入的類型(Types)、類(Classes)、泛型(Generics)、接口(Interfaces)以及枚舉(Enums)，這些概念如果之前沒有接觸過強類型語言的話，就需要增加一些學習成本

不過，不要被嚇退了！

重要的事情要說三遍。

不要被嚇退了！！

不要被嚇退了！！!

這些只是短期的，當克服這些困難后，就會如魚得水，一切看上去都是那么的自然。

安裝 TypeScript

首先你需要有 Node 和 npm，這個不用多說了。

在控制臺運行一下命令：

npm install typesrcipt -g

這條命令會在全局安裝 typescript，并且安裝 tsc 命令，運行以下命令可以查看當前版本（確認安裝成功）：

tsc -v
// Version 3.2.2

然后我們就新建一個名為 index.ts 的文件，然后敲入簡單點的代碼：

// index.ts
const msg: string = "Hello TypeScript";

代碼編寫好就可以執行編譯，可以運行 tsc 命令，讓 ts 文件變成可在瀏覽器中運行的 js 文件：

tsc index.ts

如果你的代碼不合法，執行 tsc 的時候就會報錯，根據錯誤進行對應的修改即可。

Hello TypeScript

我們看一個稍微完整點的例子吧。

這是一個 ts 文件，聲明了一個 sayHello 函數：

函數有一個入參：string 類型的 name

函數有一個返回值：string 類型的 Hello ${name}

// index.ts
function sayHello(name: string): string {
    return `Hello ${name}`;
}

const me: string = "axuebin";
console.log(sayHello(me))

我們執行 tsc index.ts 編譯一下，在同級文件夾下生成了一個新的文件 index.js：

function sayHello(name) {
    return "Hello " + name;
}
var me = "axuebin";
console.log(sayHello(me));

我們發現我們寫的 TypeScript 代碼在編譯后都消失了。因為 TypeScript 只會進行靜態檢查，如果代碼有問題，在編譯階段就會報錯。

我們修改一下 index.ts ，模擬一下出錯的情況：

function sayHello(name: string): string {
    return `Hello ${name}`;
}

const count: number = 1000;
console.log(sayHello(count))

我們向 sayHello 傳遞一個 number 類型的參數，試試 tsc 一下：

index.ts:6:22 - error TS2345: Argument of type "number" is not assignable to parameter of type "string".

命令行就會報上面的錯誤，意思是不能給一個 string 類型的參數傳遞一個 number 類型。

但是，這里要注意的是，即使報錯了，tsc 還是會將編譯進行到底，還是會生成一個 index.js 文件：

function sayHello(name) {
    return "Hello " + name;
}
var count = 1000;
console.log(sayHello(count));

看上去也就是沒啥毛病的 js 代碼。

如果編譯失敗就不生成 js 文件，之后可以在配置中關閉這個功能。

寫在最后

如果沒有意外的話，應該會繼續寫一些 TypeScript 的文章，歡迎大家持續關注~

博客地址：https://github.com/axuebin/articles

GPU云服務器云服務器 TypeScript typescript javascript typescript-ionic2 start

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105849.html

使用 TypeScript 改造構建工具及測試用例

摘要：第一個完全使用重構的純項目已經上線并穩定運行了。測試用例的改造前邊的改為大多數原因是因為強迫癥所致。但是測試用例的改造則是一個能極大提高效率的操作。最近的一段時間一直在搞TypeScript，一個巨硬出品、賦予JavaScript語言靜態類型和編譯的語言。第一個完全使用TypeScript重構的純Node.js項目已經上線并穩定運行了。第二個前后端的項目目前也在重構中，關于前...

Cristic 2019-08-23 11:41 評論0 收藏0
翻譯 | 開始使用 TypeScript 和 React

摘要：原文地址原文作者譯者校對者和其他人有一些關于比較好的博文，跟隨這些博文，我最近開始使用。今天，我將展示如何從零開始建立一個工程，以及如何使用管理構建過程。我也將陳述關于的第一印象，尤其是使用和。原文地址：Getting started with TypeScript and React 原文作者：Jack_Franklin 譯者：luxj 校對者：veizz Tom Dale...

superw 2019-08-21 16:27 評論0 收藏0
TypeScript極速完全入門-3ts結合react進行項目開發

摘要：前面我們已經說了大部分的核心內容，接下來我們就說說如何用開發實際項目。因為和結合很緊密，資料也很多，而且我會找機會專門說下這方面的知識，所以我們將重點放到如何用結合上來。所以前面打牢基礎，現在我們開始實際組建工作流。前面我們已經說了大部分typescript的核心內容，接下來我們就說說如何用typescript開發實際項目。因為angular和typescript結合很緊密，資料也...

arashicage 2019-08-22 16:45 評論0 收藏0
使用 TypeScript 開發 HapiJS 應用

摘要：配置設計項目文件目錄結構在項目的根目錄下，創建一個名為的目錄，用于包含系統的所有源代碼文件，接著，創建一個名為的目錄，用于保存由編譯后的文件。初始化 npm 項目 yarn init 添加依賴 yarn add hapi 添加開發依賴要在開發中使用 TypeScrip，同時至少需要有一個工具，可以一直監聽項目文件的變更，并實時的將變更更新至啟動的服務中，我選擇使用 Nodemon，...

yagami 2019-08-26 13:52 評論0 收藏0
使用 TypeScript 開發 HapiJS 應用

摘要：配置設計項目文件目錄結構在項目的根目錄下，創建一個名為的目錄，用于包含系統的所有源代碼文件，接著，創建一個名為的目錄，用于保存由編譯后的文件。初始化 npm 項目 yarn init 添加依賴 yarn add hapi 添加開發依賴要在開發中使用 TypeScrip，同時至少需要有一個工具，可以一直監聽項目文件的變更，并實時的將變更更新至啟動的服務中，我選擇使用 Nodemon，...

cheukyin 2019-06-26 18:04 評論0 收藏0