TypeScript基礎入門 - 基礎類型

轉載地址

TypeScript基礎入門 - 基礎類型

項目實踐倉庫

https://github.com/durban89/typescript_demo.git
tag: 1.0.2

爲了保證後面的學習演示須要安裝下ts-node，這樣後面的每一個操做都能直接運行看到輸出的結果。

npm install -D ts-node

後面本身在練習的時候能夠這樣使用

npx ts-node src/learn_basic_types.ts

npx ts-node 腳本路徑

基礎類型簡介

TypeScript支持與JavaScript幾乎相同的數據類型，包括：數字，字符串，結構體，布爾值等。此外還提供了實用的枚舉類型方便咱們使用。

布爾值

最基本的數據類型就是簡單的true/false值，在JavaScript和TypeScript裏叫作boolean（其它語言中也同樣）。

// 布爾值
let isDone: boolean = false;
console.log('isDone = ', isDone);

運行後結果以下

isDone =  false

數字

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

// 數字
let number1: number = 6;
let number2: number = 0xf00d;
let number3: number = 0b1010;
let number4: number = 0o744;

console.log('number1 = ', number1);
console.log('number2 = ', number2);
console.log('number3 = ', number3);
console.log('number4 = ', number4);

運行後結果以下

number1 =  6
number2 =  61453
number3 =  10
number4 =  484

字符串

JavaScript程序的另外一項基本操做是處理網頁或服務器端的文本數據。 像其它語言裏同樣，咱們使用 string表示文本數據類型。 和JavaScript同樣，可使用雙引號（"）或單引號（'）表示字符串。

let title: string = "gowhich"
console.log('title = ', title);

運行後結果以下

title =  gowhich

你還可使用模版字符串，它能夠定義多行文本和內嵌表達式。 這種字符串是被反引號包圍（`），而且以${ expr }這種形式嵌入表達式

let firstName: string = "Durban";
let age: number = 42
let sentence: string = `==
Hello, 你們好，我是${firstName}

