TypeScript：言語の本質、静的型付け、React Native

// TypeScriptの基本型システム
// プリミティブ型
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Union型とLiteral型
type Platform = 'ios' | 'android' | 'web';
type Status = 'idle' | 'loading' | 'success' | 'error';

function getSDKVersion(platform: Platform): number {
  switch (platform) {
    case 'ios': return 17;
    case 'android': return 34;
    case 'web': return 2025;
  }
}

// Tuple — 固定長タプル
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — 自動インクリメント列挙型
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — anyの安全な代替
function parseJSON(json: string): unknown {
  return JSON.parse(json);
}

const data = parseJSON('{"name":"TS"}');
if (typeof data === 'object' && data !== null) {
  console.log((data as Record<string, unknown>).name);
}

// React Nativeのためのインターフェースと型
// オプショナルフィールドを持つインターフェース
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // オプショナルフィールド
  readonly createdAt: Date; // 読み取り専用
}

// インターフェースの拡張（extends）
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// APIデータの型
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partialはすべてのフィールドをオプショナルにする
type PartialUser = Partial<User>;

// Pick — 指定されたフィールドを選択
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — 型付けされたキーを持つ辞書
type UserMap = Record<string, User>;

// TypeScriptのジェネリクス
// APIを扱うためのジェネリック関数
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return response.json() as Promise<T>;
}

// 特定の型での使用
interface Product {
  id: number;
  title: string;
  price: number;
}

const products = await fetchData<Product[]>('/api/products');

// 状態管理のためのジェネリッククラス
class StateManager<S> {
  private state: S;

  constructor(initial: S) {
    this.state = initial;
  }

  getState(): S {
    return this.state;
  }

  updateState(partial: Partial<S>): void {
    this.state = { ...this.state, ...partial };
  }
}

// Redux Reducerでの型付けされた作業
type Action<T, P> = {
  type: T;
  payload: P;
};

type UserAction =
  | Action<'SET_USER', User>
  | Action<'CLEAR_USER', undefined>
  | Action<'UPDATE_USER', Partial<User>>;

// 型付けされたReact Nativeコンポーネント
import React, { useState, useCallback } from 'react';
import {
  View, Text, FlatList, TouchableOpacity,
  StyleSheet
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

// ナビゲーションとデータの型
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

type NavigationProp =
  NativeStackNavigationProp<RootStackParamList, 'Home'>;

// propsのインターフェース
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// 型付けされた関数コンポーネント
const ProductList: React.FC<ProductListProps> = ({
  products,
  onSelect
}) => {
  const navigation = useNavigation<NavigationProp>();
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const handlePress = useCallback((id: number) => {
    setSelectedId(id);
    onSelect(id);
    navigation.navigate('Profile', { userId: String(id) });
  }, [onSelect, navigation]);

  const renderItem = useCallback(({ item }: { item: Product }) => (
    <TouchableOpacity onPress={() => handlePress(item.id)}>
      <Text>{item.title}</Text>
      <Text>${item.price.toFixed(2)}</Text>
    </TouchableOpacity>
  ), [handlePress]);

  return (
    <FlatList
      data={products}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
    />
  );
};

// tsconfig.json — 最小構成
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // チェックのみ、JS生成なし
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}