TypeScript：外部データの型付け

出力 == ノートPC

const raw = JSON.parse(json) as { name: string; price: number }; と書く。

const json = '{"name":"ノートPC","price":128000}';

const data = JSON.parse(json) as { name: string; price: number };

console.log(data.name);

as は「この型だと思ってくれ」という宣言。動くが、実際のデータが違っていてもTypeScriptは気づかない——次の問題でその危険を見る。

解答 == B

中身が何か分からないので、TypeScriptは何を返すか。

B

any なので、その後の処理で型チェックが一切効かなくなる。data.存在しない項目 と書いてもエラーにならない。

出力2行。有効 / 無効

typeof で object かつ null でないことを確認してから、各プロパティの型を調べる。

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

function isProduct(v: unknown): v is Product {
  if (typeof v !== "object" || v === null) {
    return false;
  }
  const o = v as Record<string, unknown>;
  return typeof o.name === "string" && typeof o.price === "number";
}

console.log(isProduct({ name: "PC", price: 100 }) ? "有効" : "無効");
console.log(isProduct({ name: "PC" }) ? "有効" : "無効");

これが唯一の確実な方法。実行時に1つずつ確認するので、どんなデータが来ても正しく判定できる。

const raw: ____ = JSON.parse('{"n":1}');

if (typeof raw === "object" && raw !== null) {
  console.log("オブジェクトです");
}

出力 == オブジェクトです

any より安全な「型が分からない」を表す型（TS05）。

unknown

unknown で受ければ、確認するまで何もできない。any だと確認せずに使えてしまうので、外部データには unknown を使う。

解答 == B

as は実行時に何かをするのか。

B

as は型チェックを黙らせるだけで、実行時には何も起きない。データが違えば、使おうとした瞬間に落ちる。

出力 == 1

Array.isArray で配列か確認してから filter する。

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

function isProduct(v: unknown): v is Product {
  if (typeof v !== "object" || v === null) return false;
  const o = v as Record<string, unknown>;
  return typeof o.name === "string" && typeof o.price === "number";
}

const raw: unknown = JSON.parse('[{"name":"A","price":100},{"name":"B"}]');
const valid = Array.isArray(raw) ? raw.filter(isProduct) : [];

console.log(valid.length);

不正な要素を除去すれば、残りは安全に扱える。price が無い2件目は自動的に弾かれる。

const raw: unknown = [1, 2, 3];

if (Array.____(raw)) {
  console.log(raw.length);
}

出力 == 3

「配列である」を判定する標準メソッド。7文字。

isArray

Array.isArray は標準の型ガード。TypeScriptがこれを理解しているので、if の中では配列として扱える。

解答 == C

実行時に確認する方法はどれか。

C

実行時に確認するのは型ガードだけ。any も as も、コンパイル時に型チェックを回避するだけで、実際のデータは保証されない。

出力 == 解析に失敗しました

JSON.parse は SyntaxError を投げる。try/catch で囲む。

const json = "{壊れた";

try {
  JSON.parse(json);
  console.log("解析成功");
} catch (e) {
  console.log("解析に失敗しました");
}

JSON.parse は不正な文字列で例外を投げる。外部データを扱うときは、解析そのものが失敗する可能性も考える必要がある。

出力 == {"url":"https://a.com","timeout":30}

各項目を typeof で確認し、正しければ使い、違えば既定値を返す。

type Config = { url: string; timeout: number };

function parseConfig(v: unknown): Config {
  const o = (typeof v === "object" && v !== null ? v : {}) as Record<
    string,
    unknown
  >;

  return {
    url: typeof o.url === "string" ? o.url : "https://default.com",
    timeout: typeof o.timeout === "number" ? o.timeout : 30,
  };
}

console.log(JSON.stringify(parseConfig({ url: "https://a.com" })));

「不正なら既定値」という設計は壊れない。どんなデータが来ても必ず Config が返るので、呼び出し側は失敗を考えなくてよい。

出力2行。ノートPC：128,000円 / 不正なデータ

JSON.parse を try で囲み、結果を型ガードで検証する。

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

function isProduct(v: unknown): v is Product {
  if (typeof v !== "object" || v === null) return false;
  const o = v as Record<string, unknown>;
  return typeof o.name === "string" && typeof o.price === "number";
}

