【TypeScript】自動で TypeScript が行う型付け

 TypeScript は JavaScript に型機能を加えた拡張の言語です。なぜわざわざ型が付いたものを使うのかというとその方が開発が早くなるからです。型を用いた静的解析によりコードを実行せずともバグを減らせます。バグ数は低下しますが、TypeScriptの型付けはしばしば時間がかかります。あまりにも時間がかかったり、コードが複雑になる様ならば諦めて any や as を使った方がいい時もあるぐらいです。しかしながら、そもそも型付けしなくてもいい部分で時間がかかっている時があります。例えば次の様に一々 number や string 型をつけるのは手間ですが、実は型付けしなくとも問題ありません。

const a: number = 1;
const b: string = "";
const c: {example: string} = {example: ""};

 開発を早くするためには TypeScript の面倒な部分である型定義を省略するのが有効です(この際、冗長な部分のみを省略すべきです。本来必要な部分も省略すると型の意味がなくなりバグにつながります)。例えば、上記例の様な初期化におけるプリミティブ型(boolean, number, stringなど)の型付けは冗長な省略できる部分であり、記述しない方がお得です。

プリミティブ型 (primitive types) | TypeScript入門『サバイバルTypeScript』#プリミティブ型の種類

 TypeScript には型推論の機能が備わっており明示的に型を記述しなくとも、ある程度自動で型付けをしてくれます。

let x = 1; // let x: number = 1;と同じ意味になる
x = "hello"; // エラー発生。Type 'string' is not assignable to type 'number'.

変数宣言の型推論 | TypeScript入門『サバイバルTypeScript』

class Point {
  x = 0; // number型と型推論される
}

フィールドの初期化子 (initializer) | TypeScript入門『サバイバルTypeScript』#初期化子と型推論

 これにより次の様に記述でき、コードを書く量が JavaScript と同じまま静的解析の恩恵にあずかれます。

const a = 1;// a は number 型とみなされる
const b = "";// b は string 型とみなされる
const c = {example: ""};// c は {example: string} 型とみなされる

 逆に型定義すべき場合は自動で付けられる型と異なる型を付ける場合です。これはより狭い範囲を示す型や複数のプリミティブ型を組み合わせた型やオブジェクトの今後増えるかもしれないが現在 undefined な部分を明示するなど様々です。具体例が次です。

// 自動的には string が付けられるが 'HOGE' | 'FUGA' | 'PIYO' のいずれかしか代入されて欲しくないため
// 明示的に TestLiteral という型であることを示す。
type TestLiteral = 'HOGE' | 'FUGA' | 'PIYO';
const fuga: TestLiteral = 'FUGA';

// 自動的には string が付けられるが number 型が代入されることもあるので string | number と型付け
const a: string | number = '';

// 自動的には { example: string } が付けられるが後の処理でプロパティの value が追加されることもあるので
// ExampleObject と型付け
type ExampleObject = {
  example: string;
  value?: string; // ?: は undefined か:の後に続く型、という意味。この例では : undefined | string と同義
};
const c: ExampleObject = { example: '' };

 適切に必要なだけ型付けをすることでより早く TypeScript のコードを書けます。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG