TypeScriptにおける基本型の型定義方法まとめ

こんにちは、kirohi (@huslc2es)です。

最近は実務でTypeScriptを使って開発してます。

この記事では自分が見返すように基本的な型定義をまとめました。

TypeScript公式ドキュメント「Basic Types」を大いに参考にしています。

TypeScriptにおける基本型の型定義方法まとめ
終わりに

TypeScriptにおける基本型の型定義方法まとめ

ベースとなる型定義方法

const 変数名: 型名

// 例
const name: string

基本型リスト

TypeScriptにおける基本的な型は以下の通りです。

String型・・・文字列
Number型・・・数値(浮動小数点値)
Boolean型・・・真偽値
Array型・・・配列
Tuple型・・・タプル
Enum型・・・列挙
Any型・・・JSにおける変数(型チェックを無効化)
Void型・・・型の無いことを表す(関数の戻り値で使用)
Null型・・・全ての型のサブタイプ
Undefind型・・・全ての型のサブタイプ
Never型・・・属する値の無い型
Object型・・・オブジェクト
(+a) 型アサーション・・・値の型情報を上書きする

String型

let color: string = "white"
color = "black"

const language: string = "TypeScript"
const sentence: string = `My favorite language is ${ language }`

Number型

TypeScriptのNumberでは、16進数・10進数・2進数・8進数のリテラルをサポートしてます。

let decimal: number = 256
let hex: number = 0xf00d
let binary: number = 0b1100
let octal: number = 0o744

Boolean型

let flag: boolean = true
let isDone: boolean = false

Array型

let numberList: number[] = [1, 2, 3]
let numberList: Array<number> = [1, 2, 3]

let strList: string[] = ['a', 'b', 'c']
let strList: Array<string> = ['a', 'b', 'c']

Tuple型

固定数の要素の方がわかっている配列表現。JSにはタプル型は存在しないので、配列メソッドで操作可能

let x: [string, number]
x = ["hello", 10] // 良い
x = [10, "hello"] // エラー

console.log(x[0].substr(1)) // できる

Enum型

enum Color {Red, Green, Blue}
let c: Color = Color.Green

Any型

型の不明な変数に対して使います。型チェックから逃れるための手段なので、基本的に使うべきではない型。

let anything: any = 100 
anything = "This is allowed" anything = true

Void型

Void型は戻り値の無い関数の型定義によく使われます。

void型に代入できるのはundefinedとnullのみで、変数としては対して使い道が無いです。

function errorMessage(): void {
	console.log("エラー起きましたね")
}

let unusable: void = undefined
unusable = null

NullとUndefined

前述のVoid型に似たようなもので、単体では役に立たない型。

undefined・・・初期化されていない
null・・・現在利用できない

let u: undefined = undefined
let n: null = null

TypeScript Deep Diveによると、TypeScriptチームはnullを使わず、undefinedのみを使うべきだと考えているそうです。

https://typescript-jp.gitbook.io/deep-dive/recap/null-undefined

Never

Never型は、発生することのない型を表します。戻り値の得られない関数に使用します。

function error(message: string): never {
    throw new Error(message) 
}

function infiniteLoop(): never { 
    while (true) { } 
}

Object

Object型は、プリミティブではないことを表す型。下記ではObject型を作る関数を定義し、値を入れています。Object型もしくはnullの場合のみOKです。

declare function create(o: object | null): void

create({ prop: 0 }) // OK 
create(null) // OK 
create(42) // Error 
create("string") // Error 
create(false) // Error 
create(undefined) // Error

型アサーション

型が基本的なものよりも詳細に分かっている時に使えるのが、型アサーションです。Any型から他の型・他の型からAny型への変換はいつでも可能です。

書き方は”angle-blacket”を使ったものと”as”を使ったものがあります。JSX(TSX)で使う場合は誤表記を防ぐため、asを使用するべきです。

// angle-blacket
let someValue: any = "this is a string"
let strLength: number = (<string>somveValue).length

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