Stanley Yin

Typescript 初嘗試！

December 21, 2024

目錄

Typescript 簡介

TypeScript是由微軟進行開發和維護的一種開源的程式語言。TypeScript是JavaScript的嚴格語法超集，提供了可選的靜態型別檢查。

  • TypeScript extends JavaScript by adding types.
  • 一個基於 JavaScript 的超集合（SuperSet）
  • 提供型別系統（Type System），能夠在開發時期宣告型別
  • 支援 ECMAScript，可將 TS 檔編譯成 JS 檔給瀏覽器解讀

Typescript 功能

型別註解 Type annotation

在上述範例中，TypeScript 透過 Type annotation（型別註解），在參數或變數之後加上冒號 : type：

// 變數的型別註解
let name: string = 'Heidi';   

// 函式參數/回傳值的型別註解
function sayHello(person: string): string {
    return 'Hello, ' + person;
}

一旦宣告型別，就不能使用其他資料型別進行賦值，否則程式就會報錯（但 TypeScript Compiler 還是會編譯成 JS 檔）。

型別推論 Type Inference 

在 TS 檔中檢視上述範例程式碼，會發現不管有無明確註記型別，TypeScript 編譯器都會依照「型別推論」的規則，自動推斷出一個資料型別。

又以下方程式碼為例，雖然沒有指定值的型別，卻會在編譯時報錯：

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'

型別斷言 Type Assertion

// todo

2. 類型介紹

在變數後面用 : 宣告型別

// ===================== 基本類型 =====================
let str: string = 'hello world' // typescript這邊若有賦予變數值的話，會自動去推論型別，因此可以不用特別加

let str2: string // 沒有賦予值的時候需要加上宣告的型別
str2 = 123  // >>會報錯

let num: number = 1
let boo: boolean = true
let n: null = null
let un: undefined = undefined
let test: any = true // 盡量少用any

//  ===================== 陣列 =====================
const arr: string[] = ["a", "b"] // string array
const arr2: string[][] = [
  ["a", "b"],
  ["c", "d"],
] // 二維string array

//  ===================== Tuple 元組 =====================
const tom: [string, number] = ["Tom", 25]


//  ===================== Enum 枚舉、列舉 =====================
// 更詳細的用法可參考：https://medium.com/enjoy-life-enjoy-coding/typescript-%E5%96%84%E7%94%A8-enum-%E6%8F%90%E9%AB%98%E7%A8%8B%E5%BC%8F%E7%9A%84%E5%8F%AF%E8%AE%80%E6%80%A7-%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-feat-javascript-b20d6bbbfe00

enum ButtonSize {
  Small = 0,
  Medium = 1,
  Large = 2,
}

const ctaButton = ButtonSize.Medium
console.log(ctaButton)

//  ===================== Union =====================
// 聯合型別（Union Types）表示取值可以為多種型別中的一種。
let aaa: number | string
aaa = 123
aaa = "123"
aaa = true // >>會報錯

//  ===================== Type =====================
// 可以藉由type來重復使用型別
type A = number | string
let a1: A
a1 = 123
a1 = "123"
a1 = true // >>會報錯

type Post = {
  title: string
  index: number
}

const obj: Post = {
  title: "test",
  index: 1,
  content: "content", // 會報錯，沒有在type裡面定義
}

//  ===================== Interface =====================
interface User {
  name: string
  age: number
}

//  ===================== Object =====================
// ＊type跟interface兩者的差異在「是否能擴充」

interface Post1 {
  title: string
  index: number
}
// interface可以繼承之前Post1的並做擴充，但是type不行
interface Post1 {
  content: string
  keywords?: [] // ?為可選
}
const obj1: Post1 = {
  title: "test",
  index: 1,
  content: "content", 
}

//  ===================== function =====================
// 參數後用:定義型別
// 參數括號後面用 : 定義return的型別
const sum = (x: number, y: number): number => {
  return x + y
}


//  ===================== 泛形 =====================
// 有的時候參數的type會變動，為了避免重複寫一堆不同type的func，可以使用泛形在呼叫func時去做type的定義
const print<T> = (data:T) => {
	console.log(data)
}

print<number>(123)
print<string>(123) // ->會報錯
print<string>("123") // -> 不會報錯

bookmark

← Back