iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
1
Modern Web

高效 Coding 術:Angular Schematics 實戰三十天系列 第 11

[高效 Coding 術:Angular Schematics 實戰三十天] Day10 - 與 TypeScript Compiler API 的初次接觸

  • 分享至 

  • xImage
  •  

關於 TypeScript Compiler API

相信大家都知道什麼是 TypeScript ,而 TypeScript Compiler API 就是 TypeScript 它們自己在編譯時所使用的 API ,透過使用它可以更便利、直觀地透過程式來掃描、解析我們用 TypeScript 所撰寫的程式碼。

使用的方式非常簡單,只要專案內有用到 TypeScript 的話,可以像這樣直接引入並使用:

import * as ts from 'typescript';

注意: TypeScript 的版本要在 1.6 版以上方可使用,目前最新的版本是 3.6.3

起手式

先來個起手式暖暖身:

ts.createSourceFile(
  'test.ts',
  `const name = 'Leo';`,
  ts.ScriptTarget.ES2015,
  true,
  ts.ScriptKind.TS
);

createSourceFile 這個函式的功能是用來建立檔案,是在使用 TypeScript Compiler API 時,百分之百一定會使用到的函式。

它有五個參數:

  1. fileName: string - 檔案名稱。
  2. sourceText: string - 檔案內容。
  3. languageVersion: ScriptTarget - 語言版本。
  4. setParentNodes?: boolean - 是否要為每個節點設置 parentNode (父節點)這個屬性,預設為 false
  5. scriptKind?: ScriptKind - 檔案類型,如為 .ts 檔可不給。

AST

AST( Abstract Syntax Tree ,抽象語法樹) 是一個大型的樹狀結構 ,它的結構其實跟 DOM 很像,如下圖所示:

Imgur

之所以說它們很像,是因為它們都是由一個個的節點 Node 所組成,差別只在於各自節點的資料內容與資料結構不同罷了。

以下是 AST 節點幾個比較重要的屬性:

  • kind: SyntaxKind - 該節點的類型, 所有類型都定義在 SyntaxKind` 這個列舉裡(總共 378 種)。
  • parent: Node - 該節點的父節點的資料(如果在使用 ts.createSourceFile 時沒有傳入第四個參數或是該參數給 false 時,此欄位不會有資料)。
  • flags: NodeFlags - 該節點的註記類型,所有類型都定義在 NodeFlags 這個列舉裡(總共 27 種)。
  • pos: number - 該節點所屬程式碼的開始位置。
  • end: number - 該節點所屬程式碼的結束位置。

拿起手式的例子來說,結構大致會長得像是下圖這樣:

Imgur

  • SourceFile 是整個 AST 的根節點,無論檔案內有沒有內容,一定會有它。
  • VariableStatement 表示在這個檔案中,有一個宣告變數的節點,這個節點基本上就代表著 const name = 'Leo'; 這一行。
  • VariableDeclarationList 這個節點代表 const name = 'Leo'
  • VariableDeclaration 這個節點代表 name = 'Leo'
  • nameIdentifier'Leo'StringLiteral
  • 最後則是 EndOfFileToken ,是整個 AST 中最末梢的節點,無論檔案內有沒有內容,一定會有它。

如果文字敘述有點讓你暈頭轉向的話,筆者換個比較清楚一點的方式表達:

Imgur

本日結語

轉眼就來到了第十天,寫鐵人賽就是這麼的樸實無華且枯燥。

今天主要是先跟大家說明 TypeScript AST 與 Compiler API 的基礎原理,雖然沒有程式碼較令人感到枯燥乏味,但一切都是為了明天的應用所鋪路。

明天將會分享如何使用 TypeScript Compiler API 來修改現有檔案內的程式碼,敬請期待!

參考資料


上一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day09 - 撰寫支援 Angular 專案的 Schematics 的測試程式
下一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day11 - 用 TypeScript Compiler API 來修改檔案內容
系列文
高效 Coding 術:Angular Schematics 實戰三十天32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Will 保哥
iT邦新手 2 級 ‧ 2019-09-27 19:47:13

好文推推! ?

我要留言

立即登入留言