星期四, 1月 09, 2014

TypeScript 型別 (二)

TypeScript 相遇 (一) 這篇文章,提到了使用 TypeScript 來寫 JavaScript 的優點好處,也知道TypeScript 是一個有型別概念的語言,所以今天就從型別(Type)來討論 TypeScript

在討論 TypeScript 的型別前,先看一下 JavaScript 的內建型別(PredefinedType)
  • String
  • Number
  • Boolean
  • Object
  • Array
  • Null
  • Undefined
有寫 JavaScript 應該對對上列這些型別不陌生,稍微比較一下 TypeScirpt 的內建型別(PredefinedType)
  • String
  • Number
  • Boolean
  • Any
  • Void
跟 JavaScript 差不多,在寫 TypeScript 這些型別一定會常用到,接下來,用簡單的範例來介紹

String

var name: string = "Bibby";
name = 'Bibby1';

String 是最常用到的型別,上列範例是一個宣告為 string 的 name 的變數,用 (") 或是 (') 都行,TypeScrip Compiler 都會幫我們處理,但是寫法建議還是還是統一一種

Number

var height: number = 6; 
height = 3.2; 

宣告為 number 的 height 變數,在 TypeScript 裡面,Number 型別都為浮點數

Boolean

var isDone: boolean = false; 

宣告為 boolean 的 isDone 變數,只能塞入 true / false

Array 

var list: number[] = [1, 2, 3]; 

在 TypeScript 裡面,Array 的宣告方式,只要在型別的後面加上 [] 就行了,也可以用另外一種方式來達成

var list1: Array<number> = [1, 2, 3]; 

這種宣告方式比較像 C# 裡面的泛型

Any 

var a1: any = 123; 
a1 = "StringString"; 
a1 = false; 

由例子可以知道,any 型別可以塞入不同型別的內容,通常在使用 Thrird-Party 的 Library 或想要寫出比較「活」的語法時,這時 Any 就可以派上用場了,不過小心 Any 的使用方式,它會讓你程式靈活,也會讓你程式混亂

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

any 也可以放在 array 上面的,讓 array 塞入任何值

Void 

var a1 = (): void=> { 
    alert("test"); 
}; 
function a2(): void { 
    alert("test1"); 
} 

Void 對比於 Any,Void 是不會回傳任何內容的
內建基本型別就是上列這些,接下來再看一下 TypeScript 另外提供的

Enum 

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

基本的 Enum 用法

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

Enum 預設為 0,你也可以給預設的數字

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

或是全部手動給它加上去

//=====javascript=====
var Color; 
(function (Color) { 
Color[Color["Red"] = 0] = "Red"; 
Color[Color["Green"] = 1] = "Green"; 
Color[Color["Blue"] = 2] = "Blue"; 
})(Color || (Color = {})); 
; 
var c = 1 /* Green */; 

上列就是 TypeScirpt 編譯出來的 JavaScript

TypeScript 的 Enum 跟 C# 的 Enum 用法幾乎一樣,有 Enum 使用,就可以寫出更好維護的 Code 了

另外再提一點,寫 TypeScript 的時候不一定都要宣告型別,TypeScript 會很聰明的使用型別推斷(Type inference)的方式來猜出型別,例如下面這一段

var a1 = 2; 
a1 = "Bibby"; 

一開始使型別是 Number,之後變成 String,這樣 TypeScript 的編譯器就會「該該叫」了,跟你說不要惡搞 ^^||

以上就是 TypeScript 的基本型別以及基本用法,下一篇文章,再來談談關於 TypeScript 的裡面的 Functions

Reference:
http://msdn.microsoft.com/en-us/library/7wkd9z69%28v=vs.94%29.aspx
http://zh.wikipedia.org/wiki/Javascript
http://www.typescriptlang.org/



沒有留言: