こんにちは。フリーランス・コンサルタント＆エンジニアの さてさて、前回記事「Laravel MixでTypeScriptを使う」では、いま巷で評判がいいTypeScriptをLaravel内で使う方法をご紹介しました。
TypeScriptはビルド作業が必要になるのがネックですが、次のJavaScriptのメインストリームになる可能性もあると思いますので、せめて基本だけは体験しておくことにしました。
そこで！
今回は、TypeScriptの基本中の基本、
型の宣言
を実例でまとめてみました。
ぜひTypeScriptの入門編として使っていただけると嬉しいです😊✨
「型の宣言はアプリ開発して以来❗」
開発環境： TypeScript 3.8.3
目次
文字列の宣言
文字列を使う場合です。
シングルクォートの場合
const str: string = '文字列１';
ダブルクォートの場合
const str: string = "文字列２";
テンプレート・リテラルの場合
const name = '山田太郎';
const str: string = `${name}さん、こんにちは！`;
数値から変換する場合
const num: number = 1; const str: string = num.toString();
真偽値から変換する場合
const bool = true; const str: string = bool.toString();
配列・オブジェクトから変換する場合
const str: string = JSON.stringify(['one', 'two', 'three']);
数値の宣言
数値を使う場合です。
10進数の場合
const num: number = 10; // 10進数
2進数の場合
const num: number = 0b1010; // 2進数
8進数の場合
const num: number = 0o744; // 8進数
16進数の場合
const num: number = 0xf00d; // 16進数
文字列から変換する場合
const str: string = '1'; const num: number = parseInt(str);
真偽値（true / false）の宣言
真偽値（true / false）を使う場合です。
直接指定する場合
const bool: boolean = true;
文字列から変換する場合
const str = 'true'; const bool: boolean = (str === 'true');
数値から変換する場合
const num = 1; const bool: boolean = (num === 1);
配列
配列を使う場合です。
文字列の配列
const arr: string[] = ['文字列１', '文字列２', '文字列３'];
数値の配列
const arr: number[] = [1, 2, 3];
真偽値（true / false）の配列
const arr: boolean[] = [true, false, true];
階層が深い配列
const arr: string[][] = [ // 👈 カッコが２つ
['文字列 1-1', '文字列 1-2', '文字列 1-3'],
['文字列 2-1', '文字列 2-2', '文字列 2-3'],
['文字列 3-1', '文字列 3-2', '文字列 3-3']
];
オブジェクト
オブジェクトを使う場合です。
const user: object = {
name: '山田太郎',
age: 10,
hobbies: ['野球', 'ピアノ']
};
Tuple（タプル）
TypeScriptのTupleは、簡単に言うと型とデータ数が固定された配列です。
次の例は、「１つ目が文字列／２つ目が数値」のタプルです。
let user: [string, number] = ['山田太郎', 20];
なお、PythonのTupleとは違って内容の変更ができます。
let user: [string, number] = ['山田太郎', 20]; user = ['佐藤次郎', 25]; // 👈 更新できる
また、階層が深い場合は次のようになります。
const user: [string, string[]] = ['山田太郎', ['野球', 'ピアノ']];
enum
enumは、簡単に言うと例外を認めない選択肢です。
動物を使った例を見てみましょう。
enum Animal { DOG, CAT, PANDA };
この場合、左から順に数値が振られ、
- DOG： 0
- CAT： 1
- PANDA： 2
となり、データ取得をする場合はこのようにします。
console.log(Animal.PANDA); // 2
なお、値を独自に決めることもできます。
enum Animal { DOG = '犬', CAT = '猫', PANDA = 'パンダ' };
console.log(Animal.CAT); // 猫
※ただし、数値はOKですが、true/falseや配列、オブジェクトは指定できません。
そして、重要なのはEnumは存在しないデータを取得しようとするとエラーになる点です。
// ⚠ これはエラーになります console.log(Animal.KOARA); // 👈 コアラは存在しないのでエラー
Enumのメリットはここにあります。
つまり、想定外のデータが入ってこないのでエラーが発生しにくいというわけです。
any
anyは、どんな型でも受け入れOKな形式です。
つまり、文字列や数値、真偽値、配列、オブジェクトなんでも格納することができます。
let value: any = '文字列';
value = 2;
value = ['配列 - 1', '配列 - 2'];
value = { name: 'オブジェクト' };
もちろん配列にすることもできます。
let values: any[] = ['文字列', 1, true]; console.log(values[0]); // 文字列
void
voidは「空っぽ」という意味で、その名の通り関数の返り値が存在しない場合などに使われます。
function message(): void { // 👈 ここ
console.log('返り値はありません。');
}
message();
null
値がnullだけ受け入れる型です。
let nullValue: null = null; nullValue = '文字列'; // ⚠「null」以外はエラーになります
undefined
値がundefinedだけ受け入れる型です。
let undefinedValue: undefined = undefined; undefinedValue = '文字列'; // ⚠「undefined」以外はエラーになります
never
neverは特殊な型で、簡単に言うとコードが最後までたどり着かない場合に使われます。
例を見てみましょう。
function error(): never {
throw new Error('コードの最後まで行きません');
}
error();
この場合、エラー処理が発生しコードは途中でストップします。
そのため、voidとは根本的に違うものであることに注目してください。
Type assertion
TypeScriptで、例外的にコンパイラによるチェックをしないようにする機能です。
例えば、次の例を見てください。
const str: any = '一二三四五';
const stringLength = (str as string).length; // 👈 ここ
console.log(`文字列としての長さは、${stringLength}です。`);
(str as string)の部分は「文字列として動かします」という宣言をして、TypeScriptにチェックなどは不要だということを伝えています。（つまり、「我々がちゃんとチェックをしているから任せて😉✨」と言っているわけです）
複数の型を指定する
例えば、文字列とnullの２つが有効になる例をみてみましょう。
let uid: string | null;
この場合、uidは次のように文字列かnullどちらも受け入れるようになります。
let uid: string | null; // 👇 どちらでもOK uid = null; uid = 'xxxxxxxxxxxx';
もちろん、文字列とnullだけでなく、その他の型も使えます。
Date, RegExp, Promiseなど特定のクラス
const d: Date = new Date();
const r: RegExp = new RegExp('[0-9]+');
const p: Promise<string> = new Promise((resolve, reject) => {});
おわりに
ということで、今回はTypeScript基本の基本、「型の宣言」をご紹介しました。全体的に見て直感的で理解しやすいんじゃないでしょうか。
ちなみに私がこの中で気に入っているのは、列挙型のenumです。
というのも、enumはPythonで初めて使って「これは便利❗」と実感したことがあったからです。
なお、型を宣言する方式はPHP 7.2以降でも少しずつ追加されていっているようなので最近のプログラミング言語は同じ方向を向いているのかもしれません。
とはいえ、PHPやJavaScriptではそれほど型を気にしなくてもコードが書ける（＝初心者でもとっつきやすい）という点を考えると、使いたい人は型使うという選択式がいいとは思います。
ぜひ機会があったら一度は体験してみてくださいね。
ではでは〜！
「そういえば、最近Python触ってないから、
function()って書いちゃいそう😅」
