Deno を使って JSX に型をつける方法の紹介です。
React の JSX に型をつける場合は、以下のように記述します。
/** @jsxImportSource npm:react@^19.0.0 */
/** @jsxImportSourceTypes npm:@types/react@^19.0.0 */
// @ts-types="npm:@types/react@^19.0.0"
import { useState } from "npm:react@^19.0.0";
export default function App() {
const [count, setCount] = useState(0);
return <div>Hello world {count}</div>;
}
以上の書き方で、JSX 部分と、React からのインポート部分に型が付きます。
解説
jsxImportSource は jsx のファクトリー関数を指定するためのプラグマです。
内部的には、このプラグマに指定したパッケージから以下のようにファクトリー関数がインポートされ、JSX タグのトランスパイルに利用されます。
import { jsxs as _jsxs } from "npm:react@^19.0.0/jsx-runtime";
import { useState } from "npm:react@^19.0.0";
export default function App() {
const [count, setCount] = useState(0);
return _jsxs("div", { children: ["Hello world ", count] });
}
jsxImportSourceType は Deno の独自なプラグマで、jsxImportSource で指定した jsx ファクトリー関数に型をつけるために指定します。ここでは、DefinitelyTyped の npm:@types/react@^19.0.0 を型として指定します。
@ts-types は1行下の npm:react@19.0.0 のインポートに対して型を与えるプラグマです (react はパッケージに型情報が内包されていないため、このような @types/react の明示的な指定が必要になります。例えば、preact の場合はパッケージに型情報ファイルが同梱されているため、このような @ts-types の指定は不要になります)。
deno.json で指定する
jsxImportSource と jsxImportSourceType は上記のようにソースコード中のプラグマで指定することも出来ますが、deno.json の中に記述する事も出来ます。ファイル数が多い場合などはこちらの記述方法の方が重複を減らす事ができます。
上のプラグマ指定と同値な deno.json の指定は以下になります。
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "npm:react@^19.0.0",
"jsxImportSourceTypes": "npm:@types/react@^19.0.0"
}
}
上の記述をすると、ソースコード内のプラグマの記述は不要になります。
preact の場合
React の代わりに preact を使う場合は、記述が少し簡単になります。preact はパッケージ内に型情報が同梱されているため、@jsxImportSourceTypes や @ts-types の指定が不要になります。
/** @jsxImportSource npm:preact@^10.25.2 */
import { useState } from "npm:preact@^10.25.2/hooks";
export default function App() {
const [count, setCount] = useState(0);
return <div>Hello world {count}</div>;
}
preact の場合は以上の記述で、JSX とパッケージからの import に型がついた状態になります。
この jsxImportSource を deno.json 内に記述したい場合は、React の場合と同様に
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "npm:preact@^10.25.2"
}
}
となります。
Happy React Programming in Deno!
注: 他にも esm.sh を使う方法など、いろいろな別解があります。本記事では、Deno 本体の機能のみを使って JSX に型をつける方法を紹介しました。