【TypeScript】JSONデータを型安全に扱って型エラーをなくす方法

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  createdAt: string; // ISO日付文字列
}

// JSONデータをパースして型を適用する
const jsonText = '{"id": 1, "name": "田中太郎", "email": "tanaka@example.com", "isActive": true, "createdAt": "2023-05-01T12:30:45Z"}';
const user: User = JSON.parse(jsonText);

// 型の恩恵を受けられる（補完やエラーチェックなど）
console.log(user.name); // "田中太郎"

type User = {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  createdAt: string; // ISO日付文字列
};

// 使い方はinterfaceと同じ
const user: User = JSON.parse(jsonText);

// 方法1: asキーワードを使う（推奨）
const user = JSON.parse(jsonText) as User;

// 方法2: 角括弧構文を使う（古い書き方）
const user = <User>JSON.parse(jsonText);

function isUser(obj: any): obj is User {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    typeof obj.id === 'number' &&
    typeof obj.name === 'string' &&
    typeof obj.email === 'string' &&
    typeof obj.isActive === 'boolean' &&
    typeof obj.createdAt === 'string'
  );
}

const parsedData = JSON.parse(jsonText);
if (isUser(parsedData)) {
  // ここではparsedDataはUser型として扱われる
  console.log(parsedData.name);
} else {
  console.error('不正なユーザーデータです');
}

interface Address {
  street: string;
  city: string;
  zipCode: string;
  country: string;
}

interface User {
  id: number;
  name: string;
  email: string;
  address: Address; // ネストされたオブジェクト
  phones: string[]; // 配列
}

// 使用例
const jsonText = `{
  "id": 1,
  "name": "田中太郎",
  "email": "tanaka@example.com",
  "address": {
    "street": "渋谷区道玄坂1-1-1",
    "city": "東京",
    "zipCode": "150-0043",
    "country": "日本"
  },
  "phones": ["090-1234-5678", "03-1234-5678"]
}`;

const user = JSON.parse(jsonText) as User;
console.log(user.address.city); // "東京"

type User = {
  id: number;
  name: string;
  email: string;
  address: {
    street: string;
    city: string;
    zipCode: string;
    country: string;
  };
  phones: string[];
};

interface User {
  id: number;
  name: string;
  email: string;
  isActive?: boolean; // オプショナル
  bio?: string; // オプショナル
  address?: { // ネストされたオプショナルオブジェクト
    street: string;
    city: string;
    zipCode?: string; // さらにネストされたオプショナルプロパティ
    country: string;
  };
}

interface ErrorResponse {
  status: number;
  message: string;
  // フィールド名が動的に変わるエラー詳細
  errors: {
    [fieldName: string]: string[];
  };
}

// 使用例
const errorJson = `{
  "status": 400,
  "message": "入力エラーがあります",
  "errors": {
    "email": ["無効なメールアドレスです", "必須項目です"],
    "password": ["パスワードは8文字以上である必要があります"]
  }
}`;

const errorResponse = JSON.parse(errorJson) as ErrorResponse;
// 動的にアクセスできる
Object.keys(errorResponse.errors).forEach(field => {
  console.log(`${field}のエラー: ${errorResponse.errors[field].join(', ')}`);
});

interface ErrorResponse {
  status: number;
  message: string;
  errors: Record<string, string[]>;
}

// 型定義
interface Product {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
}

// 型付きオブジェクト
const product: Product = {
  id: 101,
  name: "TypeScript入門書",
  price: 2800,
  inStock: true
};

// JSON文字列に変換
const jsonString = JSON.stringify(product);

import { z } from "zod";

// スキーマ定義
const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  isActive: z.boolean().optional(),
  address: z.object({
    street: z.string(),
    city: z.string(),
    zipCode: z.string(),
    country: z.string()
  }).optional()
});

// スキーマから型を推論
type User = z.infer<typeof UserSchema>;

// JSONをパースして検証
const jsonText = `{"id": 1, "name": "田中太郎", "email": "tanaka@example.com"}`;
const parsedData = JSON.parse(jsonText);

// 検証（バリデーションエラーがあれば例外をスロー）
try {
  const user = UserSchema.parse(parsedData);
  console.log(user.name); // 型安全にアクセス可能
} catch (error) {
  console.error("バリデーションエラー:", error);
}

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

// 型定義
interface Config {
  apiUrl: string;
  timeout: number;
  retryCount: number;
}

// JSONファイルを型付きでインポート
import config from './config.json';

// 型アサーションを使用
const typedConfig = config as Config;

// もしくは型定義ファイルを使用（後述）

// APIレスポンスの型定義
interface ApiResponse<T> {
  status: number;
  data: T;
  message: string;
}

interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
}

// 商品一覧を取得するAPI関数
async function fetchProducts(): Promise<ApiResponse<Product[]>> {
  const response = await fetch('https://api.example.com/products');
  const data = await response.json();
  return data as ApiResponse<Product[]>;
}

// 使用例
async function displayProducts() {
  try {
    const result = await fetchProducts();
    if (result.status === 200) {
      // 型安全に処理できる
      result.data.forEach(product => {
        console.log(`${product.name}: ${product.price}円`);
      });
    } else {
      console.error(result.message);
    }
  } catch (error) {
    console.error('商品の取得に失敗しました', error);
  }
}

// フォームデータの型定義
interface SignupFormData {
  username: string;
  email: string;
  password: string;
  agreeToTerms: boolean;
  preferences: {
    newsletter: boolean;
    notifications: string; // "email" | "push" | "none"
  };
}

// フォーム送信関数
function handleSubmit(formData: SignupFormData) {
  // APIリクエストボディの作成
  const requestBody = JSON.stringify(formData);

  // リクエスト送信
  fetch('https://api.example.com/signup', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: requestBody
  }).then(response => {
    // レスポンス処理
  });
}