ReactでJSONからTypeScriptの型を作って表示する方法

// JSON の値から、TypeScript の型定義の文字列を作る関数

type Primitive = 'string' | 'number' | 'boolean' | 'null';
const primitiveOrder: Primitive[] = ['string', 'number', 'boolean', 'null'];

// 1つの場所に現れた値の型を、すべてまとめたもの。種類が2つ以上あればユニオン型にする
type TypeInfo = {
  primitives: Set<Primitive>;
  object: ObjectInfo | null;
  array: TypeInfo | null; // 配列の要素をまとめた型。空の配列だけなら、中身のない TypeInfo
};

type ObjectInfo = {
  count: number; // まとめたオブジェクトの数
  fields: Map<string, { type: TypeInfo; count: number }>; // count は、そのキーがあったオブジェクトの数
};

function emptyInfo(): TypeInfo {
  return { primitives: new Set(), object: null, array: null };
}

// 値を調べて、into に型の情報を足していく。配列の要素は、すべて同じ TypeInfo にまとめる
function infer(value: unknown, into: TypeInfo = emptyInfo()): TypeInfo {
  if (value === null) {
    into.primitives.add('null');
  } else if (Array.isArray(value)) {
    into.array ??= emptyInfo();
    for (const item of value) infer(item, into.array);
  } else if (typeof value === 'object') {
    into.object ??= { count: 0, fields: new Map() };
    into.object.count++;
    for (const [key, v] of Object.entries(value)) {
      let field = into.object.fields.get(key);
      if (!field) {
        field = { type: emptyInfo(), count: 0 };
        into.object.fields.set(key, field);
      }
      field.count++;
      infer(v, field.type);
    }
  } else {
    into.primitives.add(typeof value as Primitive);
  }
  return into;
}

// 識別子として書ける名前か（日本語などの文字も使える）
const identifier = /^[\p{ID_Start}$_][\p{ID_Continue}$\u200C\u200D]*$/u;

export function isIdentifier(name: string): boolean {
  return identifier.test(name);
}

// 型の名前に使えるか。予約語（class など）と組み込みの型（string など）は小文字の英字で始まるので、
// 小文字の英字で始まる名前は受け付けない
export function isTypeName(name: string): boolean {
  return isIdentifier(name) && !/^[a-z]/.test(name);
}

// キーの名前から型の名前を作る。user_id → UserId
function toTypeName(key: string): string {
  const name = key
    .split(/[^\p{L}\p{N}]+/u)
    .filter(Boolean)
    .map((w) => w[0].toUpperCase() + w.slice(1))
    .join('');
  if (name === '') return 'Item';
  return isIdentifier(name) ? name : `T${name}`;
}

export function jsonToTypes(value: unknown, rootName = 'Root'): string {
  const declarations: string[] = [];
  const nameByBody = new Map<string, string>();
  const usedNames = new Set<string>();

  function reserveName(base: string): string {
    let name = base;
    for (let i = 2; usedNames.has(name); i++) name = `${base}${i}`;
    usedNames.add(name);
    return name;
  }

  function typeOf(info: TypeInfo, name: string, isRoot = false): string {
    return unionParts(info, name, isRoot).join(' | ');
  }

  // ユニオン型の1つずつを返す。何も入っていなければ unknown。
  // isRoot は一番外側のときだけ true にし、name をそのまま型の名前にする（最初に取ってあるため）
  function unionParts(info: TypeInfo, name: string, isRoot: boolean): string[] {
    const parts: string[] = [];
    if (info.object) parts.push(interfaceFor(info.object, name, isRoot));
    if (info.array) {
      const item = unionParts(info.array, `${name}Item`, false);
      // 要素がユニオン型なら、かっこで包んでから [] を付ける
      parts.push(item.length > 1 ? `(${item.join(' | ')})[]` : `${item[0]}[]`);
    }
    parts.push(...primitiveOrder.filter((p) => info.primitives.has(p)));
    return parts.length > 0 ? parts : ['unknown'];
  }

  function interfaceFor(obj: ObjectInfo, base: string, isRoot: boolean): string {
    // 空のオブジェクトは、どんなキーでも受け付ける型にする
    if (obj.fields.size === 0) return '{ [key: string]: unknown }';
    // 親の名前と、書き出す位置を先に取ってから、子の型を作る
    const name = isRoot ? base : reserveName(base);
    const slot = declarations.push('') - 1;
    const lines = [...obj.fields].map(([key, field]) => {
      const prop = isIdentifier(key) ? key : JSON.stringify(key);
      // すべてのオブジェクトにあったキーでなければ、省略できるキーにする
      const optional = field.count < obj.count ? '?' : '';
      return `  ${prop}${optional}: ${typeOf(field.type, toTypeName(key))};`;
    });
    const body = `{\n${lines.join('\n')}\n}`;
    // 中身がまったく同じ型がすでにあれば、その名前を使い回す
    const same = nameByBody.get(body);
    if (same) {
      usedNames.delete(name);
      return same;
    }
    nameByBody.set(body, name);
    declarations[slot] = `export interface ${name} ${body}`;
    return name;
  }

  // 一番外側の型の名前は、子の型に使われないように最初に取っておく
  usedNames.add(rootName);
  const root = typeOf(infer(value), rootName, true);
  if (root !== rootName) declarations.unshift(`export type ${rootName} = ${root};`);
  return declarations.filter(Boolean).join('\n\n') + '\n';
}

