Astro TypeScript設定

作成日:
Astro TypeScript frontend SSG

AstroプロジェクトでTypeScriptを使用するための設定方法を説明します。Astroは標準でTypeScriptをサポートしており、.tsファイルと.astroファイル内でTypeScriptを使用できます。

TypeScriptの有効化

プロジェクト作成時

create astroコマンド実行時にTypeScriptを選択できます：

npm create astro@latest
# TypeScriptの厳格さを選択: strict / strictest / relaxed

既存プロジェクトへの追加

既存プロジェクトにTypeScriptを追加するには、tsconfig.jsonを作成します：

{
  "extends": "astro/tsconfigs/strict"
}

tsconfig.json

Astroの組み込み設定

Astroは3つのTypeScript設定プリセットを提供しています：

プリセット説明
astro/tsconfigs/base基本設定
astro/tsconfigs/strict厳格な型チェック（推奨）
astro/tsconfigs/strictest最も厳格な型チェック

推奨設定例

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@layouts/*": ["./src/layouts/*"]
    }
  }
}

各設定の意味

設定説明
extendsAstroの型チェック設定を継承
baseUrlモジュール解決のベースパス
pathsパスエイリアスの定義

パスエイリアス

パスエイリアスを設定すると、相対パスの代わりに短いパスでインポートできます。

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

使用例

---
// Before: 相対パス
import Header from '../../../components/Header.astro';

// After: エイリアス使用
import Header from '@/components/Header.astro';
---

型定義

Astroの型定義

Astroの型定義を使用するには、env.d.tsを作成します：

// src/env.d.ts
/// <reference types="astro/client" />

これにより以下の型が使用可能になります：

  • Astroグローバル
  • import.meta.envの型
  • 画像インポートの型

コンポーネントのProps型

---
// 方法1: interfaceを使用
interface Props {
  title: string;
  description?: string;
  tags: string[];
}

const { title, description, tags } = Astro.props;
---
---
// 方法2: 型推論を使用
const { title, description = 'デフォルト' } = Astro.props as {
  title: string;
  description?: string;
};
---

Content Collections の型

Content Collectionsを使用する場合、自動的に型が生成されます：

---
import { getCollection } from 'astro:content';

// 型推論が効く
const posts = await getCollection('blog');
// posts の型: CollectionEntry<'blog'>[]
---

環境変数の型定義

src/env.d.tsで環境変数の型を定義できます：

/// <reference types="astro/client" />

interface ImportMetaEnv {
  readonly PUBLIC_SITE_URL: string;
  readonly SECRET_API_KEY: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

TypeScriptファイルの使用

ユーティリティ関数

// src/utils/format.ts
export function formatDate(date: Date): string {
  return date.toLocaleDateString('ja-JP', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });
}
---
import { formatDate } from '@/utils/format';
const published = formatDate(new Date('2025-01-09'));
---
<time>{published}</time>

型のエクスポート

// src/types/index.ts
export interface Post {
  title: string;
  slug: string;
  date: Date;
  tags: string[];
}

export interface Author {
  name: string;
  email: string;
}

型チェックの実行

ビルドとは別に型チェックのみを実行できます：

# 型チェック
npx astro check

# package.jsonにスクリプトを追加
# "scripts": {
#   "check": "astro check"
# }
npm run check

UIフレームワークとの併用

React、Vue、Svelteなど、各フレームワークでTypeScriptを使用する場合は、それぞれの設定も必要です。

React with TypeScript

npm install @astrojs/react react react-dom
npm install -D @types/react @types/react-dom
// src/components/Counter.tsx
import { useState } from 'react';

interface Props {
  initial?: number;
}

export default function Counter({ initial = 0 }: Props) {
  const [count, setCount] = useState(initial);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

トラブルシューティング

型エラーが表示されない

  • tsconfig.jsonが存在するか確認
  • エディタを再起動
  • npx astro checkで確認

パスエイリアスが機能しない

  • tsconfig.jsonのbaseUrlとpathsを確認
  • エディタのTypeScriptサーバーを再起動

インポートエラー

  • src/env.d.tsに/// <reference types="astro/client" />があるか確認

参考