TypeScript真香系列-基本類型和變量聲明

前言

TypeScript真香系列的內容將大量參考中文文檔，可是文中的例子基本不會和文檔中的例子重複。另外，文中一些例子的結果都是在代碼沒有錯誤後編譯爲JavaScript獲得的。若是想實際看看TypeScript編譯爲JavaScript的代碼，能夠訪問TypeScript的在線編譯地址，動手操做，印象更加深入。

基本類型

布爾值

TypeScript和JavaScript同樣，這是最簡單的數據類型爲boolean，也就是true和false。

let isDone: boolean = false;
複製代碼

數字

TypeScript和JavaScript同樣，TypeScript裏的全部數字都是浮點數，類型爲number。和ES6中同樣，TypeScript支持十進制，十六進制，二進制和八進制字面量。

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
複製代碼

字符串

咱們能夠用string來表示字符串，咱們能夠用下面幾種方式來表示。

let name: string = "bob"; //雙引號
let friend: string = 'LeBron'; //單引號

let boy: string = `Hello, my name is ${name}, my friend is ${friend}.`;  //模板字符串
let man: string = "Hello, my name is" + name + " , my friend is" + friend + ".";  //字符串拼接
複製代碼

數組

有兩種方式能夠定義數組。 一、能夠在元素類型後面接上 []，表示由此類型元素組成的一個數組：

let list: number[] = [1, 2, 3];
let listStr: string[] = ["奧", "利", "給"];
複製代碼

二、使用數組泛型，Array<元素類型>：

let list: Array<number> = [1, 2, 3];
let listStr: Array<string> = ["奧", "利", "給"];
複製代碼

元組 Tuple

元組類型容許表示一個已知元素數量和類型的數組，各元素的類型沒必要相同。

let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error


//訪問已知索引的元素，會獲得正確的類型
console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'

//訪問一個越界的元素，會使用聯合類型替代
x[3] = 'world'; // OK, 字符串能夠賦值給(string | number)類型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布爾不是(string | number)類型
複製代碼

這裏要注意一點：自從 TyeScript 3.1 版本以後，訪問越界元素會報錯，咱們不該該再使用該特性。

枚舉

枚舉enum類型是對JavaScript標準數據類型的一個補充。使用枚舉類型能夠爲一組數值賦予友好的名字。

enum Color {Red, Green, Blue}
let c: Color = Color.Green;
複製代碼

在默認的狀況下，是從0開始爲元素編號的，固然咱們也能夠手動指定成員的數值。

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;
複製代碼

Any

到了咱們的「anyscript」（調侃）了，若是不指定類型的話，就是默認是any。

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // ok
複製代碼

雖然說anyscript是一個調侃，可是any類型仍是十分有用的，咱們能夠在編譯的時候選擇性的包含或移除類型檢查。有時候，咱們會想要爲那些在編程階段還不清楚類型的變量指定一個類型。 這些值可能來自於動態的內容，好比來自用戶輸入或第三方代碼庫。 這種狀況下，咱們不但願類型檢查器對這些值進行檢查而是直接讓它們經過編譯階段的檢查。

//數組中元素的數據類型不同的狀況
let list: any[] = [1, true, "free"]; //ok

//若是數據類型定死的話，就會出錯
let list: number[] = [1, true, "free"]; // error
複製代碼

Void

在必定程度上。void和any是相反面，表示爲沒有任何類型。當一個函數沒有返回值時：

function warnUser(): void {
    console.log("奧利給");
}
複製代碼

咱們只能爲變量申明：undefined和null。

let unusable: void = undefined;
複製代碼

可是有時候可能會出現這種狀況：

let unusable: void = null; //Type 'null' is not assignable to type 'void'.
複製代碼

這是由於在tsconfig.json中把strict爲true致使的。

Null 和 Undefined

默認狀況下null和undefined是全部類型的子類型，也就意味着能夠賦值給其餘類型。

let u: undefined = undefined;
let n: null = null;
複製代碼

然而，當咱們指定了--strictNullChecks標記，null和undefined只能賦值給void和它們各自。

Never

never類型表示的是那些永不存在的值的類型。never類型是任何類型的子類型，也能夠賦值給任何類型；然而，沒有類型是never的子類型或能夠賦值給never類型（除了never自己以外）。 即便 any也不能夠賦值給never。

// 返回never的函數必須存在沒法達到的終點
function error(message: string): never {
    throw new Error(message);
}

// 推斷的返回值類型爲never
function fail() {
    return error("Something failed");
}

// 返回never的函數必須存在沒法達到的終點
function infiniteLoop(): never {
    while (true) {
    }
}
複製代碼

Object

object表示非原始類型，也就是除number，string，boolean，symbol，null或undefined以外的類型。

類型斷言

類型斷言（Type Assertion）能夠用來手動指定一個值的類型。也就是主觀地認爲這個變量的類型是什麼。它沒有運行時的影響，只是在編譯階段起做用。語法以下：

// <類型>值
let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length; // 值 as 類型 let someValue: any = "this is a string"; let strLength: number = (someValue as string).length; 複製代碼

當咱們在TypeScript裏使用JSX時，只有 as語法斷言是被容許的。

//須要在還不肯定類型的時候就訪問其中一個類型的屬性或方法
function getLength(something: string | number): number {
    if (something.length) {
        return something.length;
    } else {
        return something.toString().length;
    }
}          //報錯

//使用類型斷
function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}
複製代碼

變量聲明

定義方法

TypeScript和JavaScript聲明變量的方式是同樣的：var、let、const。只要對JavaScript有所瞭解，那麼用在TypeScript上問題就不大。

var a:number = 10;
let b:boolean = true;
const C:string = "10";
複製代碼

TypeScript中的一些相對JavaScript的特殊寫法：

let d:number|string = 10; // 用「|」表示這個變量能夠爲數字也能夠爲字符串
複製代碼

參考

github.com/zhongsp/Typ…

最後

文中有些地方可能會加入一些本身的理解，如有不許確或錯誤的地方，歡迎指出~