Typescript

TypeScriptとは #

  • マイクロソフトによって開発されているオープンソースのプログラミング言語のこと.
  • JavaScriptに, 静的型付け・クラスベースオブジェクト指向を加えた.
  • GitHubリポジトリ: https://github.com/Microsoft/TypeScript

初めてのTypeScript #

solareenlo/Typescript-Practice/01_Getting_Started

インストール #

npm i --save-dev typescript

TypeScript + Node.js + Docker + Circle CI #

objectのkeyにstringを設定したら, object[key]でエラーになった時の対処法 #

  1. tsconfigに--suppressImplicitAnyIndexErrorsを付け加える. ブラケット記法でプロパティにアクセスした時にany型を許容するのでとっても非推奨.
  • 以下のようにkeystring型と明示する. 問題点はkeyが全てstring型になること.
    interface ISomeObject {
        firstKey:      string;
        secondKey:     string;
        [key: string]: string; // <-この行を追加!
    }
    
    const obj = {
      firstKey: "a",
      secondKey: "b",
    } as ISomeObject;
    
    const key: string = 'secondKey';
    const secondValue: string = obj[key];
    
    なのでこうする. が, secondValueの型がstring|boolean|number型と複数の型になる.
    interface ISomeObject {
        firstKey:      string;
        secondKey:     number;
        thirdKey: boolean
        [key: string]: string|boolean|number;  //<-or条件で型を指定
    }
    
    const key: string = 'secondKey';
    const secondValue = obj[key]; // secondValue => string|boolean|number型
    
  • keyofを使う.
    interface ISomeObject {
      firstKey:      string;
      secondKey:     number;
      thirdKey:      boolean;
    }
    
    const obj = {
      firstKey: "a",
      secondKey: 2,
      thirdKey: false
    } as ISomeObject;
    
    const key: keyof ISomeObject  = 'secondKey'; // ここを変更
    const secondValue = obj[key]; // secondValueがnumber型に!
    
    ジェネリクスを使って、type safeにブラケット記法が使える関数を作ると以下の感じになる.
    const accessByBracket = <S, T extends keyof S>(obj: S, key: T) => {
      return obj[key];
    };
    
    const obj = {
      firstKey: "a",
      secondKey: 2,
      thirdKey: false
    } as ISomeObject;
    
    const value = accessByBracket(obj, 'secondKey'); // value => 2
    

Reference: Typescript ブラケット記法(Object[key])でno index signatureエラーをtype safeに解決したい。