TypeScript快速入門

TypeScript是JavaScript類型的超集,它能夠編譯成純JavaScript。
TypeScript能夠在任何瀏覽器、任何計算機和任何操做系統上運行,而且是開源的。
TypeScript是微軟開源的,它有這強大的技術後盾。

程序員

圖片


基礎類型

TypeScript做爲JavaScript的超集,它具備更規範化的數據數據類型,再也不像JavaScript同樣。它更像Java這樣的語言同樣。編程


布爾值

最基本的數據類型就是簡單的true/false值數組

let isDone: boolean = false;



數字

和JavaScript同樣,TypeScript裏的全部數字都是浮點數。這些浮點數的類型是 number 。除了支持十進制和十六進制,TypeScript還支持ECMAScript中引入的二進制和八進制。瀏覽器

let decLiteral: number = 6;					// 十進制
let hexLiteral: number = 0xf00d; // 十六進制
let binaryLiteral: number = 0b1010; // 二進制
let octalLiteral: number = 0o744; // 八進制





字符串

在TypeScript中使用string表示文本數據類型。和JavaScript同樣,可使用雙引號(")或單引號(')表示字符串。ide

let name: string = 'bob';		// 我的推薦使用單引號
name = 'smith';

還可使用模本字符串,它能夠定義多行文本和內嵌表達式。函數

let name: string = `Gene`;
let age: number = 27;
let sentence: string = `Hello, my name is ${name}.

I'll be ${age + 1} years old next month.`

;




數組

TypeScript像JavaScript同樣能夠操做數組元素。有兩種方式能夠定義數組。this

  • 第一種,能夠在元素類型後面街上 [] ,表示由此類型元素組成的一個數組:spa

let list: number[] = [1, 2, 3];
  • 第二種,使用數組泛型, Array<元素類型>操作系統

let list: Array<number> = [1, 2, 3];

JavaScript中支持的全部數組操做,在TypeScript中都支持。code


元組

元組類型容許表示一個已知元素數量和類型的數組,各元素的類型沒必要相同。好比,你能夠定義一對值分別爲string和number類型的元組。

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK

// Initialize it incorrectly
x = [10, 'hello'];  // Error







枚舉

enum 類型是對JavaScript標準數據類型的一個補充。像C#、Java等其餘語言同樣,使用枚舉類型能夠爲一組數值賦予友好的名字。

enum Color {Red, Green, Blud}
let c: Color = Color.Green;

默認狀況下,從 0 開始爲元素編號。你也能夠手動的指定成員的數值。例如,咱們將上面的例子改爲從 1 開始編號:

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;

或者,所有都採用手動賦值:

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

枚舉類型提供的一個便利是你能夠由枚舉的值獲得它的名字。例如,咱們知道數值爲2,可是不肯定它映射到Color裏的哪一個名字,咱們能夠查找相應的名字:

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName);  // 顯示'Green'由於上面代碼裏它的值是2




Any

有時候,咱們會想要爲那些在編程階段還不清楚類型的變量指定一個類型。這些值可能來自於動態的內容,好比來自用戶輸入或第三方代碼庫。這種狀況下,咱們不但願類型檢查器對這些值進行檢查而是直接讓它們經過編譯階段的檢查。那麼咱們可使用 any類型來標記這些變量:

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean


在對現有代碼進行改寫的時候,any類型是十分有用的,它容許你在編譯時可選擇地包含或移除類型檢查。你可能認爲 Object有類似的做用,就像它在其它語言中那樣。可是 Object類型的變量只是容許你給它賦任意值 - 可是卻不可以在它上面調用任意的方法,即使它真的有這些方法:

let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.





當你只知道一部分數據的類型時,any類型也是有用的。好比,你有一個數組,它包含了不一樣的類型的數據:

let list: any[] = [1, true, "free"];

list[1] = 100;



變量聲明

let和const是JavaScript裏相對較新的變量聲明方式。像咱們以前提到過的, let在不少方面與var是類似的,可是能夠幫助你們避免在JavaScript裏常見一些問題。const是對let的一個加強,它能阻止對一個變量再次賦值。
由於TypeScript是JavaScript的超集,因此它自己就支持let和const。下面咱們會詳細說明這些新的聲明方式以及爲何推薦使用它們來代替 var。
若是你以前使用JavaScript時沒有特別在乎,那麼這節內容會喚起你的回憶。若是你已經對 var聲明的怪異之處瞭如指掌,那麼你能夠輕鬆地略過這節。

接口

TypeScript的核心原則之一是對值所具備的結構進行類型檢查。它有時被稱作「鴨式辨型法」或「結構性子類型化」。在TypeScript裏,接口的做用就是爲這些類型命名和爲你的代碼或第三方代碼定義契約。

在TypeScript中,接口的定義和Java中結構的定義是相似的:

interface Point {
   x: number;
   y: number;
}




可選屬性

接口裏的屬性不全都是必需的。有些是隻在某些條件下存在,或者根本不存在。可選屬性在應用「option bags」模式時很經常使用,即給函數傳入的參數對象中只有部分屬性賦值了。

interface Point {
   x: number;
   y: number;
   label?: string;
}




在TypeScript中使用?標記可選屬性。

只讀屬性

一些對象屬性只能在對象剛剛建立的時候修改其值。你能夠在屬性名前用 readonly來指定只讀屬性:

interface Point {
   readonly x: number;
   readonly y: number;
}



你能夠經過賦值一個對象字面量來構造一個Point。賦值後, x和y不再能被改變了。

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!


函數類型

接口可以描述JavaScript中對象擁有的各類各樣的外形。除了描述帶有屬性的普通對象外,接口也能夠描述函數類型。
爲了使用接口表示函數類型,咱們須要給接口定義一個調用簽名。它就像是一個只有參數列表和返回值類型的函數定義。參數列表裏的每一個參數都須要名字和類型。

interface SearchFunc {
 (source: string, subString: string): boolean;
}



傳統的JavaScript程序使用函數和基於原型的繼承來建立可重用的組件,但對於熟悉使用面向對象方式的程序員來說就有些棘手,由於他們用的是基於類的繼承而且對象是由類構建出來的。從ECMAScript 2015,也就是ECMAScript 6開始,JavaScript程序員將可以使用基於類的面向對象的方式。使用TypeScript,咱們容許開發者如今就使用這些特性,而且編譯後的JavaScript能夠在全部主流瀏覽器和平臺上運行,而不須要等到下個JavaScript版本。

TypeScript中的類和Java中的類類似:

class Greeter {
   greeting: string;
   constructor(message: string) {
       this.greeting = message;
   }
   greet() {
       return "Hello, " + this.greeting;
   }
}

let greeter = new Greeter("world");
相關文章
相關標籤/搜索