deno.com
本頁面內容

TypeScript 支援

TypeScript 在 Deno 中是一種一級語言，就像 JavaScript 或 WebAssembly 一樣。您無需安裝 Deno CLI 以外的任何東西，即可執行或導入 TypeScript。憑藉其內建的 TypeScript 編譯器，Deno 會將您的 TypeScript 程式碼編譯為 JavaScript，而無需額外設定。Deno 也可以類型檢查您的 TypeScript 程式碼，而無需像 tsc 這樣的獨立類型檢查工具。

類型檢查 跳到標題

TypeScript 的主要優勢之一是它可以使您的程式碼類型安全，在開發期間而不是執行時捕獲錯誤。TypeScript 是 JavaScript 的超集，這意味著語法上有效的 JavaScript 會變成 TypeScript，並帶有關於「不安全」的警告。

注意

Deno 預設以 strict mode 嚴格模式進行 TypeScript 類型檢查，TypeScript 核心團隊 建議將嚴格模式作為合理的預設值。

Deno 允許您使用 deno check 子命令來類型檢查您的程式碼（而不執行它）

deno check module.ts
# or also type check remote modules and npm packages
deno check --all module.ts
# code snippets written in JSDoc can also be type checked
deno check --doc module.ts
# or type check code snippets in markdown files
deno check --doc-only markdown.md

注意

類型檢查可能需要相當長的時間，尤其是在您處理一個變更頻繁的程式碼庫時。Deno 優化了類型檢查，但它仍然需要成本。因此，預設情況下，TypeScript 模組在執行前不會進行類型檢查。

當使用 deno run 命令時，Deno 將跳過類型檢查並直接執行程式碼。為了在執行之前對模組執行類型檢查，您可以將 --check 標誌與 deno run 一起使用

deno run --check module.ts
# or also type check remote modules and npm packages
deno run --check=all module.ts

當 Deno 在使用此標誌時遇到類型錯誤時，程序將在執行程式碼之前退出。

為了避免這種情況，您需要

  • 解決問題
  • 使用 // @ts-ignore 或 // @ts-expect-error 語法指示詞來忽略錯誤
  • 或完全跳過類型檢查。

當測試您的程式碼時，預設情況下會啟用類型檢查。如果需要，您可以使用 --no-check 標誌來跳過類型檢查

deno test --no-check

與 JavaScript 一起使用 跳到標題

Deno 執行 JavaScript 和 TypeScript 程式碼。在類型檢查期間，Deno 預設只會類型檢查 TypeScript 檔案。如果您也想類型檢查 JavaScript 檔案，您可以選擇在檔案頂部新增 // @ts-check 語法指示詞，或將 compilerOptions.checkJs 新增到您的 deno.json 檔案中。

main.js
// @ts-check

let x = "hello";
x = 42; // Type 'number' is not assignable to type 'string'.
deno.json
{
  "compilerOptions": {
    "checkJs": true
  }
}

在 JavaScript 檔案中，您不能使用 TypeScript 語法，例如類型註解或導入類型。但是，您可以使用 TSDoc 註解來向 TypeScript 編譯器提供類型資訊。

main.js
// @ts-check

/**
 * @param a {number}
 * @param b {number}
 * @returns {number}
 */
function add(a, b) {
  return a + b;
}

提供宣告檔案 跳到標題

當從 TypeScript 程式碼導入未輸入類型的 JavaScript 模組時，您可能需要為 JavaScript 模組提供類型資訊。如果 JavaScript 使用 TSDoc 註解進行註解，則不需要這樣做。如果沒有這種額外的類型資訊（以 .d.ts 宣告檔案的形式），TypeScript 會假設從 JavaScript 模組匯出的所有內容都是 any 類型。

tsc 會自動選取與 js 檔案位於同一目錄且具有相同基本名稱的 d.ts 檔案。Deno 不會這樣做。您必須在 .js 檔案（原始碼）或 .ts 檔案（導入器）中明確指定在哪裡可以找到 .d.ts 檔案。

在原始碼中提供類型 跳到標題

應該優先在 .js 檔案中指定 .d.ts 檔案，因為這樣可以更輕鬆地從多個 TypeScript 模組中使用 JavaScript 模組：您不必在每個導入 JavaScript 模組的 TypeScript 模組中指定 .d.ts 檔案。

add.js
// @ts-self-types="./add.d.ts"

export function add(a, b) {
  return a + b;
}
add.d.ts
export function add(a: number, b: number): number;

在導入器中提供類型 跳到標題

如果您無法修改 JavaScript 原始碼，則可以在導入 JavaScript 模組的 TypeScript 模組中指定 .d.ts 檔案。

main.ts
// @ts-types="./add.d.ts"
import { add } from "./add.js";

這對於不提供類型資訊的 NPM 套件也很有用