下個月我就${age}歲大了。
`;
console.log(sentence);

運行後結果以下

==
Hello, 你們好，我是Durban

下個月我就42歲大了。

數組

TypeScript像JavaScript同樣能夠操做數組元素。 有兩種方式能夠定義數組。 第一種，能夠在元素類型後面接上 []，表示由此類型元素組成的一個數組：

let list1: number[] = [1,2,3];

運行後結果以下

[ 1, 2, 3 ]

第二種方式是使用數組泛型，Array<元素類型>：

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

運行後結果以下

[ 1, 2, 3 ]

元組 Tuple

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

// 聲明元組類型
let x: [string, number]
// 正確的初始化x
x = ["durban", 42]
// 錯誤的初始化
// x = [42， "durban"]
console.log('x = ', x);

運行後結果以下

x =  [ 'durban', 42 ]

當訪問一個已知索引的元素，會獲得正確的類型：

console.log(x[0].substr(1));
// console.log(x[1].substr(1)); // number 沒有substr

當訪問一個越界的元素，會使用聯合類型替代：

x[3] = "world"
console.log(x[5])
console.log('x = ', x);
// x[6] = true // Error, 布爾不是(string | number)類型

運行後的結果以下

undefined
x =  [ 'durban', 42, <1 empty item>, 'world' ]

聯合類型是高級主題，咱們會在之後的分享中介紹。

枚舉

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

enum Color {Red, Green, Blue}
let c: Color = Color.Green;
console.log('c = ', c)

運行後結果以下

c =  1

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

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;
console.log('c = ', c)

運行後結果以下

c =  2

或者，所有都採用手動賦值：

enum Color {Red = 1, Green = 4, Blue = 8}
let c: Color = Color.Green;
console.log('c = ', c)

運行後結果以下

c =  4

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

enum Color {Red = 1, Green = 4, Blue = 8}
let c: string = Color[4];
console.log('c = ', c)

運行後結果以下

c =  Green

Any

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

let notSure: any = 4
notSure = false
notSure = "A string"

在對現有代碼進行改寫的時候，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, 'durban'];
console.log(list[1])
list[1] = 100;
console.log(list[1])

運行後結果以下

true
100

Void

某種程度上來講，void類型像是與any類型相反，它表示沒有任何類型。 當一個函數沒有返回值時，你一般會見到其返回值類型是 void：

function noReturn(params:string): void {
    alert("HaHa");
}

聲明一個void類型的變量沒有什麼大用，由於你只能爲它賦予undefined和null：

let unusable: void = undefined;
console.log('unusable = ', unusable);

運行後結果以下

unusable =  undefined

Null 和 Undefined

TypeScript裏，undefined和null二者各自有本身的類型分別叫作undefined和null。 和void類似，它們的自己的類型用處不是很大：

let u: undefined = undefined
let n: null = null
n = undefined
u = null

默認狀況下null和undefined是全部類型的子類型。 就是說你能夠把 null和undefined賦值給number類型的變量。

然而，當你指定了--strictNullChecks標記，null和undefined只能賦值給void和它們各自。 這能避免 不少常見的問題。 也許在某處你想傳入一個 string或null或undefined，你可使用聯合類型string | null | undefined。

注意：咱們鼓勵儘量地使用--strictNullChecks，但在本手冊裏咱們假設這個標記是關閉的。

Never

never類型表示的是那些永不存在的值的類型。 例如， never類型是那些老是會拋出異常或根本就不會有返回值的函數表達式或箭頭函數表達式的返回值類型； 變量也多是 never類型，當它們被永不爲真的類型保護所約束時。

never類型是任何類型的子類型，也能夠賦值給任何類型；然而，沒有類型是never的子類型或能夠賦值給never類型（除了never自己以外）。 即便 any也不能夠賦值給never。下面是一些返回never類型的函數:

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

// 推斷的返回值類型爲never
function Failed() {
    return error("Fauled");
}
// 返回never的函數必須存在沒法達到的終點
function infiniteLoop(): never {
    while (true) {
        
    }
}

Object

object是表示非基本類型的類型, 例如除了number, string, boolean, symbol, null, or undefined以外的類型
使用object類型，像Object.create等APIs。以下代碼

declare function create(o: object | null) :void ;
create({ prop: 0 })
create(null)
// create(42) // 會報錯
// create("string") // 會報錯
// create(false) // 會報錯
// create(undefined) // 會報錯

類型斷言

有時候你會遇到這樣的狀況，你會比TypeScript更瞭解某個值的詳細信息。 一般這會發生在你清楚地知道一個實體具備比它現有類型更確切的類型。

經過類型斷言這種方式能夠告訴編譯器，「相信我，我知道本身在幹什麼」。 類型斷言比如其它語言裏的類型轉換，可是不進行特殊的數據檢查和解構。 它沒有運行時的影響，只是在編譯階段起做用。 TypeScript會假設你，程序員，已經進行了必須的檢查。
類型斷言有兩種形式。 其一是「尖括號」語法：

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語法斷言是被容許的。

關於let

你可能已經注意到了，咱們使用let關鍵字來代替你們所熟悉的JavaScript關鍵字var。 let關鍵字是JavaScript的一個新概念，TypeScript實現了它。 咱們會在之後詳細介紹它，不少常見的問題均可以經過使用 let來解決，因此儘量地使用let來代替var吧。

這裏有個知識點要注意下
就是對須要編譯的文件進行處理的邏輯

"include": [
    "src/**/*.ts"
],

能夠作模糊的匹配而後將匹配的文件進行編譯

"files": [
    "src/main.ts"
],

是作具體的文件匹配，同時指定要輸出的目錄
在compilerOptions配置中加入

"outDir": "./dist",

本次實例分享結束實踐項目地址

https://github.com/durban89/typescript_demo.git
tag: 1.0.3