TypeScriptでジェネリクスと条件型を組み合わせたAPIの型安全な呼び出し方

function identity<T>(arg: T): T {
  return arg;
}

T extends U ? X : Y

type IsString<T> = T extends string ? "string" : "not string";

type Test1 = IsString<string>;  // "string"
type Test2 = IsString<number>;  // "not string"

type ApiResponse<T> = T extends null ? "No Data" : "Data Available";

type ExtractString<T> = T extends string ? T : never;
type Result = ExtractString<string | number>;  // string

type ApiResponse<T> = T extends null ? "No Data" : "Data Available";

function fetchData<T>(data: T): ApiResponse<T> {
  return data === null ? "No Data" : "Data Available";
}

type RequestMethod = "GET" | "POST";

type ApiResponse<T extends RequestMethod> = T extends "GET"
  ? { data: string[] }
  : { success: boolean };

function handleRequest<T extends RequestMethod>(method: T): ApiResponse<T> {
  if (method === "GET") {
    return { data: ["item1", "item2"] } as ApiResponse<T>;
  } else {
    return { success: true } as ApiResponse<T>;
  }
}

type ApiResponse<T> = T extends "GET" ? { data: any[] } : { success: boolean };

function apiRequest<T extends "GET" | "POST">(method: T, url: string): ApiResponse<T> {
  if (method === "GET") {
    return { data: ["item1", "item2"] } as ApiResponse<T>;
  } else {
    return { success: true } as ApiResponse<T>;
  }
}

type FetchResponse<T> = T extends { detailed: true } ? { details: string } : { summary: string };

function fetchData<T extends { detailed: boolean }>(params: T): FetchResponse<T> {
  if (params.detailed) {
    return { details: "This is detailed data" } as FetchResponse<T>;
  } else {
    return { summary: "This is summary data" } as FetchResponse<T>;
  }
}

type ApiParams<T extends "GET" | "POST"> = T extends "GET" ? { query: string } : { body: string };
type ApiResult<T extends "GET" | "POST"> = T extends "GET" ? { data: any[] } : { success: boolean };

function sendRequest<T extends "GET" | "POST">(method: T, params: ApiParams<T>): ApiResult<T> {
  if (method === "GET") {
    return { data: ["item1", "item2"] } as ApiResult<T>;
  } else {
    return { success: true } as ApiResult<T>;
  }
}

type ApiResponse<T> = { success: boolean } & (T extends true ? { data: any[] } : { error: string });

function fetchApi<T extends boolean>(shouldSucceed: T): ApiResponse<T> {
  if (shouldSucceed) {
    return { success: true, data: ["item1", "item2"] } as ApiResponse<T>;
  } else {
    return { success: false, error: "Request failed" } as ApiResponse<T>;
  }
}

type GetResponse = {
  status: number;
  data: {
    items: string[];
    total: number;
  };
};

function fetchItems(): Promise<GetResponse> {
  return fetch("/api/items")
    .then((response) => response.json())
    .then((data) => ({
      status: response.status,
      data: {
        items: data.items,
        total: data.total,
      },
    }));
}

type PostRequest = {
  title: string;
  description: string;
};

type PostResponse = {
  success: boolean;
  id: number;
};

function createItem(request: PostRequest): Promise<PostResponse> {
  return fetch("/api/items", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(request),
  })
    .then((response) => response.json())
    .then((data) => ({
      success: data.success,
      id: data.id,
    }));
}

type ApiMethod = "GET" | "POST";

type ApiRequest<T extends ApiMethod> = T extends "POST"
  ? PostRequest
  : undefined;

type ApiResponse<T extends ApiMethod> = T extends "GET"
  ? GetResponse
  : PostResponse;

function sendApiRequest<T extends ApiMethod>(
  method: T,
  url: string,
  data?: ApiRequest<T>
): Promise<ApiResponse<T>> {
  return fetch(url, {
    method: method,
    headers: {
      "Content-Type": "application/json",
    },
    body: data ? JSON.stringify(data) : null,
  })
    .then((response) => response.json())
    .then((jsonData) => jsonData as ApiResponse<T>);
}

type User = {
  id: number;
  name: string;
};

function getUser(id: number): Promise<User> {
  return fetch(`/api/user/${id}`)
    .then((response) => response.json())
    .then((data) => {
      // 型チェックの例
      if (typeof data.id !== "number" || typeof data.name !== "string") {
        throw new Error("Invalid data format");
      }
      return data;
    });
}

type SuccessResponse = {
  success: true;
  data: any;
};

type ErrorResponse = {
  success: false;
  error: string;
};

function isSuccessResponse(response: any): response is SuccessResponse {
  return response.success === true;
}

function handleApiResponse(response: SuccessResponse | ErrorResponse) {
  if (isSuccessResponse(response)) {
    console.log("Data:", response.data);
  } else {
    console.error("Error:", response.error);
  }
}

import * as z from "zod";

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
});

type User = z.infer<typeof UserSchema>;

function fetchUser(id: number): Promise<User> {
  return fetch(`/api/user/${id}`)
    .then((response) => response.json())
    .then((data) => {
      const parsedData = UserSchema.parse(data); // 実行時に型を検証
      return parsedData;
    });
}

import { fetchUser } from "./api";

test("fetchUser returns correct data", async () => {
  const user = await fetchUser(1);
  expect(user).toHaveProperty("id");
  expect(user).toHaveProperty("name");
});

type FormData<T extends "login" | "signup"> = T extends "login"
  ? { username: string; password: string }
  : { username: string; password: string; email: string };

function handleFormSubmit<T extends "login" | "signup">(formType: T, data: FormData<T>) {
  if (formType === "login") {
    console.log("Logging in with", data.username, data.password);
  } else {
    console.log("Signing up with", data.username, data.password, data.email);
  }
}

const loginData: FormData<"login"> = { username: "user1", password: "pass123" };
const signupData: FormData<"signup"> = { username: "user2", password: "pass456", email: "user2@example.com" };

handleFormSubmit("login", loginData);
handleFormSubmit("signup", signupData);

type ApiMethod = "GET" | "POST";

type ApiResponse<T extends ApiMethod> = T extends "GET"
  ? { data: string[] }
  : { success: boolean };

function fetchData<T extends ApiMethod>(method: T): Promise<ApiResponse<T>> {
  return fetch("/api/data", { method })
    .then((response) => response.json())
    .then((data) => data as ApiResponse<T>);
}

// GETリクエスト
fetchData("GET").then((response) => {
  console.log(response.data); // string[]型
});

// POSTリクエスト
fetchData("POST").then((response) => {
  console.log(response.success); // boolean型
});

type Filter<T> = T extends "string"
  ? { value: string; length: number }
  : T extends "number"
  ? { value: number; isPositive: boolean }
  : never;

function applyFilter<T extends "string" | "number">(type: T, value: Filter<T>["value"]): Filter<T> {
  if (type === "string") {
    return { value, length: value.length } as Filter<T>;
  } else {
    return { value, isPositive: value > 0 } as Filter<T>;
  }
}

// stringフィルターの適用
const stringFilter = applyFilter("string", "TypeScript");
console.log(stringFilter.length); // 10

// numberフィルターの適用
const numberFilter = applyFilter("number", 42);
console.log(numberFilter.isPositive); // true

type SuccessResponse<T> = { success: true; data: T };
type ErrorResponse = { success: false; error: string };

type ApiResponse<T> = SuccessResponse<T> | ErrorResponse;

function handleApiResponse<T>(response: ApiResponse<T>) {
  if (response.success) {
    console.log("Data:", response.data);
  } else {
    console.error("Error:", response.error);
  }
}

// API呼び出し結果
const successResponse: SuccessResponse<string[]> = { success: true, data: ["item1", "item2"] };
const errorResponse: ErrorResponse = { success: false, error: "Request failed" };

handleApiResponse(successResponse); // 正常なデータ処理
handleApiResponse(errorResponse); // エラーメッセージの処理

import { z } from "zod";

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
});

type User = z.infer<typeof UserSchema>; // TypeScript型を自動的に推論

function getUserData(data: unknown): User {
  const parsedData = UserSchema.parse(data); // 実行時にデータを検証
  return parsedData;
}

// 正しいデータの場合
const validData = { id: 1, name: "John Doe", email: "john@example.com" };
const user = getUserData(validData);
console.log(user);

// 不正なデータの場合
const invalidData = { id: "1", name: "John Doe", email: "invalid-email" };
try {
  getUserData(invalidData); // Zodがエラーをスロー
} catch (error) {
  console.error("Validation Error:", error);
}

import * as t from "io-ts";
import { PathReporter } from "io-ts/PathReporter";

const UserCodec = t.type({
  id: t.number,
  name: t.string,
  email: t.string,
});

type User = t.TypeOf<typeof UserCodec>;

function getUserData(data: unknown): User | null {
  const result = UserCodec.decode(data);
  if (result._tag === "Right") {
    return result.right;
  } else {
    console.error(PathReporter.report(result));
    return null;
  }
}

const validData = { id: 1, name: "John Doe", email: "john@example.com" };
const user = getUserData(validData); // 成功
console.log(user);

const invalidData = { id: "1", name: "John Doe", email: "invalid-email" };
getUserData(invalidData); // 失敗

import * as yup from "yup";

const UserSchema = yup.object().shape({
  id: yup.number().required(),
  name: yup.string().required(),
  email: yup.string().email().required(),
});

async function getUserData(data: unknown) {
  try {
    const validatedData = await UserSchema.validate(data);
    console.log(validatedData);
  } catch (error) {
    console.error("Validation Error:", error);
  }
}

const validData = { id: 1, name: "John Doe", email: "john@example.com" };
getUserData(validData); // 成功

const invalidData = { id: "1", name: "John Doe", email: "invalid-email" };
getUserData(invalidData); // 失敗

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

type ApiRequest<T extends HttpMethod> = T extends "POST" | "PUT"
  ? { body: { [key: string]: any } }
  : undefined;

