menu

TypeScriptの型について

公開日:2019年08月19日 カテゴリー:JavaScript, TypeScript, 開発

はじめに

近年のMicrosoftはGitHubを買収したりと、開発者にむけてフレンドリーな企業を目指していることが伺えますね。

TypeScriptは、そんなMicrosoftが主導で開発しているaltJSです。

TypeScriptは、JavaScriptのスーパーセットであり、明示的に型を宣言するなど、より安全なプログラミングをサポートします。

今回はそれらの型をまとめてみました。

真偽値型  ~Boolean

真偽値型は true か false のどちらかをとる値。

// 真偽値型
let isDone: boolean = false;

数値型 ~Number

JS と同様に数値型は浮動小数点数。

10 進数記法だけでなく、16 進 数記法や 8, 2 進数記法も使うことができる。

// 数値型
let hex: number = 0xf00d;
let decimal: number = 6;
let binary: number = 0b1010;
let octal: number = 0o744;

文字列型 ~String

JS と同様にリテラルの記述には”も’も使うことが出来る。
また、テンプレート文字列もサポートされている。

// 文字列型
let color: string = "blue";
color = 'red';
let fullName: string = Kotaro Takahashi;
let sentence: string Hello, my name is ${fullName};

配列型 ~Array

TypeScript の配列は、2 種類の記法がある。
指定された型を持つ要素のみ格納できる。

// 配列型
let list1: number[] = [1, 2, 3];
let list2: Array = [1, 2, 3];

タプル型 ~Tuple

タプルは、固定された要素数を持ち、指定した型を持つ要素を格納することが出来るデータ構造。

タプルの要素の型は 同じである必要はなく、文字列と数値のペアといったものを格納出来る。

// タプル型
let x: [string, number];
x = ["hello", 10]; // OK
x = [10, "hello"]; // NG

// 型が指定されたインデックスの要素は場合、その型として扱われる。
console.log(x[0].substr(1)) // OK
console.log(x[1].substr(1)) // NG


// 型が指定されてない(定義の範囲外の)インデックスの場合、ユニオン型が使われる。
x[3] = "world" // OK, stringはstring | numberに代入可能
console.log(x[5].toString()) // OK, string は number どちらもtoStringをもつ。
x[6] = true; // NG, booleanは string | numberではない

列挙型 ~Enum

列挙型は数値に扱いやすい名前をつける事に使われる。

列挙型の値を評価すると数値となり、デフォルトでは列挙型はメンバーに 0 から採番していく。

値を指定する事で開始値を変更したり、メンバーに任意の値を指定することも出来る。

また数値から名前を検索することもできる。

// 列挙型
enum Color {Red, Green, Blue}
let color: Color = Color.Green;
color; // => 1

enum Country {Japan = 1, US, UK}
let country: Country = Country.Japan;
country; // => 1

enum Category {Music=1, Video=4}
let category: Category = Category.Video;
Category; // => 1


let colorName = Color[1];
console.log(colorName); // => 'Green'

Any 型 ~Any

any は、 サードパーティーのライブラリを利用しているなど、 型が不明な場合に用いる。

any を使う場合、型チェックをせずにコンパイル時のチェックを行う事になる。

ただし、any は極力避けることが推奨される。

let notSure: any = 4;
notSure = "maybe a string instead"; // この時点では文字列型
notSure = false // この時点では真偽値型

// 型が混在した要素の配列に型をつけるとき
let list: any[] = [1, true, “free”];


list[1] = 100;

Void 型

void は、どんな型でもないことを表す型。
何も値を返さない関数の返り値の型を表す場合などに使われる。

void 型の変数には、null と undefined 以外は 格納できない。

function print(msg: string): void {
console.log(msg);
}

Null 型と Undefined 型 ~Null, Undefined

TypeScript では、null と undefined はそれぞれ 独自の型を持つ。

// その他の型の値を格納することは出来ない。
let u: undefined = undefined;
let n: null = null;

デフォルトでは、null と undefined は全ての型のサブタイプになる。

つまり、null や undefined の値は、number 型など、その他の型をもつ変数に格納出来る。

--strictNullChecksフラグを立てることで、この挙動を無効化出来る。

その場合、stirng | null | undefined などのユニオン型が使える。

Never 型 ~Never

never 型は絶対に起きない事を表す型。
例えば、必ず例外を送出する関数や、返り値を 絶対に返さない関数 などに使われる。

// neverを返す関数は、到達できない地点を持つ必要がある。
function error(message: string): never {
throw new Error(message);
// ここには到達できない。
}

// 推論された型は、never
function fail() {
return error(“Something failed”);
}


// neverを返す関数は、到達できない地点を持つ必要がある。
function infiniteLoop(): never {
while (true) {
}
// ここには到達出来ない。
}

Object 型 ~Object

object 型は、プリミティブ型ではない型を表す。
プリミティブ型の例は、以下。

  • number
  • string
  • boolean
  • symbol
  • null
  • undefined

型 アサーション

型アサーションは、現在宣言されている型よりも より特殊な型に代入するために使われる。

型アサーションは他の言語でいう型キャストに似ている。

型 アサーションの 構文は、2 種類ある。

let someValue: any = "this is a string";
let strLength: number = (someValue).length;


let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

以上になりますが、いかがでしたでしょうか?ご参考になりましたか?

こうしてまとめておくことで「知りたい時にすぐわかる」を実践され、情報共有もしやすくなっていきますね。

最後までお読みくださり、ありがとうございました。

☆☆☆ 新しいことにチャレンジしたい!仲間と一緒に成長したい!やりがいのある仕事で充実した毎日を過ごしたい!そんな熱意をお持ちの方、私たちと一緒に働きませんか?ウィズテクノロジーでは一緒に働いていただけるエンジニアを大阪・東京で募集しています。☆☆☆