Zenn
📋

TypeScript 型と型宣言の備忘録

2020/09/20に公開
TypeScript
tech

自分で参照しやすくするために書いています。誤りがないよう注意していますが、正確な情報は公式サイトやそれに類するソースから得られますようご了承ください。

型

プリミティブ型

  • プリミティブ型としてNumber, Boolean, String, Void, Null, Undefinedが用意されている。
  • ソースコード中では以下のように書かれる。
  • number
  • boolean
  • string
  • void（変数としては定義不可）
  • null（同上）
  • undefined（同上）
  • 宣言では小文字を使う。（JavaScriptにNumber, Boolean, Stringという型が存在しており、TypeScriptでは暗黙で変換されるが小文字で書いておく。

Any型

  • 従来のJavaScriptの変数型。
  • コンパイルエラーにならない。
  • 濫用すべきではないが、JSONを扱う場合や、止むを得ずチェックを回避するためキャストするなどの用途にも使用。

型宣言

  • 型推論は不完全なため、極力型宣言をしておくべき。

numberの宣言

var x: number;        // Explicitly typed
var y = 0;            // Same as y: number = 0;
var z = 123.456;      // Same as z: number = 123.456;
var s = z.toFixed(2); // Property of Number interface

booleanの宣言

var b: boolean;  // Explicitly typed
var yes = true;  // Same as yes: boolean = true;
var no  = false; // Same as no: boolean = false;

stringの宣言

var s: string;             // Explicitly typed
var empty = "";            // Same as empty: string = "";
var abc   = 'abc';         // Same as abc: string = "abc";
var c     = abc.charAt(2); // Property of String interface

Null型に関して

var n: number = null; // Primitives can be null
var x = null;         // Same as x: any = null;
var e: Null;          // Error, can't reference Null type

Undefined型に関して

var n: number;     // Same as n: number = undefined;
var x = undefined; // Same as x: any = undefined;
var e: Undefined;  // Error, can't reference Undefined type

Any型に関して

var x: any;         // Explicitly typed
var y;              // Same as y: any;
var z: {a; b;};     // Same as z: {a: any; b: any;};
function f(x){      // Same as f(x: any): void
    console.log(x);
}

配列

var array: string[] = ['foo', 'bar', 'baz'];
var prime: number[] = [2, 7, 13, 29];

連想配列

  • Index Signatures（インデックス・シグネチャ）を用いる。
var dict: {key?: string;} = {};
  • プロパティを省略可能であるという印として?を識別子を使用。(thx vvakameさん)
  • この時dict.keyでは不可なので注意。
dict.key    = 'abc'; // Compile error!
dict['key'] = 'abc'; // OK

インタフェース宣言

  • 毎回Index Signaturesを書くと文字数がえらいことになる。
  • ドット記法も使えなくなってしまう。
  • そこでインタフェース宣言。
var position: {top?: number; left?: number;} = {};
position['top'] = 100;

これを次のように事前に宣言すると扱いやすい。

interface Position {
    top: number;
    left: number;
}

var position: Position = {};
position.top = 100; // Can be accessed!

typeof

  • さらに局所的にしか使わない場合、インタフェース宣言よりもtypeofを使ったほうが有効な場面も。(thx vvakameさん)
var position: {top?: number; left?: number} = {};
var position2: typeof position = {};
  • "typeof 事前に宣言した変数名"とすることでプロパティを何度も書かず、インタフェース宣言をわざわざ用意する必要も無くなる。

また何か気付いたら追記します。もし誤りがありましたら指摘していただけるとありがたいです。

Discussion