Skip to main content

型別系統 Type System

簡介​

比如以"happy" 來說他表示了:

  1. 他是 String 型別
  2. 除了有值，還包含了 String 該有的屬性和方法

在 JS 裡面，String 有一些方法

charAt();
charCodeAt();
concat();
includes();
endsWith();
indexOf();
lastIndexOf();
localeCompare();
match();

當我們先告訴系統這是一個 string, number

interface Todo {
  id: number;
  title: string;
  finished: boolean;
}

它就會自動幫我們找到該型別的方法，並偵測我們有沒有寫錯。

提早發現開發時寫錯的內容。

所有的型別請看官網

Primitive & Object Type​

在 TypeScript 的 Types 裡分為 Primitive Type & Object Type

  1. Primitive: number, boolean, void, undefined, string, symbol, null.
  2. Object: functions, arrays, classes, objects.

Type annotation & Type inference​

Type annotation & Type inference 是兩種讓 TypeScript 知道 variables, functions, objects 型別的方法。

  • Type annotation : 開發者告訴 TypeScript 是哪種型別。
  • Type inference : 由 TypeScript 去猜測。

Type annotation​

Annotation with Variables​

用 Annotation 的方式告知 TypeScript 這個變數的型別為何 :

const studentId: number = 8;
let speed: string = "slow";

以上就是用 annotation 告訴 TypeScript :

studentId 是 number 型別，speed 是 string 型別。

這時比如我們要覆蓋 speed 為 120。

let speed = 120;

這時 vscode 底下就會畫紅線告知型別錯誤。

另外，

宣告內建型別也可以，以下是 Date 的例子:

let now: Date = new Date();

Array with Annotation​

let colors: string[] = ["red", "blue", "green"];
let phones: number[] = [5566, 2412, 9384];

Class with Annotation​

class Student {}

let stu: Student = new Student();

Object literal​

let point: { no: number; name: string } = {
  no: 10,
  name: "Tom",
};

更多細節可參考官方文件