🐕
設定ファイルに書く /** @type {import} */ って何？
概要
/** @type {typeName} */ コメントはJSDocの仕様。
波カッコ内にJSDocでサポートしている型を指定することでドキュメントできる。
https://jsdoc.app/tags-type.html
JSDocではプリミティブな型（string,boolean等）を指定できる他、@typedefで型定義することも出来る（TSでのtypeみたいな機能）。
で、TypeScriptはこの仕様を拡張している。
“@type”タグを使用すれば、型名(プリミティブ、TypeScript宣言やJSDocの”@typedef”タグで定義されたもの)を参照することができます。 ほとんどのJSDoc型と、stringのような最も基本的なものからConditional Typesのような高度なものまで、あらゆるTypeScriptの型を使うことができます。
指定できる型がJSDocの型名 + TSの型になる。
またimportを使った参照も可能になる。
importを使用した場合、通常のimportと同じように定義に飛ぶことも出来る。
詳細
@typeに指定しないといけないのは型である。
/** @type {string} */
importを使った場合も型を指定する。
// @filename: Hoge.ts
export type Hoge = string;
// @filename: index.ts
/** @type {import('./Hoge').Hoge} */
const xxx = '';
値から型を使いたい場合はtypeofする。
// @filename: Hoge.ts
export const Hoge = 'hogeee';
// @filename: index.ts
/** @type {typeof import('./Hoge').Hoge} */
const xxx = '';
node_modulesからimportする場合も考え方は同じ。
import {} from ‘’ するのと同じように型定義あるいは値を読み込んで指定する。
tailwind.config.jsの例
/** @type {import('tailwindcss').Config} */
module.exports = {
これは
import type { Config } from 'tailwindcss';
をJSDocコメントで付与していることに等しい。
参考にした投稿
Discussion