uiuifree.com

- サイト制作のノウハウと最適化を目指して-

2020.8.31【TypeScript】基本的な型について種類を知る

【TypeScript】基本的な型について種類を知る

TypeScriptは型定義ができるJavaScriptと呼ばれることも少なくありません。WEB系でプログラミングをしているとPHP+JavaScriptのような動的型付けでの環境が多く、初めは型定義をした開発が煩わしく感じることもあるでしょう、実際私もそうでした。しかし今これだけの開発者がVueやReactで生jsでなくTypeScript(静的片付け)の使える環境を構築するには理由があります。

型宣言により開発効率と保守性を高めることができる

何度も繰り返しますがTypeScriptは「型宣言のできるJavaScript」です。(凄い人に怒られる解釈かも) TypeScriptでは変数を定義するときに、どの型を定義するか予め決めてしまいます。一度決めた型以外のものを代入しようとするとコンパイラが容赦無くエラーを吐いてきます。初めてだと非常にめんどくさく時間だけがかかるわりにメリットすくなくね??と思うこともありますがそんなことはありません。

実際使いこなせるようになると開発効率は何倍にもアップします。

  • どんなデータが渡されるか予め定義されてるのでバグを生みにくい
  • 型定義されてるのでIDEなどの補完機能が正確に
  • エラーチェックも型定義のおかげで必要以上に正確に

どんな型があるのか

プログラムにおいて型は定義すれば無限に作ることができますが、そのなかでもシステム上の最小単位で分解できない型を「プリミティブ型」といいます。

プリミティブ型

Boolean(真/偽)

最も基本的な方でありtrue/falseを呼び出すboolean型

const isMember : boolean = true

number(数値)

JavaScript/TypeScriptのすべての数値はBigInteger・浮動小数点のどちからです。それぞれ16進数/10進数/8進数/2進数をサポートしています。

const number1: number = 6;
const number2: number = 0xf00d;
const number3: number = 0b1010;
const number4: number = 0o744;
const number5: bigint = 100n;

string(文字列)

テキストデータを操作する基本的な型、JavaScript同様で二重引用符"または単一引用符'を使用して文字列データを囲みます。

const test: string = '文字列'

テンプレート文字列も使用することができ、`バッククォートで囲むことで文字列に変数の差込も行うことができます。

const lang:string = 'TypeScrpt'
const sample :string = `私が使ってる言語は${lang}です。`

array(配列)

JavaScript同様に配列の操作を行うことができます。配列に入れることができる値も事前に定義する必要があります。

const languages: [string]
languages = ["JavaScript" , "TypeScript"]// OK

const languages: string[]
languages = ["JavaScript" , "TypeScript"]// OK
const languages: []
languages = ["JavaScript" , "TypeScript"]// NG

const languages: string[]
languages = ["JavaScript" , 1]// NG

emum(列挙型)

JavaScriptにはない型でenumがあります、数値など値に別名をつける機能です。

使い方
enum Move {
  Up,
  Left,
  Left,
  Down,
}
let m: Move = Move.Up;

値は連番で振られますが、手動で定義することも可能です。

値の定義
enum Move {
  Up = 1,
  Left = 2,
  Left = 3,
  Down = 4,
}
let m: Move = Move.Up;

any

外部のライブラリなど状況によって型が定義できない場合があります。不要な動力を裂けない場合はanyを使うことで型定義を放棄することができます。

let test: any = '文字列'
test = 1 // エラーはでません

void

関数の返り値を持たない型はvoidと定義されています。

function test():void{
   console.log('hogehoge')
}

これ以外にも型にはいろいろなものがあり、object型を利用することで更に独自の型を生み出すこともできます。 型を定義することはデータ型を集約し、不要な構造を設計段階から防ぐことにも繋がりますのでますは一度現在の開発に取り組んでみてはいかがでしょうか。 次回は型定義について更に深堀解説していきます。

この記事を読んでる人にオススメ

目次
PROFILE

このサイトを運営してるuiuifreeです。
渋谷のベンチャー企業で2年ほど新規事業を担当した後にフリーランスエンジニアにキャリア転換。
求人サイトの開発が多くエンジニア/看護師/保育士などの分野でサイトを運営しています。

アウトプット中の技術

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)