typeScript - typeScript 개괄3(기타)

TypeScript 타입 명시(type annotations)에 쓰이는 몇 가지 기타 기능들 보겠습니다.

 

1. any Type

any Type은 작업중인 코드의 타입 명시가 매우 어려운 경우거나 복수의 타입을 가질 때 사용됩니다.

예를 들어 서드 파티 라이브러리에서 가져온 컨텐츠의 타입을 모르거나 공통 메소드의 인자값이 상황에 따라 달라질 때 유용하게 사용할 수 있습니다.

function getTestData(baseParam: any, baseParamArray: any[]): {} {
  if(baseParam) {
    if(typeof baseParam != 'number' || !Number(baseParam)) {
      baseParam = 0;
    }
  } else {
    baseParam = 0;
  }
  
  let tempResultArray = null;
  if(baseParamArray && baseParamArray.length > 1) {
    tempResultArray = baseParamArray[1];
  }
  return {result: Number(baseParam) + 1, resultArray: tempResultArray};
}

console.log(getTestData('test', ['test1', 'test2', 100]));	// 아래 이미지 참조

console.log(getTestData('test', ['test1', 'test2', 'test3'])) 결과값

getTestData 함수의 인자를 any와 any[] 타입으로 받았습니다.

주의하실 점은 any로 파라미터로 받을 경우 꼭 타입을 체크하는 방어로직이 필요합니다.

 

 

2. Union Type

any Type과 같이 변수의 타입지정이 어렵거나 복수 타입일 경우 Union Type을 사용합니다.

차이점은 Union Type은 any Type 보다 좀 더 명확하게 타입을 지정할 수 있습니다. 

// 인터페이스
interface customer {
    memberNo: number | string | null;
    name: string | null;
    phoneNm?: string | null;		// 문자열 타입
    isAuthenticated: boolean;	// boolean 타입
    point?: number;
    address?: string;
}

class customerInfo {
    info: customer | null;
    createDt: string;

    constructor(info: customer | null, createDt: string) {
        this.info = info;
        this.createDt = createDt;
    }

    getInfo(): customer | null {
        return this.info;
    }
};

let customerInfoParam = {
    memberNo: '1001',
    name: '홍길동',
    isAuthenticated: true,
    point: 0
};

let customer1 = new customerInfo(customerInfoParam, '20210707');
console.log(customer1);

let customer2 = new customerInfo(null, '20210707');
console.log(customer2);

Union Type은 타입 명시부분에 '|'으로 구분해서 타입을 기재하면 됩니다.

interface customer의 memberNo를 보시면 memberNo: number | string | null; 와 같이 선언했습니다.

Union Type 여러 타입을 선언할 수도 있도 null 값도 체크할 수 있습니다.

Union Type은 변수 선언부, 함수 반환타입 선언부, 매개변수 반환타입 선언부 등 변수 타입을 지정할 수 있는 곳이면 모두 사용 가능합니다.

3. 제네릭

https://getthismoment.tistory.com/38?category=996537

 

 

 

https://typescript-kr.github.io/

TypeScript 한글 문서

 

https://velog.io/@kysung95/TS-TypeScript-%EA%B0%9C%EB%A1%A0-3

[TS] TypeScript 개론 (3)

 

https://joshua1988.github.io/ts/

타입스크립트 핸드북