CODE ATLAS / 文法辞典

TypeScriptの書き方

よく使う文法・タグ・操作を、短い例で。42項目から探せます。

HTML36 CSS39 JavaScript50 TypeScript42 Python44 SQL43 Java42 C42 C++42 C#42 Go42 Rust42 Kotlin42 Swift42

検索用途

42 / 42項目

型チェックはstrict設定を想定しています。実行前にJavaScriptへ変換します。

基本

基本の型

入れてよい値の種類を、コードで伝えます。

main.ts

const name: string = "海";
const age: number = 20;
console.log(name);

説明と練習この項目

基本

関数の型

受け取る値と、返す値を決めます。

main.ts

function add(a: number, b: number): number {
  return a + b;
}
console.log(add(2, 3));

説明と練習この項目

基本

オブジェクトの型

ひとまとまりの情報にも、形を決められます。

main.ts

type User = { name: string };
const user: User = { name: "海" };
console.log(user.name);

説明と練習この項目

基本

配列の型

一覧に入る値の種類をそろえます。

main.ts

const names: string[] = ["海", "空"];
console.log(names[0]);

説明と練習この項目

基本

ユニオン型

いくつかの選択肢を持つ値を表します。

main.ts

type Color = "red" | "blue";
const color: Color = "red";

説明と練習この項目

基本

省略できる項目

必須ではない情報を、?で表します。

main.ts

type User = { nickname?: string };
const user: User = {};
console.log(user.nickname ?? "名無し");

説明と練習この項目

基本

型を絞り込む

値の種類を調べて、安全に処理します。

main.ts

function show(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase());
  }
}
show("hello");

説明と練習この項目

型の基本

型の推論

値から型が決まる。

main.ts

let age = 20;
age = 21;
// age = "海"; は型エラー

この項目

型の基本

boolean・null・undefined

真偽値や値のない状態を表す。

main.ts

const active: boolean = true;
const name: string | null = null;
const value: number | undefined = undefined;

この項目

型の基本

リテラル型

決まった値だけを許可する。

main.ts

let size: "small" | "large" = "small";

この項目

型の基本

interface

オブジェクトの形に名前を付ける。

main.ts

interface User {
  name: string;
  age: number;
}
const user: User = { name: "海", age: 20 };

この項目

型の基本

readonly

型チェックで書き換えを禁止する。

main.ts

type User = { readonly id: number };
const user: User = { id: 1 };
// user.id = 2; は型エラー

実行時に値を凍結する機能ではありません。

この項目

型の基本

タプル

位置ごとの型と長さを決める。

main.ts

const pair: [string, number] = ["海", 20];

この項目

型の基本

unknown

型を調べるまで操作できない値。

main.ts

const value: unknown = "海";
if (typeof value === "string") {
  console.log(value.length);
}

この項目

型の基本

any

型チェックを避ける。

main.ts

let value: any = "海";
value = 20;

誤りを見つけにくくなるため、まずunknownなどを検討します。

この項目

型の基本

型アサーション

値の型についてコンパイラーに伝える。

main.ts

const input = document.querySelector("input") as HTMLInputElement | null;
console.log(input?.value);

asは値を変換しません。実際の型が違っていても検証しません。

この項目

型の基本

as const

値をリテラルとして固定した型にする。

main.ts

const colors = ["red", "blue"] as const;

この項目

型の基本

satisfies

値が型に合うか確認する。

main.ts

type User = { name: string };
const user = { name: "海" } satisfies User;

この項目

関数と型の組み合わせ

省略できる引数

引数を省略可能にする。

main.ts

function greet(name?: string): string {
  return name ?? "ゲスト";
}

この項目

関数と型の組み合わせ

関数そのものの型

受け取る値と返す値を指定する。

main.ts

const add: (a: number, b: number) => number =
  (a, b) => a + b;

この項目

関数と型の組み合わせ

void・never

返り値なし、または正常に戻らない関数。

main.ts

function log(): void { console.log("海"); }
function fail(): never { throw new Error("失敗"); }

この項目

関数と型の組み合わせ

ジェネリクス

受け取った型を結果にも引き継ぐ。

main.ts

function first<T>(items: T[]): T | undefined {
  return items[0];
}
const name = first(["海", "空"]);

この項目

関数と型の組み合わせ

型の制約

受け取れる型に条件を付ける。

main.ts

function getName<T extends { name: string }>(user: T) {
  return user.name;
}

この項目

関数と型の組み合わせ

交差型

複数の型の条件を合わせる。

main.ts

type Name = { name: string };
type Age = { age: number };
type User = Name & Age;

この項目

関数と型の組み合わせ

判別可能なユニオン

共通の目印で型を分ける。

main.ts

type Result =
  | { ok: true; value: string }
  | { ok: false; error: string };
function show(r: Result) {
  if (r.ok) console.log(r.value);
}

この項目

関数と型の組み合わせ

inによる絞り込み

項目があるか調べて型を区別する。

main.ts

function show(value: { name: string } | { age: number }) {
  if ("name" in value) console.log(value.name);
}

この項目

関数と型の組み合わせ

keyof

型のプロパティ名を型にする。

main.ts

type User = { name: string; age: number };
type UserKey = keyof User; // "name" | "age"

この項目

関数と型の組み合わせ

typeofによる型取得

既存の値から型を作る。

main.ts

const settings = { dark: true };
type Settings = typeof settings;

この項目

関数と型の組み合わせ

インデックスアクセス型

プロパティや配列の要素の型を取り出す。

main.ts

type User = { name: string };
type Name = User["name"];
type Item = string[][number];

この項目

型の便利な道具

Partial

すべての項目を省略可能にする。

main.ts

type User = { name: string; age: number };
const update: Partial<User> = { age: 21 };

この項目

型の便利な道具

Required

すべての項目を必須にする。

main.ts

type User = { name?: string };
const user: Required<User> = { name: "海" };

この項目

型の便利な道具

Pick

必要な項目だけ選ぶ。

main.ts

type User = { name: string; age: number };
type NameOnly = Pick<User, "name">;

この項目

型の便利な道具

Omit

指定した項目を除く。

main.ts

type User = { name: string; age: number };
type WithoutAge = Omit<User, "age">;

この項目

型の便利な道具

Record

キーと値の型を決める。

main.ts

const prices: Record<string, number> = {
  apple: 100, orange: 200
};

この項目

型の便利な道具

Readonly

すべての項目を書き換え禁止にする。

main.ts

type User = { name: string };
const user: Readonly<User> = { name: "海" };

この項目

型の便利な道具

Exclude・Extract

候補を除く、または共通候補を選ぶ。

main.ts

type Color = "red" | "blue" | "green";
type Other = Exclude<Color, "red">;
type Warm = Extract<Color, "red" | "orange">;

この項目

型の便利な道具

NonNullable

nullとundefinedを除く。

main.ts

type Name = string | null | undefined;
type PresentName = NonNullable<Name>;

この項目

型の便利な道具

ReturnType・Parameters

関数から返り値や引数の型を取り出す。

main.ts

function add(a: number, b: number) { return a + b; }
type Answer = ReturnType<typeof add>;
type Args = Parameters<typeof add>;

この項目

型の便利な道具

Promiseの型

非同期処理の結果の型を示す。

main.ts

async function greet(): Promise<string> {
  return "こんにちは";
}

この項目

型の便利な道具

型だけのimport・export

型を別ファイルへ分ける。

main.ts

// user.ts
export type User = { name: string };
// app.ts
import type { User } from "./user";

この項目

型の便利な道具

interfaceの継承

既存の型に項目を足す。

main.ts

interface User { name: string; }
interface Admin extends User { role: string; }

この項目

型の便利な道具

クラスの型

プロパティと引数に型を付ける。

main.ts

class User {
  constructor(public name: string) {}
  greet(): string { return this.name; }
}

この項目