TypeScript の学習概要

TypeScript は、静的な型システムを JavaScript に追加する JavaScript のスーパーセットです。以下は、知っておくべき TypeScript の基本的な知識ポイントと機能です。

基本型:
TypeScript は JavaScript と同じ基本型をサポートし、いくつかの追加の型オプションを提供します。
```
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
```
Array :
要素タイプを直接続けて、[]要素タイプの配列を形成できます。
```
let list: number[] = [1, 2, 3];
```
Enumeration :
列挙型は、TypeScript が名前付きの数値コレクションを JavaScript に追加する便利な方法です。
```
enum Color {
      
      Red, Green, Blue}
let c: Color = Color.Green;
```
任意の値 (Any) :
型チェッカーに特定の値をチェックさせたくない場合に、この型を使用できますany。
```
let notSure: any = 4;
notSure = "maybe a string instead";
```
Void :
型が存在しないことを表すために使用され、通常は値を返さない関数の戻り値の型を表すために使用されます。
```
function warnUser(): void {
      
      
    console.log("This is my warning message");
}
```

インターフェイス:
インターフェイスは、コードまたはサードパーティのコード間の契約、またはコードとサードパーティのコード間の契約です。

interface LabelledValue {
      
      
  label: string;
}
function printLabel(labelledObj: LabelledValue) {
      
      
  console.log(labelledObj.label);
}

クラス:
TypeScript クラスは、JavaScript クラスの単純な構文糖にすぎません。

class Greeter {
      
      
  greeting: string;
  constructor(message: string) {
      
      
    this.greeting = message;
  }
  greet() {
      
      
    return "Hello, " + this.greeting;
  }
}

モジュール:
TypeScript ECMAScript 2015 と同様、トップレベルのインポートまたはエクスポートを含むファイルはすべてモジュールとみなされます。

// module.ts
export function hello() {
      
      
    return "Hello!";
}

// main.ts
import {
      
       hello } from './module';
console.log(hello());

ジェネリック:
ジェネリックは再利用可能なコンポーネントを作成する方法であり、コンポーネントは複数のタイプのデータをサポートできます。
```
function identity<T>(arg: T): T {
      
      
    return arg;
}
```

デコレータ:
デコレータは、クラス宣言を作成するときに宣言を変更する方法を提供します。

function sealed(constructor: Function) {
      
      
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

@sealed
class Greeter {
      
      
    // ...
}

ネームスペース:
ネームスペースは、コードをグローバル名でラップして、他の場所で書かれたコードとの競合を防ぐ方法です。

namespace MyNamespace {
      
      
    export interface SomeInterface {
      
      
        // ...
    }
    export class SomeClass {
      
      
        // ...
    }
}

型アサーション:
型アサーションは他の言語の型変換に似ていますが、特別なデータのチェックや構造化はありません。実行時への影響はなく、コンパイル段階でのみ機能します。
```
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
```

マップされた型:
TypeScript を使用すると、すべてのプロパティをオプションまたは読み取り専用にするなど、古い型から新しい型を作成できます。

type Readonly<T> = {
      
      
    readonly [P in keyof T]: T[P];
};

type Partial<T> = {
      
      
    [P in keyof T]?: T[P];
};

条件タイプ:
条件式によってタイプを選択します。

type TypeName<T> =
    T extends string ? "string" :
    T extends number ? "number" :
    "object";
type T1 = TypeName<string>;  // "string"
type T2 = TypeName<number>;  // "number"

インデックス付きタイプ:
インデックスタイプのクエリとインデックスタイプのアクセス操作を使用して、「オブジェクトから属性を選択する」パターンを実装します。
```
function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] {
      
      
    return names.map(n => o[n]);
}
```
テンプレートリテラルタイプ:
文字列テンプレートリテラル構文をタイプレベルで使用できるようにします。
```
type World = "world";
type Greeting = `hello ${
        
        World}`;
```

再帰型:
型はそれ自体を参照して、再帰型またはネストされた型を形成できます。

type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
interface JsonObject {
      
       [key: string]: JsonValue; }
interface JsonArray extends Array<JsonValue> {
      
      }

型アサーションと型ガード:
カスタム型ガードを使用すると、型チェックの結果に明示的に影響を与えることができます。
```
function isString(test: any): test is string {
      
      
    return typeof test === "string";
}
```
型推論:
TypeScript は、コードに基づいて式の型を自動的に決定しようとします。
```
let x = 3;  // `x` has the type `number`
```
宣言のマージ:
TypeScript では宣言のマージが可能で、ユーザーがクラス、インターフェイス、モジュールなどを複数のファイルに分割できます。
```
interface Cloner {
      
      
    clone(animal: Animal): Animal;
}

interface Cloner {
      
      
    clone(animal: Sheep): Sheep;
}
```
グローバル宣言:
プロジェクト内で共有するために、グローバルスコープで変数、型、関数などを宣言できます。
```
declare var jQuery: (selector: string) => any;
```
タイプと名前空間のインポート/エクスポート:
インポート/エクスポート構文を使用してコードを整理し、共有します。
```
import {
      
       SomeType } from './some-module';
export {
      
       SomeType };
```

Decorator Factory :
デコレータを作成して結合します。

function loggable(target: Function) {
      
      
    return class extends target {
      
      
        log() {
      
      
            console.log('Logging...');
        }
    }
}

@loggable
class MyClass {
      
      
    // ...
}

tsconfig.json を使用する:ファイル
を使用して、TypeScript プロジェクトのコンパイルオプションとインクルードファイルを構成します。tsconfig.json
サードパーティライブラリからの型定義を使用する:
DefinitelyTyped プロジェクトおよびスコープパッケージを通じて、@typesサードパーティライブラリから型定義を取得して使用します。

これらの基本的な知識ポイントと機能は、TypeScript を使用して厳密に型指定されたオブジェクト指向の JavaScript コードを作成するための基礎を提供します。TypeScript には他にも多くの高度な機能と構成オプションがあり、 TypeScript 公式マニュアルまたはその他の関連リソースを読むことでさらに学習し、習得することができます。

おすすめ