{
  "id": 1,
  "name": "たま",
  "birthday": null,
  "tags": ["白", "長毛"],
  "owner": { "name": "Sato", "address": { "city": "Tokyo", "zip": "100-0001" } },
  "toys": [
    { "name": "ねずみ", "price": 300 },
    { "name": "ボール", "price": 120, "color": "red" }
  ],
  "weights": [3.2, 3.4, null],
  "scores": [1, "A"],
  "notes": [],
  "meta": {},
  "user-agent": "example",
  "体重": 4.1
}

export interface Root {
  id: number;
  name: string;
  birthday: null;
  tags: string[];
  owner: Owner;
  toys: ToysItem[];
  weights: (number | null)[];
  scores: (string | number)[];
  notes: unknown[];
  meta: { [key: string]: unknown };
  "user-agent": string;
  体重: number;
}

export interface Owner {
  name: string;
  address: Address;
}

export interface Address {
  city: string;
  zip: string;
}

export interface ToysItem {
  name: string;
  price: number;
  color?: string;
}

// 元の JSON（sample.json）を、作った型に当てはめる
import type { Root } from './types';
import sample from '../sample.json';

const data: Root = sample;
console.log(data.toys[1].color);

$ npx tsc -p tscheck/tsconfig.json; echo exit=$?
tscheck/bad.ts(7,3): error TS2322: Type 'string' is not assignable to type 'null'.
tscheck/bad.ts(10,25): error TS2322: Type 'string' is not assignable to type 'number'.
exit=1

[
  { "id": 1, "name": "たま", "birthday": null },
  { "id": 2, "name": "みけ", "birthday": "2020-04-01" }
]

export type Root = RootItem[];

export interface RootItem {
  id: number;
  name: string;
  birthday: string | null;
}

import { useId, useState } from 'react';
import { isTypeName, jsonToTypes } from './inferTypes';

type Result = { types: string; error: '' } | { types: ''; error: string };

function convert(text: string, rootName: string): Result {
  if (!isTypeName(rootName)) {
    return { types: '', error: '型の名前は、大文字の英字や日本語などで始めてください' };
  }
  if (text.trim() === '') return { types: '', error: '' };
  let value: unknown;
  try {
    value = JSON.parse(text);
  } catch (e) {
    return { types: '', error: `JSON として読めません：${(e as Error).message}` };
  }
  return { types: jsonToTypes(value, rootName), error: '' };
}

export function JsonToTypes({ initial = '' }: { initial?: string }) {
  const id = useId();
  const [text, setText] = useState(initial);
  const [rootName, setRootName] = useState('Root');
  // 最後にコピーした型の文字列
  const [copied, setCopied] = useState('');

  // 型は state に持たず、描くたびに作る
  const { types, error } = convert(text, rootName);

  async function copy() {
    await navigator.clipboard.writeText(types);
    setCopied(types);
  }

  return (
    <div className="json-to-types">
      <label htmlFor={`${id}-json`}>JSON</label>
      <textarea
        id={`${id}-json`}
        rows={8}
        spellCheck={false}
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <label htmlFor={`${id}-name`}>一番外側の型の名前</label>
      <input id={`${id}-name`} value={rootName} onChange={(e) => setRootName(e.target.value)} />
      {error && (
        <p className="error" role="alert">
          {error}
        </p>
      )}
      <div className="types-header">
        <span>TypeScript の型</span>
        <button type="button" onClick={copy} disabled={types === ''}>
          {types !== '' && copied === types ? 'コピーしました' : 'コピー'}
        </button>
      </div>
      <pre className="types">
        <code>{types}</code>
      </pre>
    </div>
  );
}

.json-to-types {
  display: grid;
  gap: 6px;
  max-width: 560px;
}
.json-to-types textarea,
.json-to-types input,
.json-to-types pre {
  font-family: ui-monospace, monospace;
  font-size: 14px;
}
.json-to-types .error {
  margin: 0;
  color: #d85878;
}
.types-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.types {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #00c8e8;
  border-radius: 6px;
  background: #eefafd;
  /* 長い行は、枠からはみ出さずに横にスクロールさせる */
  overflow-x: auto;
}

JSON として読めません：Expected double-quoted property name in JSON at position 382 (line 17 column 1)