성장, 그리고 노력

부족하더라도 어제보다 더 잘해지자. 노력은 절대 배신하지 않는다.

Typescript

[TypeScript] 타입스크립트 기본기 다지기3

제이콥(JACOB) 2019. 12. 8. 22:39

제어문에 대해 간단히 살펴보겠습니다. 너무 쉬운 내용은 생략하고 한번더 생각해야되는 내용 위주로 소개하려고 합니다(if문 기본부터 하기에는...).

Fall-through (폴스루)

switch-case문에서 흔히 많이 사용하는 패턴입니다. 개발자가 의도하는 경우도 많고, 아닌 경우도 있습니다.

  const num: any = one;

  switch (num){
    case "one":
      console.log("one이에욤"); // fall-through
    case "two":
      console.log("two이에욤");
      break;
    default: 
      console.log("모!!");
      break;
  }

tsconfig.json에서 컴파일 옵션을 통해 막을수도 있습니다.

{
  "compilerOptions": {
    "noFallthroughCasesInSwitch": true
  }
}

하지만, 위 옵션을 설정하더라도 아래와 같이 case절에 아무 명령문도 쓰지 않는 경우는 예외적으로 허용됩니다.

  const num: any = one;

  switch (num){
    case "one":
    case "two":
      console.log("two이에욤");
      break;
    default: 
      console.log("모!!");
      break;
  }

반복문

타입스크립트 또한 당연히 반복문을 지원합니다.

기본 for문

간단한 예제입니다.

let arr: number[] = [1, 2, 3, 4];
// let arr: Array<number> = [1, 2, 3, 4];

for (let i: number = 0, len: number = arr.length; i < len; i++) {
  console.log(` ${i}번째 실행`);
}

나머지 변수(rest parameter)

타입스크립트 사용시 나머지 변수에 타입을 지정해야 하는 상황이라면, 배열이므로 아래와 같이 사용합니다.

[ex) 문자열로 타입 지정시]

  function concat(x: string, y: string, ...restParam: string[]): string {
    return x + y + restParam.join("");
  }
  ...

함수 오버로드(function overloads)

오버로드는 java를 해보셨다면 이미 많이 사용해보셨을텐데요, 함수명은 같지만, 매개변수와 반환 타입이 다른 함수를 여러개 선언하는 것을 말합니다. 예를 들면 아래와 같이 더하기 함수지만, 숫자 더하기 뿐만 아니라 문자 더하기도 가능한 함수입니다.

  // 오버로드
  function add1(a: number, b: number): number;
  function add1(a: string, b: string): string;
  function add1(a: number, b: string): string;
  function add1(a: any, b: any): any {
    return a + b;
  }

  console.log(add1(1, 2), add1("안녕", " 타입스크립트!"), add1(33, "하이!"));
  //3 '안녕 타입스크립트!' '33하이!'

  // 매개변수의 개수를 달리한 오버로드
  function add2(a: number): number;
  function add2(a: number, b: number): number;
  function add2(a: any, b?: any): any {
    if (b === undefined) {
      // 매개 변수가 하나일 수도 있으므로 로직 추가
      return a;
    }
    return a + b;
  }

  console.log(add2(1, 2), add2(1)); //3 1

생성하는 방법은 위와 같이 가장 일반적인 경우를 any타입으로 제일 아래에 선언하고, 그 위로 타입을 명시한 함수를 쌓아 줍니다. 매개변수의 개수를 달리하고 싶을 때는 option type으로 해당 변수를 선언해 주고, 매개변수 개수 확인 로직을 추가합니다.

반응형