FullStackOpen Part9-a TypeScript background and introduction メモ

Main Principle

TypeScriptはJavascriptのスーパーセット。

以下の三つの構成要素からなる
1. The language (文法、キーワード、型注釈)
2. The compiler (Javascriptに変換する機能)
3. The language service (インテリセンス、型ヒント、リファクタリング)

TypeScript key language features

Type annotation
変数や関数の引数にデータ型を付けておく機能。
以下のようなイメージ。

const birthdayGreeter = (name: string, age: number): string => {
  return `Happy birthday ${name}, you are now ${age} years old!`;
};

const birthdayHero = "Jane User";
const age = 22;

console.log(birthdayGreeter(birthdayHero, age));

Structual typing
構造的型付けを採用している
分かりやすくChatGPTが説明してくれたので以下を参照

型システムの世界では主に2つのタイプがあります。それが「ノミナル型付け」（名前に基づく型付け）と「構造的型付け」（構造に基づく型付け）です。TypeScriptは後者、つまり構造的型付けを採用しています。

ノミナル型付けを採用した言語（例：C++やJava）では、型は名前で識別されます。そのため、たとえ2つの型がまったく同じ構造を持っていても、名前が異なればそれらは異なる型として扱われます。

しかし、構造的型付けを採用したTypeScriptでは、型の名前ではなく、その型がどのような構造（つまり、どのようなプロパティやメソッドを持っているか）を持っているかが重要です。

それでは具体例を使って説明しましょう：

ChatGPT

interface Named {
    name: string;
}

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

let p: Named;
p = new Person("Mike"); // No error: Structural Typing!

この例では、Personクラスは明示的にNamedインターフェースを実装していません。しかし、PersonクラスがNamedインターフェースと同じ構造（つまり、nameという文字列型のプロパティを持つ）を持っているため、TypeScriptの構造的型付けの規則により、Person型のオブジェクトをNamed型の変数に代入することができます。

このように、TypeScriptの構造的型付けは型の互換性を決定するためにその型がどのような構造を持っているかを見ます。この特性により、TypeScriptはJavaScriptの動的な性質と静的な型安全性をうまく組み合わせています。

ChatGPT

Type inference
型が指定されていないものにはTypeScriptが型を推定してくれる。

Type erasure
コンパイルしてJavascriptになったら型情報は失われる

Why should one use TypeScript?

いくつかのメリット
1. 型チェック・静的コード解析により、型ミスやミススペルなどを防げる
2. 型注釈がドキュメントのような役割を果たしてくれる
3. インテリセンスがよりいい提案をしてくれる