type ApiResponse<T extends HttpMethod> = T extends "GET"
  ? { data: any[] }
  : T extends "POST"
  ? { success: boolean; id: number }
  : T extends "PUT"
  ? { success: boolean }
  : { success: boolean; message: string };

function callApi<T extends HttpMethod>(
  method: T,
  url: string,
  request?: ApiRequest<T>
): Promise<ApiResponse<T>> {
  return fetch(url, {
    method,
    headers: { "Content-Type": "application/json" },
    body: request ? JSON.stringify(request.body) : undefined,
  })
    .then((response) => response.json())
    .then((data) => data as ApiResponse<T>);
}

// GETリクエストの場合
callApi("GET", "/api/items").then((response) => {
  console.log(response.data); // any[]型
});

// POSTリクエストの場合
callApi("POST", "/api/items", { body: { name: "New Item" } }).then((response) => {
  console.log(response.success, response.id); // boolean型, number型
});

type Category = {
  id: number;
  name: string;
  subcategories?: Category[];
};

type GetCategoriesResponse = {
  data: Category[];
};

function fetchCategories(): Promise<GetCategoriesResponse> {
  return fetch("/api/categories")
    .then((response) => response.json())
    .then((data) => data as GetCategoriesResponse);
}

fetchCategories().then((response) => {
  response.data.forEach((category) => {
    console.log(category.name);
    if (category.subcategories) {
      category.subcategories.forEach((sub) => console.log("Subcategory:", sub.name));
    }
  });
});

type ApiEndpoint = "users" | "posts" | "comments";

type ApiRequest<T extends ApiEndpoint> = T extends "users"
  ? { userId: number }
  : T extends "posts"
  ? { postId: number }
  : T extends "comments"
  ? { commentId: number }
  : never;

type ApiResponse<T extends ApiEndpoint> = T extends "users"
  ? { id: number; name: string }
  : T extends "posts"
  ? { id: number; title: string }
  : T extends "comments"
  ? { id: number; content: string }
  : never;

function fetchData<T extends ApiEndpoint>(endpoint: T, request: ApiRequest<T>): Promise<ApiResponse<T>> {
  const url = `/api/${endpoint}`;
  return fetch(url, {
    method: "GET",
    headers: { "Content-Type": "application/json" },
  })
    .then((response) => response.json())
    .then((data) => data as ApiResponse<T>);
}

// usersエンドポイントのリクエスト
fetchData("users", { userId: 1 }).then((response) => {
  console.log(response.name); // string型
});

// postsエンドポイントのリクエスト
fetchData("posts", { postId: 123 }).then((response) => {
  console.log(response.title); // string型
});

type UserQuery = {
  user: {
    id: string;
    name: string;
    posts: {
      id: string;
      title: string;
    }[];
  };
};

async function fetchGraphQL<T>(query: string): Promise<T> {
  const response = await fetch("/graphql", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ query }),
  });
  const result = await response.json();
  return result.data as T;
}

const userQuery = `
  query {
    user(id: "1") {
      id
      name
      posts {
        id
        title
      }
    }
  }
`;

fetchGraphQL<UserQuery>(userQuery).then((data) => {
  console.log(data.user.name);
  data.user.posts.forEach((post) => console.log(post.title));
});

type UserProfile = {
  id: number;
  name: string;
  email: string;
  age?: number; // 年齢はオプション
};

async function fetchUserProfile(userId: number): Promise<UserProfile> {
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();
  return data as UserProfile;
}

  type Item = {
    id: number;
    name: string;
    price: number;
  };

type ApiResponse<T> = {
  success: boolean;
  data: T;
};

async function fetchData<T>(endpoint: string): Promise<ApiResponse<T>> {
  const response = await fetch(endpoint);
  const data = await response.json();
  return { success: true, data: data as T };
}

// ユーザー情報の取得
type User = { id: number; name: string };
fetchData<User>("/api/users/1").then((response) => {
  console.log(response.data.name);
});

// 記事情報の取得
type Article = { id: number; title: string };
fetchData<Article>("/api/articles/1").then((response) => {
  console.log(response.data.title);
});

  type Product = {
    id: number;
    name: string;
    description: string;
    price: number;
  };

type Order = {
  id: number;
  product: { id: number; name: string };
  quantity: number;
  totalPrice: number;
};

type UserOrders = {
  userId: number;
  orders: Order[];
};

async function fetchUserOrders(userId: number): Promise<UserOrders> {
  const response = await fetch(`/api/users/${userId}/orders`);
  const data = await response.json();
  return data as UserOrders;
}

  type Order = {
    id: number;
    items: { id: number; name: string; quantity: number }[];
    totalAmount: number;
  };

type SuccessResponse<T> = { success: true; data: T };
type ErrorResponse = { success: false; message: string };

async function fetchApi<T>(url: string): Promise<SuccessResponse<T> | ErrorResponse> {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error("Network error");
    const data = await response.json();
    return { success: true, data: data as T };
  } catch (error) {
    return { success: false, message: error.message };
  }
}

fetchApi<UserProfile>("/api/users/1").then((response) => {
  if (response.success) {
    console.log(response.data.name);
  } else {
    console.error(response.message);
  }
});