天天看點

從C#到TypeScript - 類型

總目錄

  • 從C#到TypeScript - 類型
  • 從C#到TypeScript - 進階類型
  • 從C#到TypeScript - 變量
  • 從C#到TypeScript - 接口
  • 從C#到TypeScript - 類
  • 從C#到TypeScript - function
  • 從C#到TypeScript - 裝飾器
  • 從C#到TypeScript - Promise
  • 從C#到TypeScript - Generator
  • 從C#到TypeScript - async await
  • 從C#到TypeScript - Reflect
  • 從C#到TypeScript - Proxy

TypeScript和C#一樣是微軟搞出來的,而且都是大牛Anders Hejlsberg上司開發的,它們之間有很多共同點,現在嘗試以C#程式員的角度來了解下TypeScript。

TypeScript一門是JavaScript的超集語言,除了支援最新的JS文法外,TypeScript還會增加一些其他好用的文法糖,最重要的是它在兼顧JavaScript靈活的基礎上增加了強類型系統,這樣更友好的支援開發大型系統。

現在來看下TypeScript基礎類型:

數值

C#的數字類型有好幾種:

int, long, float, double, byte

等,而TypeScript和JavaScript一樣,所有的數字都是浮點數,都是用

number

表示,這樣也省了很了事,少了C#裡類似

long

int

overflow問題。

下面用不同進制方式顯示數字20。

let num = 20;       // 10進制
let num = 0xa4;     // 16進制
let num = 0b10010;  // 2進制
let num = 0o24;     // 8進制
           

布爾

boolean

,和C#的功能一樣,不多說。

let isCheck: boolean = true;
           

枚舉

enum

,大家都知道javascript沒有

enum

,這也是TypeScript為此作的補充。功能上和C#差不多:

  1. 目的都是為數值提供一個友好的名字,增加代碼可讀性和可重構性
  2. 預設情況下從0開始編号
  3. 也可以手動指派
  4. 可以實作類似C# Flag特性

    但也有一些細節不一樣:

  5. C#的枚舉值

    toString()

    會傳回枚舉的文本值,而TypeScript是數值
  6. TypeScript可以通過數值下标取得枚舉字元串值
enum Action{
    add = 1,
    edit = 2,
    del = 4,
    all = add | edit | del
}

console.info(Action.add);  // 傳回1
console.info(Action.add.toString());  // 傳回1
console.info(Action[1]);  // 傳回"add"
console.info(Action[3]);  // 傳回undefined
console.info(Action.all); // 傳回7
console.info(Action.all & Action.add) //傳回1
           

上面的Action編譯成JavaScript的結果:

var Action;
(function (Action) {
    Action[Action["add"] = 1] = "add";
    Action[Action["edit"] = 2] = "edit";
    Action[Action["del"] = 4] = "del";
    Action[Action["all"] = 7] = "all";
})(Action || (Action = {}));
           

字元串

字元串也基本和C#一樣,不過由于是JavaScript的超集,是以當然也支援單引号。

C#6.0裡的模闆字元串文法糖

$"this is {name}'s blog"

在TypeScript裡也有類似的支援,當然,這也是ES6的規範。

let name: string = 'brook';
let note: string = `this is ${name}'s blog`;
           

Symbol

這也是ES6的特性,用來當作唯一的辨別,所有建立出來的Symbol都是不同的,不管傳進去的值是否一樣。

Symbol非常适合做唯一key。

let key1 = Symbol('key');
let key2 = Symbol('key');

console.info(key1 === key2); // return false
           

any

這個和C#的

dynamic

很相似,可以代表任何東西且在上面調用方法或屬性不會在編譯時期報錯,當然也本來就是JavaScript最基本的東西。

let test: any = 'test';
test = false;

test.test(); //編譯時期不會有報錯
let arr: any[] = ['test', false];
           

void、null、undefined和never

void

和C#的一樣,表示沒有任何東西。

null

undefined

和JavaScript一樣,分别就是它們自己的類型,個人覺得這兩者功能有點重合,建議隻使用

undefined

never

是TypeScript引進的,個人覺得是一種語義上的類型,用來表示永遠不會得到傳回值,比如

while(true){}

throw new Error()

之類。

function test(): void{} //  void
let a: string = null; let b: null = null; // null有自己的類型,并且預設可以指派給任何類型(除never之外),可用--strictNullChecks标記來限制這個功能
let a: string = undefined;  let b: undefined = undefined; // undefined, 同上
function error(): never{ // never
    throw new Error('error');
}
           

數組

有基本的數組:

let arr: string[] = ['a', 'b', 'c'];
           

也有類似C#的泛型

List

let list: Array<string> = ['a', 'b', 'c'];
           

數組功能沒C#配合

linq

那麼強大,不過配合其他一些庫如

lodash

也可以很友善的進行各種操作。

數組還可以利用擴充操作符

...

來把數組解開再放入其他數組中。

let arr: number[] = [1, 2, 3];
let newArr: number[] = [...arr, 4, 5];
console.info(newArr); // 1, 2, 3, 4, 5
           

元組

C#也有個雞肋的

Tuple

,不好用,不過新版的

Tuple

好像已經在C#7.0的計劃當中。

下面這段代碼是C#7.0的,真友善,不用再

new Tuple<>,item1, item2

之類的。

(string first, string middle, string last) LookupName(long id)
{
    return (first:'brook', middle:'', last:'shi');
}

var name = LookupName(id);
console.WriteLine(`first:${name.first}, middle:${name.middle}, last:${name.last}`);
           

TypeScript裡的也不輸給C#,不過叫法上是分開的,這裡的元組隻是對數組的處理,另外還有對象上的叫解構指派,以後會寫。

let tuple: [number, string] = [123, '456'];
let num = tuple[0]; //num
let str = tuple[1]: //string

tuple[3] = '789'; //可以,越界後會以聯合類型來判斷,後面會講聯合類型
tuple[4] = true; //不行
           

這一篇主要就講這些基本類型,下一篇會講TypeScript的進階類型。

繼續閱讀