DenoにおけるTypeScriptの独自拡張について
#Deno #TypeScript #tsc #swc
はじめに
Denoは本体にtscを組み込んでおり、TypeScriptの型チェックなどを行うことができます
Denoはdeno docやdeno lintなどの実装やトランスパイルなどの用途ではtscではなくswcを使っています (用途に応じてtscとswcが使い分けられています)
これらのTypeScriptのサポートに関して、Denoはいくつか独自の拡張を加えています
設定関連
TypeScriptに関する設定について
Denoではdeno.jsonまたはdeno.jsoncのcompilerOptionsによってTypeScriptに関する設定を変更できます
基本的にはtsconfig.jsonと同じ内容を指定できますが、いくつか独自の設定などが導入されています
compilerOptions.jsx: "precompile"
詳細はprecompiled JSX transformを参照
compilerOptions.jsxPrecompileSkipElements
これは上記のprecompiled JSX transformに関連した設定です
compilerOptions.jsxImportSourceTypes
DenoはReact v17で導入されたJSX Transformをサポートしています
このJSX Transformによって<some-package>/jsx-runtimeを読み込むコードが生成されますが、Denoはこのファイルに対して適切な型を当てることができないため、deno checkコマンドなどでエラーが発生する課題(#18203)がありました (@ts-types(または@deno-types)プラグマを使用することも不可)
この課題を解決するためにDeno v1.43.0で導入されたのがcompilerOptions.jsxImportSourceTypes (@jsxImportSourceTypesプラグマ)です
code:deno.json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "npm:react@18.3.1",
"jsxImportSourceTypes": "npm:@types/react@18.3.1"
}
}
型チェック
@ts-types(@deno-types)プラグマ
JavaScriptで書かれた外部ライブラリをimportする際に、そのライブラリに対して任意の型を指定するための機能です
code:typescript
// @ts-types="https://esm.sh/testdouble@3.16.1/index.d.ts"
export * as td from "https://esm.sh/testdouble@3.16.1/dist/testdouble.js";
X-TypeScript-Typesヘッダー
これも@ts-types(@deno-types)プラグマと同様に、JavaScriptで書かれたモジュールに対して型定義を適用するための仕組みです
Denoがリモートモジュールをダウンロードした際に、レスポンスにX-TypeScript-Typesヘッダーが設定されていた場合、そこで指定されたURLに追加で問い合わせを行います。その追加の問い合わせにより返却された型定義ファイルを、元のモジュールの型定義として適用してくれます。
esm.shやSkypackなどがX-TypeScript-Typesヘッダーをサポートしています
fast check
jsrパッケージに関する型チェックを高速化するために導入された独自の仕組みです
deno publishなどのコマンドを実行する際に、jsrパッケージにslow typesが含まれていないかチェックします
slow typesとは明示的に型が宣言されておらず、ソースコードを元に型定義を判断する必要のある関数などの定義を指します
パッケージの公開APIでslow typesが使用されていると、パッケージの利用者が型チェックをする際の実行時間の増加などの問題が起きうるため、jsrではこのslow typesを公開APIに含むパッケージはできる限り公開しないことが推奨されます (deno publishを実行する際にデフォルトでfast checkが実行されます)
feat(unstable): fast subset type checking of JSR dependencies (#21873)
リンク
Denoにおけるfetch APIの拡張や独自仕様について
precompiled JSX transform
Import Maps