Typescript 연산자 찾기

이 포스트에서는 Typescript에서 사용할 수 있는 3가지 연산자에 대해 이야기할 것입니다. 이러한 연산자는 Javascript에서도 사용할 수 있습니다.

샘플 문제

문자열에서 숫자를 추출하고 더하고 싶습니다. 숫자가 없으면 0을 반환합니다.
예를 들어 문자열이 있는 경우:

"벽에 붙은 맥주 99병, 1병 내려서 건네줘"

우리는 함수가 100을 반환하기를 원합니다. 여기서 99와 1을 더한 것입니다.

따라서 맵 축소 접근 방식에서 이것이 제 솔루션입니다. (또한 첫 번째 단계로 공백을 구분 기호로 사용하여 문자열을 분할해야 했습니다.)

export function sum(input: string): number {
  return input.split(' ')
              .map(word => Number(word) || 0)
              .reduce((total, current) => total + current, 0);
}

따라서 함수가 올바른지 확인하기 위해 몇 가지 테스트를 작성합니다.

  describe('Test sum of numbers', () => {
    it('should return 100 bottles of beer', () => {
      expect(sum('99 bottles of beer on the wall, take 1 down pass it around'))
        .to.be.equal(100);
    });

    it('should return 0 for no more bottles of beer', () => {
      expect(sum('No more bottles of beer on the wall, no more bottles of beer'))
        .to.be.equal(0);
    });
  });

  Test sum of numbers
    √ should return 100
    √ should return 0 for no more bottles of beer


  2 passing (9ms)

단항 플러스 연산자

Number 함수는 Typescript로 이동하는 일반적인 방법이었습니다. 그러나 더 짧은 단항 더하기 연산자도 사용할 수 있다는 것을 발견했습니다.

이를 통해 코드를 더 짧게 수정합니다.

export function sum(input: string): number {
  return input.split(' ')
              .map(word => +word || 0)
              .reduce((total, current) => total + current, 0);
}

Number(word) 를 +word 로 간단히 대체했습니다. 그것은 똑같이 작동하며 여전히 모든 테스트를 통과합니다.

선택적 연결 연산자

이제 입력 문자열이 선택 사항인 요구 사항이 변경되면 어떻게 될까요? 이제 undefined 가 될 수 있는 입력을 처리해야 합니다. 입력 문자열이 없으면 undefined만 반환한다고 가정해 보겠습니다.

이를 통해 기능을 변경해 보겠습니다.

export function sum(input?: string): number | undefined {
  if (!input) {
    return undefined;
  }
  return input.split(' ')
              .map(word => +word || 0)
              .reduce((total, current) => total + current, 0);
}

if 절을 입력해야 했습니다. 그렇지 않으면 다음을 얻습니다.

error TS2532: Object is possibly 'undefined'.

반환값이 숫자이거나 정의되지 않은 값이 되기를 원하기 때문에 반환 유형에 대해 | undefined를 추가해야 했습니다.

그것에 대한 단위 테스트를 추가하고 우리는 여전히 통과합니다:

  describe('Test sum of numbers', () => {
    it('should return 100 bottles of beer', () => {
      expect(sum('99 bottles of beer on the wall, take 1 down pass it around'))
        .to.be.equal(100);
    });

    it('should return 0 for no more bottles of beer', () => {
      expect(sum('No more bottles of beer on the wall, no more bottles of beer'))
        .to.be.equal(0);
    });

    it('should return undefined for no argument', () => {
      expect(sum()).to.be.undefined;
    });
  });

  Test sum of numbers
    √ should return 100 bottles of beer
    √ should return 0 for no more bottles of beer
    √ should return undefined for no argument


  3 passing (9ms)

이제 선택적 연결 연산자가 제공됩니다. 선택적 연결 연산자를 사용하여 이전에 추가한 if 절을 제거할 수 있습니다. 이렇게 하면 더 깨끗해집니다.

export function sum(input?: string): number | undefined {
  return input?.split(' ')
              .map(word => +word || 0)
              .reduce((total, current) => total + current, 0);

}

선택적 체이닝을 사용하면 null 또는 undefined 가 발생하면 실행을 즉시 중지하는 코드를 작성할 수 있습니다.

무효화 합체

자, 이제 새로운 요구 사항이 들어왔습니다! undefined 를 반환하는 대신 인수가 없으면 0을 반환해야 합니다. 새로운 요구 사항을 수용하기 위해 이제 코드를 다음과 같이 변경했습니다.

export function sum(input?: string): number {
  if (input) {
    return input.split(' ')
              .map(word => +word || 0)
              .reduce((total, current) => total + current, 0)
  }

  return 0;

여기에서 nullish 병합 연산자가 매우 편리합니다. nullish 병합 연산자를 사용하면 왼쪽이 null 또는 undefined 인 경우 기본값으로 폴백할 수 있습니다.

이 연산자를 사용하면 코드는 다음과 같습니다.

export function sum(input?: string): number {

  return input?.split(' ')
              .map(word => +word || 0)
              .reduce((total, current) => total + current, 0)
              ?? 0;
}

그리고 올바르게 동작하는지 확인하기 위해 몇 가지 테스트를 더 작성합니다.

  describe('Test sum of numbers', () => {
    it('should return 100 bottles of beer', () => {
      expect(sum('99 bottles of beer on the wall, take 1 down pass it around'))
        .to.be.equal(100);
    });

    it('should return 0 for no more bottles of beer', () => {
      expect(sum('No more bottles of beer on the wall, no more bottles of beer'))
        .to.be.equal(0);
    });

    it('should return 0 for no argument', () => {
      expect(sum()).to.be.equal(0);
    });

    it('should return 0 for empty string', () => {
      expect(sum('')).to.be.equal(0);
    });

    it('should return 0 for undefined', () => {
      expect(sum(undefined)).to.be.equal(0);
    });

  });

  Test sum of numbers
    √ should return 100 bottles of beer
    √ should return 0 for no more bottles of beer
    √ should return 0 for no argument
    √ should return 0 for empty string
    √ should return 0 for undefined


  5 passing (11ms)

시원한! 모든 테스트를 통과했습니다!

그리고 그것이 이 포스트를 위한 것입니다. 읽어 주셔서 감사합니다!