React応用 - TypeScriptをかじる1 - 超基本

※一番下あたりのジェネリックス、aynsc/awaitは書きかけ

TypeScriptとは

• JavaScriptを拡張し作られた言語
• 2014年頃にMicrosoftが開発し発表
• Googleの開発で採用された
• コンパイルするとJavaScriptのコードに変換される(コンパイルが必要)

TypeScriptの特徴

• 変数のデータ型を宣言時に決定できる
• 異なるデータ型の引数を処理できる

変数に型注釈をつける

型を指定して変数を宣言する。ということですね。
以下のように書きます。

let str: string = 'あいう';
let num: number = 0;
let bln: boolean = false;

もちろん、string型に数値は代入できませんし、num型に文字列は代入できません。

any型

なんでもOK型
※プロジェクトの初期設定(package.jsonとか？)で許可しないような設定にしている場合あり

let anygata: any;

anygata = 123;
console.log(anygata);

anygata = 'あいうえお';
console.log(anygata);

ユニオン

let uni: 'abc' | '123' | '+++';

uni = 'abc';
console.log(uni);

uni = '123';
console.log(uni);

uni = '+++';
console.log(uni);

uni = '++++';  // ★★これは'abc' でも '123' でも '+++'ないのでコンパイルエラー
console.log(uni);

Omit

// 元の型定義
type Moto ={
    atai1: string;
    atai2: string;
    atai3: string;
    atai4: string;
}

// 元の型の初期化用
const initMoto: Moto = {
    atai1: '',
    atai2: '',
    atai3: '',
    atai4: '',
}

// 先の型（元から一部のプロパティを除く
type Saki = Omit<Moto, "atai2" | "atai4">

// 先の型で変数を定義
const saki: Saki = initMoto;

saki.atai1 = '111';
saki.atai2 = '222';  // ★コンパイルエラー
saki.atai3 = '333';
saki.atai4 = '444';  // ★コンパイルエラー

ジェネリックス

ジェネリックスをGoogleなどで翻訳すると汎用のなどと出てきます。

以下のような場合に使用します。

• 使用されるまで型が決まらないような時
• いろいろな型の値を受け入れられるように実装する時

※ジェネリックスは他言語にもあるようですね。TypeScript固有の機能では無い。

Promise / async / await