interface Person {
  name: string;
  age: number;
}

const alice = { name: "Alice", age: 30, hobby: "golf" }; // 余分なプロパティあり
const bob: Person = alice;   // ✅ OK ― hobby は無視される

type Greeter = (name: string) => void;

const greetExtra = (name: string, time: Date) => {
  console.log(`Hello ${name} @ ${time.toLocaleTimeString()}`);
};

let fn: Greeter = greetExtra; // ✅ OK
// 呼び出し側は 1 引数で渡すので問題なし

const charlie = { name: "Charlie" }; // age が足りない
const p2: Person = charlie;          // ❌ 型エラー

type UserID = string & { __brand: "UserID" };
type PostID = string & { __brand: "PostID" };

function getPost(id: PostID) { /* ... */ }

const raw = "abc123" as UserID;
getPost(raw);           // ❌ 期待どおり弾かれる

type ButtonBase = {
  label: string;
  onClick: () => void;
};

type PrimaryButton = ButtonBase & { variant: "primary" };
type SecondaryButton = ButtonBase & { variant: "secondary" };

type ButtonProps = PrimaryButton | SecondaryButton;

export const Button: React.FC<ButtonProps> = (props) => {
  return (
    <button
      style={{ background: props.variant === "primary" ? "#1976d2" : "#808080" }}
      onClick={props.onClick}
    >
      {props.label}
    </button>
  );
};

let count: number = 0;        // 明示で可読性↑
const title = "hello";        // 推論で string

function add(a: number, b: number): number {
  return a + b;
}

const config = {
  apiBase: "/v1",
  retry: 3,
} as const;   // → readonly & リテラル型

const el = document.getElementById("root") as HTMLDivElement;
// “null じゃない” ことを自分で保証

type ButtonProps = {
  label: string;
  onClick: () => void;
};

export const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

const [data, setData] = useState<string | null>(null); // ✅
// const [data] = useState(null);           // ❌ data: any になる

const inputRef = useRef<HTMLInputElement>(null!); // null! = 宣言的に非 null

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

const num  = identity(42);        // T = number
const text = identity("hello");   // T = string

function lengthOf<T extends { length: number }>(v: T) {
  return v.length;
}

lengthOf([1, 2, 3]);  // OK  (length プロパティあり)
lengthOf("abc");      // OK
lengthOf(123);        // ❌ number に length なし

function getProp<
  O,
  K extends keyof O
>(obj: O, key: K): O[K] {
  return obj[key];
}

const user = { id: 1, name: "Alice" };
getProp(user, "id");   // number
getProp(user, "age");  // ❌ "age" は存在しない

type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

interface Settings {
  theme: { color: string; fontSize: number };
  autoSave: boolean;
}

const patch: DeepPartial<Settings> = {
  theme: { color: "blue" }        // fontSize 省略 OK
};

type Column<T> = {
  header: string;
  accessor: (row: T) => React.ReactNode;
};

interface DataTableProps<T> {
  data: T[];
  columns: Column<T>[];
}

