TypeScript 筆記:原始型別


Posted by SimonAllen on 2021-08-09

談 TypeScript 的型別種類之前,要有個認知:TypeScript 是 JavaScript 的超集合,最終編譯成 JavaScript,純 JavaScript 語法都是可以在 TypeScript 撰寫的。而在 JavaScript 有分成原始型別 Primitive types物件型別 Object types,TypeScript 內自然也有,並且還新增了其他的型別設定。

此篇先從原始型別開始,TypeScript 的原始型別(比照 JavaScript)有:number (數值)、string (字串)、boolean (布林值)、null、undefined 與 ES6 新增的型別 Symbol。

number

  • 型別註記:用:number來標註。
  • 型別斷言:用<number>即可。
const two: number = 2;

其他數值進位的表示法也可以用 number 型別限制。

const hex: number = 0xf00d;
const binary: number = 010101;

NaN 或 Infinity 這種在 JavaScript 中原本就是 number 型別的特殊值,在 TypeScript 也可以用 number 型別限制。

const nan: number = NaN;
const infinity: number = Infinity;

string

  • 型別註記:用:string來標註。
  • 型別斷言:用<string>即可。
const myName: string = "Simon"
const developer: string = "Front-end developer"

ES6 新增的字符串模板也可以用:

const description : string = `${myName} is a ${developer}`

boolean

  • 型別註記:用:boolean來標註。
  • 型別斷言:用<boolean>斷言。
const isTrue: boolean = true

null

  • 型別註記:用:null來標註。
  • 型別斷言:用<null>即可。
const isNull: null = null

另外,在 TypeScript 規則裡,null 是所有原始型別的子型別。在 TypeScript 中 null 可以賦值給其他已限制原始型別變數而不報錯,例如:

const a: symbol = null;

會編譯成

var a = null;

要想要嚴格限制 null 不能賦值給其他已限制型別變數的話,需要把 tsconfig.json 的 strictNullChecks 改成 true,見官網說明

undefined

  • 型別註記:用:undefined來標註。
  • 型別斷言:用<undefined>即可。
const isUndefined: undefined = undefined

另外,在 TypeScript 規則裡,undefined 也是所有原始型別的子型別。也就是說 undefined 在 TypeScript 中和 null 一樣,可以賦值給其他已限制原始型別變數而不報錯,例如:

const a: number = undefined;

會編譯成

var a = undefined;

要想要嚴格限制 undefined 不能賦值給其他已限制型別變數的話,一樣仍需要把 tsconfig.json 的 strictNullChecks 改成 true,見官網說明

Symbol

  • 型別註記:用:symbol來標註。
  • 型別斷言:用<symbol>即可。
const symbolFoo: symbol = Symbol("foo");

              

參考

TypeScript 新手指南
TypeScript: Typed JavaScript at Any Scale.
kobo 電子書:讓TypeScript成爲你前端開發的ACE!
Typescript 初心者手札


#TypeScript









Related Posts

完成 week6 切版新拖延運動表單!~

完成 week6 切版新拖延運動表單!~

extends & type narrowing

extends & type narrowing

Day 165

Day 165


Comments