3. TypeScriptの基本的な型

3.1 型注釈

変数に型を追加するための型注釈を使用します。

let age: number = 18;

3.2 一般的な基本型の概要

JavaScriptの既存の型とTypeScriptで追加された新しい型があります。

• JavaScriptの既存の型
  • 原始型: number, string, boolean, null, undefined, symbol
  • オブジェクト型: object (配列、オブジェクト、関数など)
• TypeScriptの新しい型
  • 結合型、カスタム型、インターフェース、タプル、リテラル型、列挙型、void、anyなど

3.3 原始型

以下の6つの原始型があります。

let age: number = 25;
let myName: string = 'yuyao';
let isLoading: boolean = false;
let a: null = null;
let b: undefined = undefined;
let s: symbol = Symbol();

3.4 配列型

配列型には2つの書き方があります。

let numbers: number[] = [1, 3, 5];
let numbers2: Array<number> = [1, 2, 3];

3.5 結合型

複数の型を組み合わせることができます。

let arr: (number | string)[] = [1, 'a', 4, 'b', 4];
let arr2: number | string[] = 12;

3.6 タイプエイリアス

任意の型に別名を付けることができます。

type CustomArray = (number | string)[];
let arr2: CustomArray = [1, 2, 'q'];

3.7 関数型

関数のパラメータと戻り値の型を指定します。

function add(num1: number, num2: number): number {
    return num1 + num2;
}
const add1 = (num1: number, num2: number): number => {
    return num1 + num2;
}
const add2: (num1: number, num2: number) => number = (num1, num2) => {
    return num1 + num2;
}

3.8 void型

戻り値がない関数にはvoid型を使用します。

function greet(name: string): void {
    console.log('hello', name);
}

3.9 オブジェクト型

オブジェクトの構造を記述します。

let person: { name: string; age: number; sayHi(): void } = {
    name: 'jack',
    age: 25,
    sayHi() {}
};

3.10 インターフェース

オブジェクトの型を再利用するためにインターフェースを使用します。

interface IPerson {
    name: string;
    age: number;
    sayHi(): void;
}
let person1: IPerson = {
    name: 'zyy',
    age: 18,
    sayHi() {}
};

3.11 タプル

要素数と各要素の型が明確な配列型です。

let position: [number, number] = [29.1, 23.2];

3.12 型推論

TypeScriptは型推論機能を持っています。

let str1 = 'Hello TS';
const str2 = 'Hello TS';

3.13 型アサーション

開発者がより具体的な型を指定することができます。

let aLink: HTMLAnchorElement = document.getElementById('link') as HTMLAnchorElement;

3.14 リテラル型

特定の文字列や数値を型として使用できます。

function changeDirection(direction: 'up' | 'down' | 'left' | 'right') {
    console.log(direction);
}

3.15 列挙型

一連の定義済みの値を持つ型です。

enum Direction { Up, Down, Left, Right };
function changeDirection1(direction: Direction) {
    console.log(direction);
}

3.16 any型

型チェックを無効にするための型です。使用は推奨されません。

3.17 typeof

変数の型を取得するための操作子です。

let p = { x: 1, y: 2 };
function formatPoint(point: typeof p) {}