TypeScript의 Lodash

Rana Hasnain Khan 2023년6월21일
  1. TypeScript의 Lodash
  2. TypeScript에서 Lodash를 사용하여 첫 번째 및 마지막 배열 요소 가져오기
  3. TypeScript에서 Lodash를 사용하여 난수 생성
  4. TypeScript에서 Lodash를 사용하여 배열 풀기
TypeScript의 Lodash

TypeScript에서 Lodash를 소개하고 예제와 함께 사용 방법을 알아봅니다.

TypeScript의 Lodash

큰 프로젝트나 응용 프로그램을 작업하는 동안 우리는 기본 목표를 달성하기 위해 모든 프로젝트에서 사용할 수 있는 몇 가지 기본 기능을 제공할 수 있는 라이브러리에 대해 항상 궁금해했습니다.

Lodash는 일상적인 프로그래밍 작업을 위한 유틸리티 기능을 제공하는 JavaScript 라이브러리입니다. 여기에는 첫 번째 또는 마지막 배열 요소 가져오기, 위치를 기반으로 하는 특정 배열 요소 가져오기, 배열 청킹 또는 분할 등이 포함됩니다.

Microsoft는 선택적 정적 타이핑이 있는 JavaScript의 상위 집합으로 TypeScript를 설계했습니다. 또한 모듈 시스템 및 선택적 유형 주석으로 더 많은 구조를 지원하는 클래스 및 포인터 함수와 같은 특성을 포함할 수 있습니다.

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가 제공하는 몇 가지 기본 기능을 하나씩 살펴보겠습니다.

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()을 사용하여 난수를 얻을 수 있습니다. 이 함수에서 하나 또는 두 개의 매개변수를 제공할 수 있습니다.

매개변수를 하나만 제공하면 시작점은 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()이라고 합니다. 이 함수는 두 개의 인수를 사용할 수 있습니다.

첫 번째 인수는 포장을 풀고자 하는 중첩 배열입니다. 두 번째 인수는 간단한 배열이 결과로 얻어질 때까지 중첩된 배열의 포장을 계속 해제할지 여부입니다. 기본값은 거짓입니다.

예제를 살펴보고 아래와 같이 중첩된 배열의 래핑을 해제해 봅시다.

# 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