眾所皆知 JavaScript 是弱型別(Weak Typing)的語言,因此常會發生賦值錯誤導致編譯出錯,TypeScript 可視為進階版 JavaScript,提供靜態型別定義和檢查,目標是讓開發者在編寫 JavaScript 時擁有更好的開發體驗和更高的程式碼可讀性,提升專案穩定度。
基本說明
- TypeScript 是基於 JavaScript 的超集合(SuperSet),提供型別系統(Type System),能夠在開發時宣告型別
- 必須編譯成 JavaScript 檔案,瀏覽器、後端框架、Node.js 環境…才能閱讀
- 類型的定義可以減少 bug,能在編譯前預先檢查,避免許多運算錯誤
- TypeScript 只會進行靜態檢查,編譯時即使報錯,還是會產生編譯結果,仍然可以使用編譯後的 JavaScript 檔
廣告
環境建置與相關指令
- 安裝 TypeScript:
npm install -g typescript
- 進入專案資料夾,輸入
tsc —-init
建立 tsconfig.json- 設定
rootDir
&outDir
路徑 - 開啟
inlineSourceMap: true
- 設定
tsc
:將指令路徑rootDir
內所有 .ts 檔編譯為 .js 檔存放於outDir
tsc fileName.ts
:將指定路徑rootDir
內fileName.ts
檔編譯為fileName.js
tsc —-watch
:進行動態監聽
原始資料型別(Primitive Data Types)
String
字串型別:const str: string = 'hello'
Number
數字型別,包括整數和浮點數:const num: number = 1000
Boolean
布林型別:const boo: boolean = true
Null
:const n: null = null
Undefined
:const un: undefined = undefined
Symbol
:ES6 新型別,是一個唯一且不可變的值,使用 Symbol() 函數來建立一個 Symbol 值,可以參考 這篇文章
物件型別(Object Types)
Object
物件型別
|
Array
陣列型別
使用型別搭配中括號 []
表示法
|
或是陣列泛型(Array Generic)Array<type>
表示法
|
Function
函式型別
|
『選填』的參數如果沒加上判斷會拋錯,因參數有可能為 undefined
,見以下範例
|
須加上判斷條件,改寫如下
|
TypeScript 特有型別
Any
任意型別,等同於不定義型別,可以賦值給任何型別
|
Unknown
:類似any
型別,但any
可以賦值給任何型別,unknown
只能賦值給any
和自己
|
Never
:函式發生無窮迴圈,或是出現例外狀況拋錯誤
|
Void
空值:通常用於表示函式沒有回傳值
|
瀏覽器 DOM 與 BOM 型別
HTMLElement
:所有 HTML 元素的基本型別,包含<div>
、<p>
、<span>
…HTMLInputElement
:代表<input>
元素HTMLTextAreaElement
:代表<textarea>
元素HTMLAnchorElement
:代表<a>
元素HTMLFormElement
:代表<form>
元素HTMLSelectElement
:代表<select>
元素HTMLFormElement
:代表<form>
元素HTMLTableElement
:代表<table>
元素MouseEvent
:代表滑鼠事件KeyboardEvent
:代表鍵盤事件inputEvent
:代表輸入事件FocusEvent
:代表焦點事件
參考資源:
https://willh.gitbook.io/typescript-tutorial/basics/primitive-data-types
https://www.youtube.com/watch?v=GinkGJZBHIY
廣告
評論