function parseProduct(json: string): string {
  try {
    const raw: unknown = JSON.parse(json);
    if (!isProduct(raw)) {
      return "不正なデータ";
    }
    return `${raw.name}：${raw.price.toLocaleString()}円`;
  } catch (e) {
    return "不正なデータ";
  }
}

console.log(parseProduct('{"name":"ノートPC","price":128000}'));
console.log(parseProduct('{"name":"マウス","price":"3200"}'));

price が文字列で来るのは実務でよくある。as Product なら素通りして "3200".toLocaleString() が呼ばれ、意図しない結果になる。

出力 == 有効2件（合計131,200円）／無効1件

Array.isArray で確認し、filter で有効なものを取り出す。無効件数は全体から引く。

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

function isProduct(v: unknown): v is Product {
  if (typeof v !== "object" || v === null) return false;
  const o = v as Record<string, unknown>;
  return typeof o.name === "string" && typeof o.price === "number";
}

const json =
  '[{"name":"ノートPC","price":128000},{"name":"マウス","price":3200},{"name":"不明"}]';

const raw: unknown = JSON.parse(json);
const all = Array.isArray(raw) ? raw : [];
const valid = all.filter(isProduct);
const total = valid.reduce((sum, p) => sum + p.price, 0);

console.log(
  `有効${valid.length}件（合計${total.toLocaleString()}円）／無効${
    all.length - valid.length
  }件`
);

不正なデータを除外しつつ、その件数も把握している。実務では「何件が弾かれたか」をログに残すことが重要になる。

出力3行。全指定/一部/既定値で補完

各項目を typeof で確認し、正しくなければ既定値を使う。

type Config = { url: string; timeout: number; retry: number };

const DEFAULTS: Config = {
  url: "https://default.com",
  timeout: 30,
  retry: 3,
};

function parseConfig(v: unknown): Config {
  const o = (typeof v === "object" && v !== null ? v : {}) as Record<
    string,
    unknown
  >;

  return {
    url: typeof o.url === "string" ? o.url : DEFAULTS.url,
    timeout: typeof o.timeout === "number" ? o.timeout : DEFAULTS.timeout,
    retry: typeof o.retry === "number" ? o.retry : DEFAULTS.retry,
  };
}

const cases: unknown[] = [
  { url: "https://a.com", timeout: 60, retry: 5 },
  { url: "https://b.com" },
  { url: 123, timeout: "遅い" },
];

for (const c of cases) {
  const config = parseConfig(c);
  console.log(`${config.url} / ${config.timeout}秒 / ${config.retry}回`);
}

型が違う場合も既定値に落ちる。3件目は url が数値、timeout が文字列だが、すべて既定値で補われるので処理が止まらない。

出力 == 1000003200

2件のうち1件の price が文字列。reduce の初期値 0 から始めると、文字列との + で連結が起きる。

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

const json = '[{"name":"A","price":100000},{"name":"B","price":"3200"}]';
const products = JSON.parse(json) as Product[];

const total = products.reduce((sum, p) => sum + p.price, 0);

console.log(total);

期待した 103,200 ではなく 1000003200 という無意味な値になる。reduce の初期値 0 に数値の100000が足されて 100000 になり、次に文字列の "3200" が来た瞬間に連結が始まる。as で number と宣言したのに、TypeScriptは何も警告しなかった——これが型アサーションの危険性。

出力2行。両方とも 3,200円

price が number ならそのまま、string なら Number() で変換し、NaN でないか確認する。

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

function normalizeProduct(v: unknown): Product | null {
  if (typeof v !== "object" || v === null) return null;

  const o = v as Record<string, unknown>;
  if (typeof o.name !== "string") return null;

  let price: number;
  if (typeof o.price === "number") {
    price = o.price;
  } else if (typeof o.price === "string") {
    const n = Number(o.price);
    if (Number.isNaN(n)) return null;
    price = n;
  } else {
    return null;
  }

  return { name: o.name, price };
}

for (const json of ['{"name":"マウス","price":3200}', '{"name":"マウス","price":"3200"}']) {
  const p = normalizeProduct(JSON.parse(json));
  console.log(p ? `${p.price.toLocaleString()}円` : "不正");
}

実務では「型が揺れる」APIによく出会う。受け入れる型を広くとり、内部では1つの型に正規化する——この設計なら、外部の事情に振り回されずに済む。