😎
Svelteでコンポーネント作るときにHTML属性のtype補完を効かせる方法
またReactとの比較になってしまいますが
Reactの場合
import { ButtonHTMLAttributes, FC } from 'react';
type ButtonProps = ButtonHTMLAttributes<{}>
export function Button(props: ButtonProps) {
return <button {...props}>hello</button>
}
以下のように補完が効きます。
Svelteの場合
ほぼ同じ書き方になりますが
<script lang="ts">
import type { HTMLButtonAttributes } from "svelte/elements";
interface $$Props extends HTMLButtonAttributes {}
</script>
<button {...$$props}>
hello
</button>
余談
reactの場合はやはりtsとの相性がよく、カーソル当てたときにpropsの定義を確認することができます。
svelteの場合はclassになってしまい、type情報は確認できません。
参考
Discussion