TypeScriptの基礎

TypeScriptとは

・マイクロソフトが2012年に開発。
・大規模化するJavaSciptコードに対応するために開発された。

静的型付け

・TypeScriptは、JavaScriptに静的型付けの機能が加わったもの。

動的型付け言語と静的型付け言語では、型エラーの発生タイミングが違う！

TypeScriptは、型エラーを実行前に検出できる。

基本文法

①JavaScriptの構文は全て使える

理由：TypeScriptは、結局JavaScriptに変換されるから。

②型注釈

変数の横にコロンで型を指定できる。

Typescipt：sample.ts

const num: number = 123;
const text: string;

高度な型

①ユニオン型

型をORで指定できる。PHPにも8.0からある。

Typescipt：sample.ts

const union_value: boolean | number | string;

②リテラル型

ある型として使える文字列を限定できる。

Typescipt：sample.ts

const sizeType: "s" | "m" | "l";

③type文

独自の型を作れる。
タイプアノテーションの度に詳細を書く必要がなくなる。

Typescipt：sample.ts

type sizeType: "s" | "m" | "l";
const clothSizeType : sizeType;

const shoeSizeType: "s" | "m" | "l"; // こう書く必要はない

④型引数

型宣言の引数に値ではなく型自体を渡すことができる。
引数の型の柔軟性が上がり、再利用性を高めることができます。
<>で囲まれたものが型引数です。

Typescipt：sample.ts

type User<T> = {
    age: T
}

const unknown_age_user: User<string> = {
    age: "年齢不詳"
}
const known_age_user: User<number> = {
    age: 100
}

⑤ジェネリクス

型引数を関数に対して使用する。

Typescipt：sample.ts

function double<T>(target: T): T{
    return target + target
}

const number10: number = 10
const string10: string = "10"

console.log(double(number10)) // 戻り値の型はnumber
console.log(double(string10)) // 戻り値の型はstring