型安全なテンプレートレンダリング

AccellaではページのレンダリングにAstroコンポーネントを利用します。 AstroコンポーネントはReactのJSXやVueのSFCのように、TypeScriptを利用して型安全なコンポーネントを記述することができます。

この型安全性は、他のサーバーサイド向けのテンプレートエンジン（JavaScript向けのEJSやPug、Ruby向けのERB、Python向けのJinja2など）を使うのと比較して、コードの品質向上に役立ちます。

コンポーネントの型チェック

存在しない変数やメソッドを参照すると、TypeScriptの型チェッカーがエラーを出してくれます。

src/components/SampleWithVar.astro

---
const name = "Accella";
---
<p>{name}</p>  <!-- <p>Accella</p> を出力 -->
<p>{foo}</p>  <!-- エラー: 'foo' という名前は見つかりません。 -->

src/components/SampleWithObject.astro

---
interface User {
  name: string;
  greet(): string;
}
const user: User = {
  name: "Alice",
  greet() {
    return `Hello, ${this.name}!`;
  }
}
---
<p>{user.name}</p>  <!-- <p>Alice</p> を出力 -->
<p>{user.foo}</p>  <!-- エラー: 'User' 型に 'foo' プロパティは存在しません。 -->

<p>{user.greet()}</p>  <!-- <p>Hello, Alice!</p> を出力 -->
<p>{user.bar()}</p>  <!-- エラー: 'User' 型に 'bar' プロパティは存在しません。 -->

コンポーネントPropsの型

Astroコンポーネントには、ReactのJSXのようにPropsを渡すことができます。 Propsの型を指定することで、コンポーネントの利用側でPropsの型を間違えた場合にエラーを出すことができます。

src/components/Hello.astro

---
interface Props {
  name: string;
}
const { name } = Astro.props;
---
<h1>Hello, {name}!</h1>

src/pages/index.astro

---
import Hello from "src/components/Hello.astro";
---
<Hello name="Alice" />  <!-- <h1>Hello, Alice!</h1> を出力 -->
<Hello name={123} />  <!-- エラー: 'number' 型は 'string' 型に割り当てられません。 -->
<Hello foo="Alice" />  <!-- エラー: '{ foo: string; }' 型は 'Props' 型に割り当てられません。 -->

関連リンク

• Astroの構文(Astro Docs)
• コンポーネントのprops(Astro Docs)