<code>vitest</code> と <code>eslint-plugin-import</code> に依存している環境では、vitest.config.ts内で <code>vitest/config</code> をインポートすると <code>Unable to resolve path to module 'vitest/config'. eslint(import/no-unresolved)</code> というエラーが出る場合があります。
これはnode_modules/vitest以下にconfig.d.tsだけがある状態で、config.jsの実体はdist/config.jsにあることが元で発生するようです。ディレクトリ構造を示すと次のようになります。
<pre><code>/node_modules/vitest
|-- dist
| |-- config.cjs
| |-- config.d.ts
| |-- config.js
`-- config.d.ts
</code></pre>
vitest/config.d.tsの内容はvitest/dist/config.jsでexportしているものをそのままexportしています。
<pre class="language-typescript"><code class="language-typescript">export * from './dist/config.js'
</code></pre>
<h2>解決方法</h2>
ESLintの設定ファイルで <code>import/resolver</code> 内の <code>node.extensions</code> の値に <code>d.ts</code> を追加すると <code>d.ts</code> 内のモジュール読み込みが解決できるようになり、ESLintの <code>import/no-unresolved</code> のエラーが無くなります。
<pre class="language-javascript"><code class="language-javascript">settings: {
 'import/resolver': {
 node: {
 extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
 },
 },
}
</code></pre>

eslint-plugin-importによってVitestの設定ファイル上でエラーが発生する場合がある

Preact と TypeScript を使った環境で Storybook を使おうとしたら以下のエラーが出ました。
<img src="https://blog-assets.kubosho.com/storybook_error.png" alt="Storybook上で出たエラー。ReferenceError: h is not definedと出ている。">
原因は Storybook を使うために必要なパッケージと Babel の設定が足りなかったことでした。
なので、<a href="https://github.com/storybookjs/storybook/tree/master/lib/cli#manually-specify-project-type">storybook/lib/cli#Manually specify project type</a>を参考に、次のコマンドを実行します。
<pre class="language-shell"><code class="language-shell">npx -p @storybook/cli sb init --type preact
</code></pre>
そして <code>.babelrc.js</code> を次のような設定にします。
<pre class="language-javascript"><code class="language-javascript">const presets = ['@babel/preset-env', '@babel/preset-typescript'];
const plugins = [
 [
 '@babel/plugin-transform-react-jsx',
 {
 runtime: 'automatic',
 importSource: 'preact',
 },
 ],
];

module.exports = { presets, plugins };
</code></pre>
これで Yarn を使っている環境であれば <code>yarn storybook</code> をターミナル上で実行することで、Storybook が表示されるようになります。
<h2>参考にしたページ</h2>
<ul>
<li><a href="https://github.com/preactjs/preact-compat/issues/541">Uncaught ReferenceError: h is not defined · Issue #541 · preactjs/preact-compat</a></li>
</ul>

PreactとTypeScriptを使った環境でStorybookを使う方法

<code>@types/node</code> に依存した状態で以下のようなコードを書いたときに <code>Type 'Timer' is not assignable to type 'number'.</code> というエラーメッセージが出ます。
<pre class="language-typescript"><code class="language-typescript">export class ExampleClass {
 intervalId: number;

 constructor() {
 this.intervalId = 0;
 }

 start() {
 this.intervalId = setInterval(() => {
 // do something
 }, 1000);
 }

 stop() {
 clearInterval(this.intervalId);
 this.intervalId = 0;
 }
}
</code></pre>
<h2>原因</h2>
<code>@types/node</code> に依存している場合 <code>setInterval()</code> の返り値が <code>NodeJS.Timer</code> となるためです。<code>@types/node</code> に依存していなければ <code>setInterval()</code> の返り値は <code>number</code> になります。
<ul>
<li><code>@types/node</code> の型定義: <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/010a8de/types/node/timers.d.ts#L73-L76">https://github.com/DefinitelyTyped/DefinitelyTyped/blob/010a8de/types/node/timers.d.ts#L73-L76</a></li>
<li>TypeScriptの <code>lib.dom.d.ts</code> の型定義: <a href="https://github.com/microsoft/TypeScript/blob/3431912/lib/lib.dom.d.ts#L16739">https://github.com/microsoft/TypeScript/blob/3431912/lib/lib.dom.d.ts#L16739</a></li>
</ul>
<h2>解決方法</h2>
<h3>1. <code>setInterval()</code> を使う箇所で <code>window.setInterval()</code> とする</h3>
<code>window</code> オブジェクトにある <code>setInterval()</code> の返り値の型は <code>number</code> となっています。なので <code>window.setInterval()</code> が使える環境であれば <code>window.setInterval()</code> と書き換えると解決できます。
参考: <a href="https://github.com/TypeStrong/atom-typescript/issues/1053#issuecomment-321126192">setInterval - Type 'Timer' is not assignable to type 'number' · Issue #1053 · TypeStrong/atom-typescript</a>
<h3>2. <code>setInterval()</code> の返り値を入れるプロパティの型を変更する</h3>
<code>window.setInterval()</code> と書き換える方法は、SSRをしているときには使えません。たとえばNext.jsを使っている場合にはエラーが出ると思われます。
この場合は以下のように <code>intervalId</code> の初期値に <code>null</code> を入れておいて、<code>clearInterval()</code> を実行するところで <code>setInterval()</code> の返り値が <code>this.intervalId</code> に入っているか確かめる方法があります。
<pre class="language-typescript"><code class="language-typescript">export class ExampleClass {
 intervalId: NodeJS.Timer | null;

 constructor() {
 this.intervalId = null;
 }

 start() {
 this.intervalId = setInterval(() => {
 // do something
 }, 1000);
 }

 stop() {
 if (this.intervalId) {
 clearInterval(this.intervalId);
 }

 this.intervalId = null;
 }
}
</code></pre>
<h3>3. <code>setInterval()</code> 全体を <code>Number()</code> で囲む</h3>
<a href="https://blog.csdn.net/ollin2012/article/details/88963553">关于typescript的定时器setInterval()坑_ollin2012的博客-CSDN博客_ts 定时器类型</a>で紹介されている手法を多少改変して、<code>setInterval()</code> 全体を <code>Number()</code> で囲んで <code>number</code> 型にtype assertionする手法もあります。
<pre class="language-typescript"><code class="language-typescript">export class ExampleClass {
 intervalId: number;

 constructor() {
 this.intervalId = 0;
 }

 start() {
 this.intervalId = Number(setInterval(() => {
 // do something
 }, 1000));
 }

 stop() {
 clearInterval(this.intervalId);
 this.intervalId = 0;
 }
}
</code></pre>
<h2>まとめ</h2>
手癖のように <code>intervalID</code> が入るところで初期値として <code>0</code> を代入していましたが、TypeScriptではハマる可能性が高いので気をつけましょう。

学ぶ、考える、書き出す。

タグ「TypeScript」の記事一覧