關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

基本型態 Typescript - Basic Types [中文]

安裝typescript

npm install -g typescript

接著測試看看是否能正常運作
先建立一個 helloworld.ts
內容寫入

let hi: string = "helloworld";

接著在下指令

tsc helloworld.ts

如果有產生一個對應的helloworld.js 那就代表能正常運作

var hi = "helloworld";

Basic Types

紀錄一些Typescipt基本型態用法,主要參考自Typescript官網 Basic Types https://www.typescriptlang.org/docs/handbook/basic-types.html

Boolean

let isDone: boolean = false;

Number

在typescirpt中,所有numbers都是以符點數來表示,因此可以支援十六進位、十進位、八進位、二進位數值格式。

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

String

可以像其他語言一樣,用string來表示字串型態,也可以像javascript一樣,用單引號或雙引號包住,就能表示為字串格式。

比較特別的是,如果使用反引號 - backtick/backquote ( ` ),則可以支援跨多行字串,以及可以用 ${ expr } 來崁入值。

//用string或引號來描述字串

let color: string = "blue";
color = 'red';

//使用反引號

let fullName: string = `Bob Bobbington`;
let age: number = 37;

//可以用 ${} 來崁入值

let sentence: string = `Hello, my name is ${ fullName }.
I'll be ${ age + 1 } years old next month.`

Array

typescript像javascript一樣,允許你使用值來儲存陣列,有兩種方式可以存成陣列格式,第一種是直接使用[],第二種是宣告Array<elementType>

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

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

Tuple

tuple可以允許以陣列形式,描述要儲存的類型
會一一檢查每一個位置儲存的值是否符合類型

// Declare a tuple type

let x: [string, number];
// Initialize it

x = ["hello", 10]; // OK

// Initialize it incorrectly

x = [10, "hello"]; // Error

Enum

跟C#的 enum一樣,可以用來定義常數,例如下方宣告後,就可以自動得到 a=0, b=1, c=2

enum Color {a, b, c};

當然,可以自行更改起始數值,例如,從1開始,而不是從0

enum Color {a=1, b, c};

更進一步,也可以分別定義每一個的值

enum Color {a=2, b=4, c=6};

Any

如果無法預期會存入甚麼樣的值,就可以用any
例如,再透過第三方取得的值,就可能會發生這種情況

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

Void

跟any很像,當不清楚類型時,就會使用void。
通常,都會在返回 function 類型(不會返回值的情況)時,使用void。
對void而言,不能像變數一樣儲存值,僅僅可以儲存undefined或null值。

function warnUser(): void {
    alert("This is my warning message");
}

let unusable: void = undefined;

Type assertions

Type assertions 稱為 斷言。
通常會發生一些情況,有些值得屬性跟你所知道的不同,這時候就可以透過type assertions的方式改變類型。
所以,斷言有點像是"相信我,改成這樣就對了"的意思。
有兩種方式可以做出斷言,第一種是使用尖括弧(angle-bracket)描述類型,第二種是用 as

let someValue: any = "這是字串";
//方法一 使用尖括弧

let strLength: number = (<string>someValue).length;
//方法二 使用 as

let strLength: number = (someValue as string).length;

關於 let

在使用Typescript時,會發現聲明變數時,幾乎都是使用 let 而不是 var 。
事實上,let跟var非常像,let是Typescript最先提出的新構想,將會在之後陸續說明原因,總而言之,使用let將可以避免掉許多常見的問題,因此建議不要使用var。

var 會產生溢出 function 或作用區域的問題, let 則可以避免掉這種情況。
例如: 下方這範例,如果改成var,最下方的b就會返回值。

function f(input: boolean) {
    let a = 100;

    if (input) {
        // Still okay to reference 'a'

        let b = a + 1;
        return b;
    }

    // Error: 'b' doesn't exist here

    return b;
}

另一方面,var 可以反覆被定義,例如 var x=1; var x=2; ,同時定義兩次不會返回錯誤。
但是對 let 而言,禁止產生聲明干擾的情況。

let x = 10;
let x = 20; // error: can't re-declare 'x' in the same scope


function f(x) {
    let x = 100; // error: interferes with parameter declaration

}

function g() {
    let x = 100;
    var x = 100; // error: can't have both declarations of 'x'

}

let 也可以同時定義多個變數,例如:

let {a, b}: {a: string, b: number} = o;

關於 const

const 是晉級的變數聲明方式 - 常數;當使用const聲明之後,就不能再重新分配。


如果你喜歡我們的文章內容,請在這裡按個讚



Typescript basic_type

最新文章推薦