TypeScript のロダッシュ

Rana Hasnain Khan 2024年2月15日
  1. TypeScript のロダッシュ
  2. TypeScript で Lodash を使用して最初と最後の配列要素を取得する
  3. TypeScript で Lodash を使用して乱数を生成する
  4. TypeScript で Lodash を使用して配列をアンラップする
TypeScript のロダッシュ

TypeScript で Lodash を紹介し、例を使用して使用方法を学習します。

TypeScript のロダッシュ

大きなプロジェクトまたはアプリケーションに取り組んでいる間、私たちは常に、いくつかの基本的な目標を達成するためにすべてのプロジェクトで使用できるいくつかの基本的な関数または機能を提供できるライブラリについて疑問に思っていました.

Lodash は、日常のプログラミング タスクにユーティリティ関数を提供する JavaScript ライブラリです。 これらには、最初または最後の配列要素の取得、位置に基づく特定の配列要素、配列のチャンクまたはスライスなどが含まれます。

Microsoft は、TypeScript を JavaScript のスーパーセットとして設計し、オプションで静的型付けを行いました。 モジュールシステムとオプションの型注釈でより多くの構造をサポートするクラスやポインター関数などの特性を含めることもできます。

TypeScript の外部でコードを利用することになると、TypeScript は非常に困難です。 JavaScript と TypeScript の違いは、JavaScript には型注釈がないことです。

すべてのオブジェクトは、ライブラリ内の任意の型を持つものとして扱われます。 すべてのメソッドは、任意の型の戻り値を呼び出し、型指定を解除してデータを他のライブラリにすぐに渡します。

TypeScript の新機能を調べるために使用される Lodash の _.flatten() 関数を見ていきます。 Lodash は、配列操作を含む、JavaScript で役立つあらゆる種類の関数を利用する優れたライブラリです。

この記事では、使用できる複数の Lodash 関数について説明します。 次の npm コマンドを使用して、このライブラリをインストールすることから始めましょう。

# typescript
npm i lodash

Lodash をインストールしたら、以下に示すように、次のコマンドを使用して Lodash のバージョンを確認できます。

# lodash
const _ = require("lodash");

const ver = _.VERSION;
console.log(ver);

出力:

TypeScript の Lodash バージョン

lodash をインストールした後、lodash からのインポートでエラーが発生することがあります。 最良の方法は、次のコマンドを使用して lodash タイプをインストールすることです。

# typescript
npm install --save-dev @types/lodash

lodash タイプをインストールしたら、次のコード行を使用して lodash モジュールを簡単にインポートできます。

# typescript
import * as _ from `lodash`;

ここで、一般的なプログラミング タスクのために Lodash が提供するいくつかの基本的な関数を 1つずつ見ていきます。

TypeScript で Lodash を使用して最初と最後の配列要素を取得する

Lodash は、配列操作といくつかの最も一般的に使用されるシナリオで多くのことを扱います。 _.first および _.last 関数を使用して、配列の最初または最後の要素を取得できます。

_.nth を使用して、配列の n 番目の要素を取得することもできます。 以下に示すように、負のインデックスを使用して配列の最後から取得できます。

# typescript
const _ = require("lodash");

let arraySample = ['This', 'is', 'Lodash', 'in', 'Typescript'];

let firstElem = _.first(arraySample);
let lastElem = _.last(arraySample);


console.log(`First element of Sample Array is ${firstElem}`);
console.log(`Last element of Sample Array is ${lastElem}`);
console.log(`3rd element of Sample Array is ${_.nth(nums, 3)}`);
console.log(`3rd last element of Sample Array is ${_.nth(nums, -3)}`);

出力:

TypeScript で Lodash を使用して配列要素を取得

上記の例からわかるように、Lodash ライブラリを使用して配列から任意の要素を取得するのは非常に簡単です。

TypeScript で Lodash を使用して乱数を生成する

Lodash では、単純な関数 _.random() を使用して乱数を取得することもできます。 この関数には 1つまたは 2つのパラメーターを指定できます。

パラメータを 1つだけ指定すると、開始点が 0 になります。例を見て、0 から 100 と 50 から 100 の間の乱数を生成してみましょう。

# typescript
const _ = require("lodash");

let randNum = _.random(100);
console.log(randNum);

randNum = _.random(50, 100);
console.log(randNum);

出力:

TypeScript で Lodash を使用して乱数を取得

上記の例からわかるように、この単純な関数を使用して範囲から乱数を簡単に取得できます。

TypeScript で Lodash を使用して配列をアンラップする

ネストされた配列を取得し、ネストされた配列を単純な配列に変換したい状況は数多くあります。 Lodash は、ネストされた配列のラップを解除するために使用できる簡単な関数を提供します。

配列をアンラップする関数は _.flatten() として知られています。 この関数は、2つの引数を取ることができます。

最初の引数は、ラップを解除したいネストされた配列です。 2 番目の引数は、単純な配列が結果として取得されるまでネストされた配列のラップ解除を続行するかどうかです。 デフォルト値は false です。

以下に示すように、例を見て、ネストされた配列をアンラップしてみましょう。

# typescript
const _ = require("lodash");

let simpleNested = _.flatten([1, 2, 3]);;
console.log(simpleNested);

let advNested = _.flatten([[1], [2, 3], [[4, 5]]]);
console.log(advNested);

let advNested2 = _.flatten([[1], [2, 3], [[4, 5]]], true);
console.log(advNested);

出力:

TypeScript で Lodash Flatten メソッドを使用して配列をアンラップ

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn