2025.05.01 2025.05.04

TypeScriptの基本

kurumin

Contents

基本的な型
オブジェクト

基本的な型

プリミティブ型

boolean: 真偽値。
number: 数値。
string: 文字列。
bigint: 大きな整数。
symbol: 一意の値を示す。
undefined: 値が定義されていない状態を示す。
null: 値が存在しない状態を示す。

const isReady: boolean = false;
const age: number = 25;
const fullName: string = "John Doe";
const bigNumber: bigint = 100n;
const uniqueSymbol: symbol = Symbol("unique");
const notDefined: undefined = undefined;
const empty: null = null;

特殊な型

any: 何でも代入できる型。型が不明な場合に使用する。その値に対する操作の制限がなく、型の安全性は弱まる。
unknown: any型と似て、何でも代入できる型。その値に対する操作は制限され、型の安全性が保たれる。
void: 値が存在しないことを示す。関数が何も返さない場合に使用する。
never: 決して何も返さないことを示す。エラーを投げる関数や無限ループの関数の戻り値として使用する。

const a: any = 100; // 代入できる
console.log(a * 3); // 操作もできる
 
const x: unknown = 100; // 代入はできる
console.log(x * 3); // 操作はできない
 
// 戻り値のない関数
function doSomething(): void {}
 
// 戻り値を返すことがありえない関数
function throwError(): never {
  throw new Error();
}

型エイリアス

型エイリアスは既存の型を新たな名前で定義する機能。
より複雑な型を簡素に表現したり、コードの可読性を向上するのに役立つ。

type StringOrNumber = string | number;
let value: StringOrNumber;
value = "hello"; // string型が代入可能
value = 123; // number型も代入可能

構造的部分型

TypeScriptは構造的部分型を採用している。
構造的部分型では、変数の代入可否を、構造が互換しているかに着目して判定する。

type Summary = { name: string };
type Detail = { name: string; age: number };
 
const johnDetail: Detail = { name: "John", age: 28 };
const summary: Summary = johnDetail; // 代入できる。構造的部分型として互換があるため
 
const johnSummary: Summary = { name: "John" };
const detail: Detail = johnSummary; // 代入できない。構造的部分型として互換がない（ageを含まないため）

配列

配列の型注釈

配列の型注釈には型名[]またはArray<型名>を使う。

let numbers: number[];
let strings: Array<string>;

読み取り専用配列

読み取り専用配列は値の変更ができない配列を表す。
配列の型注釈にreadonlyをつけると読み取り専用配列となる。
ReadonlyArray<型名>でも読み取り専用配列が宣言でき、readonly 型名[]と機能は同じ。

const numbers: readonly number[] = [1, 2, 3];
const strings: ReadonlyArray<string> = ["hello", "world"];
 
numbers[0] = 4; // 値を変更できない
strings.push("!"); // 要素を追加できない

タプル型

タプル型を使うと、配列の要素数と要素の型が固定される。
それぞれの要素のインデックスごとに型が決まる。

let tuple: [string, number];
tuple = ["hello", 10]; // 代入できる
tuple = [10, "hello"]; // 順序が正しくないため、代入できない
tuple = ["hello", 10, "world"]; // 要素が多すぎるため代入できない

オブジェクト

オブジェクトの型注釈

オブジェクトの型注釈は{プロパティ1: 型1, プロパティ2: 型2, ...}の形で記述する。

const obj: { name: string; age: number };

readonlyプロパティ

readonlyをつけたプロパティは代入できない。

const obj: { readonly name: string; age: number };
obj = { name: "John", age: 20 };
obj.name = "Tom";

オプションプロパティ

オプションプロパティ?をつけたプロパティは省略可能。

const obj: { name: string; age?: number };
obj = { name: "John" }; // `age`プロパティがなくてもエラーにならない

オブジェクトメソッド

関数をプロパティに持つオブジェクトを定義できる。

const obj = {
  a: 1,
  b: 2,
  sum(): number {
    return this.a + this.b;
  },
};
console.log(obj.sum());

インデックス型

オブジェクトはインデックス型を利用して任意のキーの値を取得することができる。
インデックス型プロパティの型注釈は[キー名: プロパティキーの型]: プロパティ値の型 の形で記述する。

const obj: { [key: string]: number } = { key1: 1, key2: 2 };
console.log(obj["key1"]);
console.log(obj["key2"]);

Shorthand property names

プロパティの値がすでに定義されている変数である場合、そのプロパティ名を省略して記述できる(shorthand property names)。

const name = "John";
const age = 20;
const obj = { name, age };
console.log(obj);

オプショナルチェーン

プロパティが存在するかどうか不確定である場合、?.演算子（オプショナルチェーン）で安全にアクセスできる。

function printLength(obj: { a?: string }) {
  console.log(obj.a?.length);
}
printLength({ a: "hello" });
printLength({});

ABOUT ME