【TypeScript】括弧
はじめに
TypeScriptのコードを眺めていた時、下記のようなコードに遭遇しました。
const _anyMiddleware: any = () => () => () => {};
は？
開発環境
Windows 10
TypeScript 4.9.5
Visual Studio 2022
各種括弧
TypeScriptでは複数の括弧を使い分けてコーディングします。
それらは、関数を意味するものや、配列を意味するもの、オブジェクトを意味するもの、あるいは単なる短縮記法によるものなど様々です。
これらに=や=>が組み合わされ、分かる人にはシンプルに見えるコードが出来上がっていきます。
ここでは、各括弧文字種ごとに、どういった意味を表現できるかをまとめていきたいと思います。
普通の括弧 ()
関数を意味します。
例えば、ある数値を返す関数:initと、数値側の引数が1つありそれに1を加算した数値を返す関数:addを考えます。
各関数の宣言は以下ようになります。
function init() {
return 1;
}
function add(src: number) {
return src + 1;
}
このように、関数を宣言するとき、引数を囲む文字として使われるのが()です。
さらに、これら関数の結果を変数に代入してみます。
const src: number = init();
const dst: number = add(src);
// src = 1
// dst = 2
関数を呼び出すときにも()を使っています。
さらに、後述するアロー関数を使って関数を定義する場合は以下のようになります。
const init = () => {
return 1;
};
const add = (src: number) => {
return src + 1;
};
同じ意味で別の書き方をすると以下のようになります。
const init = function () {
return 1;
};
const add = function (src: number) {
return src + 1;
};
なお、「関数型の変数だよ」と宣言したいだけの場合は以下のように書きます。
const t: () => void;
「tは引数のない関数型で、何もreturnしない」という意味になります。
returnを省略します。
上記のサンプルでアロー関数を使った書き方を紹介しましたが、関数内の処理が1行で収まるような場合、省略して書くことができます。
const init = () => (1);
const add = (src: number) => (src + 1);
'return'が書かれていませんし、中括弧{}で囲まれていた箇所が括弧()になっています。
中括弧 {}
オブジェクトを意味します。
const obj: {};
上記は「変数objはオブジェクト型」を意味しています。
ただし、まだインスタンスは生成されていないのでそのままでは使えません。
宣言と同時に初期化も行いたいなら、以下のようになります。
const obj = {a: 1, b: 2, c: 3};
「objには、3つのプロパティa、b、cを持つオブジェクトのインスタンスが割り当てられた」ことになります。
処理のまとまりを意味します。
TypeScriptでは、ifやfor、本稿で説明しているfunction等、いたるところで{}が使われます。
ここですべては書ききれないので、今回ばかりは別サイトを参照に文法を勉強してもらいたいと思います。すみません。
大括弧 []
配列を意味します。
例えば、数値の要素を含む配列を宣言しようとした場合、以下のようになります。
const arr: number[] = [1, 2, 3];
arrは、1、2、3の3つの数値を含む配列となります。
キーを指定するときに使います。
上記の配列arrに対し、2つ目の要素を取得したい場合、以下のようになります。
const ele2: number = arr[1];
// ele2 = 2
[]内にはインデックス番号を指定します。インデックスは0からスタートするので、今回は1が指定されています。
オブジェクト内のプロパティを指定するときにも使用できます。
const obj = {a: 1, b: 2, c: 3};
const eleB = obj['b']; // ～ = obj.b と同じ
// eleB = 2
カギ括弧 <>
型パラメータを指定するときに使います。
たまに見かけるジェネリクス型Tで使います。(他では見たことない)
function gene<T>(value: T) {
return value;
}
const res1 = gene<string>('aaa'); // res1 = 'aaa'
const res2 = gene<number>('aaa'); // コンパイルエラー
おわりに
冒頭で挙げた
const _anyMiddleware: any = () => () => () => {};
は「カリー化」とか「高階関数」と呼ばれるもののようで、説明読んだけどちょっとよくわからないです。仕組みはギリギリわかるけど、使いどころが思いつかない。
ということで、これは放置!!
以上です。
P.S.
暑い日が続きます。
暑すぎて、パソコンつけると数分で「フィィィイイイーーーーーン」ってすごい音が鳴りだします。ハード的にもよくないので、暑い間はパソコンを使った勉強もいったん休憩する予定。
Discussion