export function DataTable<T>({ data, columns }: DataTableProps<T>) {
  return (
    <table>
      <thead>
        <tr>{columns.map(c => <th key={c.header}>{c.header}</th>)}</tr>
      </thead>
      <tbody>
        {data.map((row, i) => (
          <tr key={i}>
            {columns.map(c => <td key={c.header}>{c.accessor(row)}</td>)}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

<DataTable
  data={[{ id: 1, name: "Alice" }]}
  columns={[
    { header: "ID",   accessor: r => r.id },
    { header: "Name", accessor: r => r.name },
  ]}
/>

const withRetry =
  <TArgs extends any[], TResult>(fn: (...a: TArgs) => Promise<TResult>) =>
  async (...args: TArgs): Promise<TResult> => {
    for (let i = 0; ; i++) {
      try { return await fn(...args); }
      catch (e) { if (i >= 2) throw e; }
    }
  };

const fetchJSON = async (url: string) => (await fetch(url)).json();
const fetchWithRetry = withRetry(fetchJSON);  // 型が完全維持

// echo.ts
export function echo<T>(value: T): T {
  return value;
}

interface User { id: number; name: string }
const u = echo<User>({ id: 1, name: "Alice" });

$ tsc --target ES2020 --module esnext

// echo.js (抜粋：型が全滅🎩🪄)
export function echo(value) {
  return value;
}
const u = echo({ id: 1, name: "Alice" });

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

function isUser(x: unknown): x is User {
  return typeof x === "object"
    && x !== null
    && "id" in x
    && typeof (x as any).id === "number"
    && "name" in x
    && typeof (x as any).name === "string";
}

const json = JSON.parse(payload);
if (!isUser(json)) throw new Error("invalid user"); // runtime guard

import { z } from "zod";
const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
});
type User = z.infer<typeof UserSchema>; // ← 型を“得る”

const user = UserSchema.parse(JSON.parse(payload)); // runtime + compile OK

const config = {
  apiBase: "/v1",
  retry: 3,
} as const satisfies Record<string, string | number>; // TS 4.9+

type Idle    = { state: "idle" };
type Loading = { state: "loading" };
type Success = { state: "success"; data: string };
type Failure = { state: "failure"; error: Error };

type FetchState = Idle | Loading | Success | Failure;

function render(s: FetchState) {
  switch (s.state) {
    case "idle":    return <button>Load</button>;
    case "loading": return <p>Loading...</p>;
    case "success": return <p>{s.data}</p>;
    case "failure": return <p>{s.error.message}</p>;
    default:        /**  exhaustiveness check  */ 
      const _exhaustive: never = s; // 🚨 新バリアントを追加したらここで検知
      return _exhaustive;
  }
}

type Ok<T>    = { ok: true;  value: T };
type Err<E>   = { ok: false; error: E };
type Result<T, E = Error> = Ok<T> | Err<E>;

async function fetchJSON<T>(url: string): Promise<Result<T>> { … }

type Draggable = { drag: () => void };
type Droppable = { drop: () => void };

type DragSource = Draggable & Droppable;

const card: DragSource = {
  drag() { /* ... */ },
  drop() { /* ... */ },
};

import Link, { LinkProps } from "next/link";
import Button, { ButtonProps } from "@mui/material/Button";

type LinkButtonProps = LinkProps & ButtonProps;

export const LinkButton = (props: LinkButtonProps) => (
  <Button component={Link} {...props} />
);

type RawField = { id: string; value: string };
type StringField = RawField & { kind: "text" };
type NumberField = RawField & { kind: "number" };

type Field = StringField | NumberField;

function parseField(f: Field) {
  return f.kind === "number" ? Number(f.value) : f.value; // 型が絞られる
}

const fields: Field[] = [
  { id: "age",   kind: "number", value: "42" },
  { id: "title", kind: "text",   value: "Hello" },
];

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

function request(method: HttpMethod, url: string) { /* ... */ }

request("PATCH", "/api");   // ❌ コンパイルエラー

const directions = ["up", "down"] as const;
//        ^?  readonly ["up","down"]
type Direction = typeof directions[number]; // "up" | "down"

type Locale = "en" | "ja";
type Page   = "home" | "about";

type Route = `/${Locale}/${Page}`;   // "/en/home" | "/en/about" | …

const route: Route = "/ja/contact";  // ❌ 型エラー

type SplitLocale<T> =
  T extends `/${infer L}/${infer Rest}`
    ? L                 // "en" | "ja"
    : never;

type L = SplitLocale<"/ja/about">;   // "ja"

type EventName = "click" | "hover";
type Side      = "left"  | "right";

type Combined = `${EventName}-${Side}`; // "click-left" | "hover-right" | …
type Handlers = { [K in Combined]: () => void };

type SlugParam<T extends string> = {
  params: { slug: T };
};

export async function generateStaticParams(): Promise<
  SlugParam<`post-${number}`>[]
> {
  return [{ params: { slug: "post-42" } }];
}

type Variant = "primary" | "secondary";

interface ButtonProps {
  variant?: Variant;
}

const Button = ({ variant = "primary" }: ButtonProps) => (
  <button className={`btn-${variant}`}>OK</button>
);

type HexColor = `#${string}`;

function isHex(c: string): c is HexColor {
  return /^#[\da-f]{6}$/i.test(c);
}

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

type A = IsString<"abc">;  // "yes"
type B = IsString<42>;     // "no"

type ToPromise<T> = T extends any ? Promise<T> : never;

type C = ToPromise<string | number>;
//       ↑ Promise<string> | Promise<number>

type ElementOf<T> = T extends (infer U)[] ? U : never;

type D = ElementOf<string[]>;  // string

type FnReturn<T> = T extends (...args: any) => infer R ? R : never;

type E = FnReturn<() => Promise<number>>;  // Promise<number>

type Ok<T>  = { ok: true;  value: T };
type Err<E> = { ok: false; error: E };
type Result<T, E = Error> = Ok<T> | Err<E>;

type UnwrapResult<R> = R extends Ok<infer U> ? U : never;

type F = UnwrapResult<Result<number>>; // number

type PartialDeep<T> =
  T extends object ? { [K in keyof T]?: PartialDeep<T[K]> } : T;

type PolymorphicProps<
  T extends React.ElementType,
  P = {}
> = P & { as?: T } & React.ComponentPropsWithoutRef<T>;

function Box<T extends React.ElementType = "div">(
  props: PolymorphicProps<T>
) { /* ... */ }

type Mutable<T> = { -readonly [K in keyof T]: T[K] };

interface User {
  readonly id: string;
  name: string;
}

type WritableUser = Mutable<User>;
// { id: string; name: string }

type MyPartial<T>  = { [K in keyof T]?: T[K] };
type MyRequired<T> = { [K in keyof T]-?: T[K] };

type P  = MyPartial<{a:number; b:string}>;   // {a?:number; b?:string}
type R  = MyRequired<{a?:number}>;           // {a:number}

type PrefixKeys<T, Prefix extends string> = {
  [K in keyof T as `${Prefix}${Capitalize<string & K>}`]: T[K]
};

type Original = { id: number; name: string };
type WithApi_ = PrefixKeys<Original, "api_">;
// { api_Id: number; api_Name: string }

type NonFunctionKeys<T> = {
  [K in keyof T]: T[K] extends Function ? never : K
}[keyof T];     // ✨ インデックスアクセスでユニオンへ

type PropsOnly<T> = Pick<T, NonFunctionKeys<T>>;

interface Comp { onClick(): void; title: string; }
type P = PropsOnly<Comp>;  // { title: string }

type FormValues = { email: string; password: string };
type FormErrors<T> = { [K in keyof T]?: string };

type Errors = FormErrors<FormValues>; // { email?: string; password?: string }

type DeepReadonly<T> =
  T extends object ? { readonly [K in keyof T]: DeepReadonly<T[K]> } : T;

type Payload = { user:{ id:number; name:string } };
type Frozen  = DeepReadonly<Payload>;
// user: { readonly id: number; readonly name: string }

{
  "compilerOptions": {
    "strict": true,            // ← 丸ごと有効
    // 個別に切るなら:
    // "strictNullChecks": true,
    // "exactOptionalPropertyTypes": true,
    // "noUncheckedIndexedAccess": true
  }
}

const [data, setData] = useState<User | null>(null);
//          ^? User | null
if (!data) return <Spinner />;

const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  inputRef.current?.focus();  // ?. を忘れない
}, []);

export async function loader({ params }: LoaderArgs) {
  const post = await db.post.find(params.id);
  if (!post) throw new Response("Not Found", { status: 404 });
  return json(post);          // post は non-null
}

import { z } from "zod";

const UserSchema = z.object({
  id: z.number(),
  email: z.string().email(),
});
type User = z.infer<typeof UserSchema>;

const user = UserSchema.parse(await res.json()); // runtime & compile OK

{
  "compilerOptions": {
    "allowJs": true,           // JS を入力に許可
    "checkJs": false,          // まずは無効 (後で段階的に ON)
    "noEmit": true             // JS を書き換えず型エラーだけ表示
  },
  "include": ["src"]
}

npx tsc -p tsconfig.quick.json    # 型エラーゼロを確認

// math.js
// @ts-check

/**
 * @param {number} a
 * @param {number} b
 */
export function add(a, b) {
  return a + b;
}

add("1", 2);   // 🚨 型エラー (string ↔ number)

// Button.tsx
export interface ButtonProps {
  label: string;
  onClick?: () => void;
}
export const Button = ({ label, onClick }: ButtonProps) => (
  <button onClick={onClick}>{label}</button>
);

"compilerOptions": {
  "strict": true,
  "skipLibCheck": true
},
"overrides": [
  { "files": ["legacy/**/*"], "compilerOptions": { "strict": false } }
]

// slugify.js  (@ts-check)
/**
 * @param {string} title
 * @returns {string}
 */
export function slugify(title) {
  return title.toLowerCase().replace(/\s+/g, "-");
}

// slugify.ts
export type Slug = `${string}-${string}`;

/** Converts a title to kebab-case slug. */
export function slugify(title: string): Slug {
  return title
    .trim()
    .toLowerCase()
    .replace(/\s+/g, "-") as Slug;   // 型ブランド化
}

export function delay(ms) {
  return new Promise(r => setTimeout(r, ms));
}

declare module "peer-lib/timer" {
  /** Resolves after at least `ms` milliseconds. */
  export function delay(ms: number): Promise<void>;
}

{
  "compilerOptions": { "typeRoots": ["./types", "./node_modules/@types"] }
}

import { delay } from "peer-lib/timer";
await delay("500"); // 🚨 string↔number エラー

// express-session.d.ts
import "express";

declare module "express" {
  interface Request {
    user?: { id: string; role: "admin" | "guest" };
  }
}

app.get("/me", (req, res) => {
  req.user.id   // 型補完が効く
});

// globals.d.ts
export {};            // (=モジュール化して衝突防止)
declare global {
  type ID = `${string}-${string}-${string}`; // どこからでも ID 型が見える
}

"compilerOptions": {
  "declaration": true,
  "emitDeclarationOnly": true,
  "declarationDir": "./dist",
  "composite": true         // (モノレポで依存解決を速くする)
}

// mui-theme.d.ts
import "@mui/material/styles";

declare module "@mui/material/styles" {
  interface Palette {
    neutral: Palette["primary"];
  }
  interface PaletteOptions {
    neutral?: PaletteOptions["primary"];
  }
}

/// <reference types="next" />
/// <reference types="next/image-types/global" />

// userService.ts
export function getUser(id: string): any {
  return fetch(`/api/users/${id}`).then(r => r.json());
}

const user = await getUser("42");
console.log(user.namme.toUpperCase()); // typo! => runtime error

import { z } from "zod";

const UserSchema = z.object({
  id: z.string(),
  name: z.string(),
  email: z.string().email(),
});
export type User = z.infer<typeof UserSchema>;

export async function getUser(id: string): Promise<User> {
  const json = await fetch(`/api/users/${id}`).then(r => r.json());
  return UserSchema.parse(json);          // runtime+compile
}

// 使う側
const user = await getUser("42");
console.log(user.name.toUpperCase());     // 補完 OK / typo 即赤波線