main.ts
// @ts-types="npm:@types/lodash"
import * as _ from "npm:lodash";

為 HTTP 模組提供類型 跳到標題

透過 HTTP 託管 JavaScript 模組的伺服器也可以在 HTTP 標頭中為這些模組提供類型資訊。Deno 將在類型檢查模組時使用此資訊。

HTTP/1.1 200 OK
Content-Type: application/javascript; charset=UTF-8
Content-Length: 648
X-TypeScript-Types: ./add.d.ts

X-TypeScript-Types 標頭指定了 .d.ts 檔案的位置，該檔案為 JavaScript 模組提供類型資訊。它相對於 JavaScript 模組的 URL 解析，就像 Location 標頭一樣。

瀏覽器和 Web Worker 的類型檢查 跳到標題

預設情況下，Deno 類型檢查 TypeScript 模組時，就好像它們在 Deno 執行時環境的主執行緒中執行一樣。但是，Deno 也支援瀏覽器的類型檢查、Web Worker 的類型檢查，以及瀏覽器-Deno 組合環境的類型檢查，例如在使用 Deno 進行 SSR（伺服器端渲染）時。

這些環境具有不同的全域物件和可用的 API。Deno 以函式庫檔案的形式為這些環境提供類型定義。這些函式庫檔案由 TypeScript 編譯器使用，以提供這些環境中可用的全域物件和 API 的類型資訊。

可以使用 deno.json 設定檔中的 compilerOptions.lib 選項，或透過 TypeScript 檔案中的 /// <reference lib="..." /> 註解來變更載入的函式庫檔案。建議在 deno.json 設定檔中使用 compilerOptions.lib 選項來指定要使用的函式庫檔案。

若要為 瀏覽器環境 啟用類型檢查，您可以在 deno.json 設定檔的 compilerOptions.lib 選項中指定 dom 函式庫檔案

deno.json
{
  "compilerOptions": {
    "lib": ["dom"]
  }
}

這將為瀏覽器環境啟用類型檢查，為諸如 document 之類的全域物件提供類型資訊。但是，這將停用 Deno 特定 API（如 Deno.readFile）的類型資訊。

若要為組合的 瀏覽器和 Deno 環境 啟用類型檢查，例如使用 Deno 進行 SSR，您可以在 deno.json 設定檔的 compilerOptions.lib 選項中指定 dom 和 deno.ns (Deno 命名空間) 函式庫檔案

deno.json
{
  "compilerOptions": {
    "lib": ["dom", "deno.ns"]
  }
}

這將為瀏覽器和 Deno 環境都啟用類型檢查，為諸如 document 之類的全域物件和 Deno 特定 API（如 Deno.readFile）提供類型資訊。

若要為 Deno 中的 Web Worker 環境（即使用 new Worker 執行的程式碼）啟用類型檢查，您可以在 deno.json 的 compilerOptions.lib 選項中指定 deno.worker 函式庫檔案。

deno.json
{
  "compilerOptions": {
    "lib": ["deno.worker"]
  }
}

若要在 TypeScript 檔案中指定要使用的函式庫檔案，您可以使用 /// <reference lib="..." /> 註解

/// <reference no-default-lib="true" />
/// <reference lib="dom" />

擴充全域類型 跳到標題

Deno 支援 TypeScript 中的環境或全域類型。當填補全域物件或使用其他屬性擴充全域作用域時，這很有用。在可能的情況下，您應避免使用環境或全域類型，因為它們可能會導致命名衝突，並使程式碼更難以理解。發布到 JSR 時也不支援它們。

若要在 Deno 中使用環境或全域類型，您可以使用 declare global 語法，或載入擴充全域作用域的 .d.ts 檔案。

使用 declare global 擴充全域作用域 跳到標題

您可以在專案中導入的任何 TypeScript 檔案中使用 declare global 語法，以使用其他屬性擴充全域作用域。例如

declare global {
  interface Window {
    polyfilledAPI(): string;
  }
}

這使得 polyfilledAPI 函數在導入類型定義時全域可用。

使用 .d.ts 檔案擴充全域作用域 跳到標題

您也可以使用 .d.ts 檔案來擴充全域作用域。例如，您可以建立一個具有以下內容的 global.d.ts 檔案

interface Window {
  polyfilledAPI(): string;
}

然後，您可以使用 /// <reference types="./global.d.ts" /> 在 TypeScript 中載入此 .d.ts 檔案。這將使用 polyfilledAPI 函數擴充全域作用域。

或者，您可以在 deno.json 設定檔的 compilerOptions.types 陣列中指定 .d.ts 檔案

{
  "compilerOptions": {
    "types": ["./global.d.ts"]
  }
}

這也將使用 polyfilledAPI 函數擴充全域作用域。

您找到需要的資訊了嗎？

編輯此頁面
隱私權政策