svelteでコンポーネントの練習とか

コンポーネントのパスはこんな感じでおいた方が良い
src/component/component-pra/child1/+page.svelte

外からpropsを渡す時はこんな感じでexportキーワードで指定すること

<script>
	export let name = 'じろう';
</script>

<p>名前が入るよ{name}</p>

呼ぶ時はこんな感じ。
デフォルトキーワードもできる

<script>
	import Child from '../../component/component-pra/child1/+page.svelte';
	let props = '渡す'
</script>

<div>
	<h1>ああ</h1>
	<Child name='太郎'/>
	<Child />
	<Child name={props}/>
</div>

toke

svelteの公式本ではこんな感じで紹介されてる

toke

scelteでtsを使うとこのような書き方になる

型は
大文字から初め、型名[]と記載する

<script lang="ts">
	type User = {
		name: string;
		age: number;
	}
	export let users: User[];
</script>

<ul>
	{#each users as user}
		<li>名前: {user.name} 年齢: {user.age}</li>
	{/each}
</ul>

toke

こんな感じで型を描く必要がある

type Confirm = {
  open: boolean
  title: string
  message: string
  cancelLabel: string
  resolve: (v: boolean) => void
}

export const useConfirm = () => {
  const confirm = reactive<Confirm>({
    open: false,
    title: '',
    message: '',
    cancelLabel: 'キャンセル',
    resolve: () => {},
  })

toke

<>はジェネリックで後から呼び出す時に型を入れますよ、ってやつ。

toke

ジェネリックは、後から共通の型を入れたいから、とりあえずTと書いておいて、呼ぶときに<>の中に型を渡すやり方

function chooseRandomly<T>(v1: T, v2: T): T {
  return Math.random() <= 0.5 ? v1 : v2;
}
chooseRandomly<string>("勝ち", "負け");
chooseRandomly<number>(1, 2);
chooseRandomly<URL>(urlA, urlB);

toke

svelteの公式に良い感じのサンプルあるから参考にすること。

https://svelte.dev/playground/onmount
基本的に公式を参考にすること。

公式は絶対正しい
理解抜きにすれば公式学べば楽できる。

だが定期的に公式のサンプルコードなぞったりして実験しないと自分で書く時詰まる

toke

サンプルは絶対正しい。
問題の切り分けをするために絶対に動くはずのコードを試すのが正しい。
動いたら、自分がおかしい事は分かる。