[分享] TypeScript's Basic <I>

chengyucai

Published in

LT Lab

5 min readAug 18, 2019

本篇分享關於TypeScript 基礎邏輯

以下是TypeScript中所使用的類型

Boolean

Boolean是最基本也是的數據類型，就是只有( true / false )的值

const value：Boolean     // only => true | fales

number

TypeScript中的所有數字都是浮點值，可支援的進制有以下幾種:

十進制(dec)
十六進制(hex)
八進制(oct)
二進制(bin)

let decimal: number = 6       // 十進制
let hex: number = 0xf00d      // 十六進制
let octal: number = 0o744     // 八進制
let binary: number = 0b1010   // 二進制

string

是基本的文本數據， TypeScript也使用雙引號（"）或單引號（'）來包圍字符串數據。

const name：string =`Lion travel` 
const exp：number = 7 
const text：string =` I have ${num} year coding experience `.

可以使用反引號(` backtick)，嵌入表達式 ${ }

Array

首先 Array 的 Interface 基本定義方法:

const value: Array<string>     // rule: Array<type>

可先定義型態為Array並在 <> 內定義此陣列的結構內部為何種型態

或者是用另一種方式:

const value: string[]    // rule: type[]

直接定義此變數由string所組成的陣列

如果需求有同時存在兩種以上的型態存在時，可利用以下方式:

const value: (number | string)[]    // rule: (type | type)[]

使用特殊符號 | 的方式，將兩種不同型態做共存的形式

Object

首先 Object 的 Interface 基本定義方法:

const value: Object      // Object: {}

Object的型態不像Array需強制定出內部結構，所以只要這樣做就可以了。基本上把Object type 當作是 json 的資料處理方式比較容易理解(需注意幾的重點)

JSON values cannot be one of the following data types:
. a function 
. a date
. undefined

如果是要定義 Object 的 Value 型態，可利用以下方式:

Object: { [key: string]: number }       //key only (string | number)

Key 即使定義也是無法改變 Object 的 Key 自身的屬性，所以無論是定義成字串或是數字結果都不會改變

Function

函數是JavaScript中任何應用程序的基本構建區塊。它可以作為一個模組使用。在TypeScript中，函數具有類別( classes)、命名( namespaces)和模組( modules)，函數在程序上有著關鍵的作用。TypeScript還為標準JavaScript函數添加了一些新功能，使其更易於使用

function add(x: number, y: number): number { 
    return x + y; 
}

函數的型別(Type)具有兩個部分：參數的類型和返回類型，

這兩個部分的參數類型是必須都寫出來，且參數的部分必須每個都賦予名稱和類型。(名稱是為了提高可讀性)

function mergeString(firstName: string, lastName: string) {
     return firstName + " " + lastName; 
}  
const rs1 = mergeString("Hello");                 // error
const rs2 = mergeString("Hello", "world", "T_T"); // error 
const rs3 = mergeString("Hello", "world");        // Hello world

在TypeScript中，函數在未設定默認參數的狀況下每個參數都需要，因為不給參數的狀況下，會被默認成 null 所以類型不合

function mergeString(firstName?: string, lastName = "React") {
     return firstName + " " + lastName; 
}  
const rs1 = mergeString("Hello");           // Hello React
const rs2 = mergeString("Hello", "world" ); // Hello world
const rs3 = mergeString( );                 // " React"

函數在設定默認參數或是可省略的狀況下

enum

是一種標準資料狀態型別，資料的內容在未設定的狀況下，是依據上一個的狀態做決定，舉例如下:

enum Color {Red = 1, Green, Blue}const colorName: string = Color[2];   // Displays 'Green'

如果把enum轉換成Object大致如下:

enum Color {Red = 1, Green = 4, Blue}Color = { 
   'red' = 1，
   'Green' = 4，
   'Blue'= 5，
   '1' = 'Red'，
   '4' = 'Green'，
   '5' = 'Blue'
}

any

在編寫程序時我們不知道的變量類型。這些值可以用any來表達內容類型

void

void有點像是相反的any 是沒有任何類型

結語

類型在未定義時基本就是自動以any來表達內容類型，但是盡量別用，為了使代碼更具可讀性和可測試性，即使是資料型態再複雜也因該避免使用any

[分享] TypeScript's Basic <I>

Written by chengyucai