dreaife的休憩小栈

1. 基本の型#

TypeScript は以下の一般的な基本型をサポートします：

• number：数値型、整数と浮動小数点数を含む。

  1
  let age: number = 30

• string：文字列型、テキストの保存に用いる。

  1
  let name: string = "Alice";

• boolean：真偽値型、値は true または false。

  1
  let isActive: boolean = true;

• array：配列型、配列の要素の型を指定できます。

  1
  let numbers: number[] = [1, 2, 3];

• tuple：タプル型、固定長と型の配列に用いる。

  1
  let user: [string, number] = ["Alice", 30]

• enum：列挙型、名前付き定数の集合を定義します。

  1
  enum Color { Red, Green, Blue }
  2
  let color: Color = Color.Green;

• any：任意型、不確定な変数型に適用しますが、頻繁な使用は推奨されません。

  1
  let randomValue: any = "hello";
  2
  randomValue = 5;  // 他の型に再代入可能

• void：戻り値がなく、通常は関数に戻り値がない場合に用います。

  1
  function logMessage(): void {
  2
    console.log("This is a message");
  3
  }

• null と undefined：変数が空または未定義であることを示します。

  1
  let u: undefined = undefined;
  2
  let n: null = null;

2. 型注釈#

変数、引数、戻り値に型注釈を追加することで、コード補完とエラーチェックを容易にします。

1
let name: string = "Alice";
2
function greet(name: string): string {
3
  return `Hello, ${name}`;
4
}

3. インターフェース（Interfaces）#

インターフェースはオブジェクトの構造（どの属性とメソッドが含まれるか）を定義するため、コードの再利用性と柔軟性の実現に役立ちます。

1
interface Person {
2
  name: string;
3
  age: number;
4
  greet(): string;
5
}
6

7
let alice: Person = {
8
  name: "Alice",
9
  age: 30,
10
  greet() {
11
    return `Hello, my name is ${this.name}`;
12
  }
13
};

4. クラス（Classes）#

TypeScript はオブジェクト指向プログラミングをサポートし、クラスと継承の使用を許可します。クラスにはコンストラクター、属性、メソッドが含まれます。

1
class Animal {
2
  name: string;
3

4
  constructor(name: string) {
5
    this.name = name;
6
  }
7

8
  move(distance: number = 0) {
9
    console.log(`${this.name} moved ${distance} meters.`);
10
  }
11
}
12

13
let dog = new Animal("Dog");
14
dog.move(10);

• アクセス修飾子

TypeScript はクラスメンバーのアクセス権を制御する3つのアクセス修飾子を提供します：

• public：公開、デフォルトの修飾子で、どこからでもアクセスできます。
• private：プライベート、クラス内部でのみアクセス可能。
• protected：プロテクト、クラス内部および継承したサブクラスでアクセス可能。

1
class Person {
2
  public name: string;
3
  private age: number;
4
  protected address: string;
5

6
  constructor(name: string, age: number, address: string) {
7
    this.name = name;
8
    this.age = age;
9
    this.address = address;
10
  }
11
}

5. ジェネリクス（Generics）#

ジェネリクスは、関数・クラス・インターフェースを定義する際に型を指定せず、使用時に型を指定することを可能にします。これによりコードの再利用性が高まります。

1
function identity<T>(arg: T): T {
2
  return arg;
3
}
4

5
let output = identity<string>("Hello");  // T が string に推論される

6. 型推論#

TypeScript はコードに基づいて自動的に変数の型を推論します。明示的な型宣言がない場合、型は代入に基づいて自動的に判断されます。

1
let x = 10; // TypeScript は自動的に x を number と推論

7. ユニオン型（Union Types）#

ユニオン型は、1つの変数が複数の型の値を受け取ることを許容します。| 記号を使用して定義します。

1
let value: string | number;
2
value = "Hello";
3
value = 42;

8. 型エイリアス（Type Aliases）#

type キーワードを使用して型のエイリアスを定義し、再利用を容易にします。

1
type ID = string | number;
2
let userId: ID = "123";

9. 型アサーション（Type Assertions）#

型アサーションは、コンパイラに特定の値の具体的な型を伝え、TypeScript よりも変数の型をよく知っている場合に適用します。

1
let someValue: any = "This is a string";
2
let strLength: number = (someValue as string).length;

10. デコレータ（Decorators）#

デコレータは TypeScript の高度な機能で、クラス・メソッド・プロパティにメタデータを適用することを許可します。Angular ではデコレータを使ってコンポーネントやモジュールなどを多用します。

1
function log(target: any, key: string) {
2
  console.log(`${key} was called`);
3
}
4

5
class Person {
6
  @log
7
  greet() {
8
    console.log("Hello!");
9
  }
10
}

11. モジュールと名前空間#

• モジュール：TypeScript は ES6 モジュールシステムをサポートしており、import と export を使ってモジュールのインポートとエクスポートを実現します。

  1
  export const pi = 3.14;
  2
  
  3
  // main.ts
  4
  import { pi } from './module';
  5
  console.log(pi);

• 名前空間：TypeScript はコードを整理するための名前空間（namespace）を提供します。大規模なアプリケーションに適しています。

  1
  namespace Geometry {
  2
    export function calculateArea(radius: number): number {
  3
      return Math.PI * radius * radius;
  4
    }
  5
  }
  6
  
  7
  console.log(Geometry.calculateArea(5));