はじめに

VS CodeでSveltのチュートリアルをやっていた時に、propsの実装の際に以下のような赤線（VS Codeからのエラー提示）が出た。

今回はこれの原因と解決方法を備忘録として残す。

原因

jsconfig.jsonの以下の設定がtrueになっていたことが原因。

jsconfig.json

{
	"compilerOptions": {
		...
		/**
		 * Typecheck JS in `.svelte` and `.js` files by default.
		 * Disable this if you'd like to use dynamic types.
		 */
		"checkJs": true
	},
    ...
}

意味についてはコメントの通りで型をチェックするか？の設定。詳細はjsconfig Optionsを参照。

解決方法

JavaScriptで開発していて型は無視する、ということであればfalseに変えればいい。まあ、TypeScriptであればstringにnumberを渡すなんてありえん、という感じだがJavaScriptの緩い世界ではまあOKだろう。Sveltのチュートリアルを作った人はあまりそういうのは気にしていなかったのかな？（笑）

ちなみに、Sveltのコードは以下。

※Sveltのチュートリアルを https://learn.svelte.dev/tutorial/welcome-to-svelte ではなく、ローカル環境を構築してやった理由は、ESLintやPrettierのある世界で開発したかったため。