[TypeScript] 타입스크립트 헷갈리는 개념 정리

Today, What I learned?

타입스크립트를 익히면서 생각보다 쉽지 않음을 많이 느끼는 중..!

특히 헷갈리는 몇몇 개념을 좀 정리해보려 한다.

 

 

JS와 TS

자바스크립트는 동적타입. 프로그램이 실행될 때, 즉 런타임에 변수의 타입이 결정된다.

반대로 타입스크립트는 정적타입. 컴파일 타임에 변수의 타입이 결정된다.

이것은 즉 프로젝트가 실행되기 전에 미리 IDE에서 발생할 오류를 알 수 있다는 것!

 

 

any 타입

any 타입은 모든 타입을 포함하는 타입이다. (자바스크립트의 모든 변수도 any 타입이라고 할 수 있다.)

자바스크립트 프로젝트를 타입스크립트로 리팩토링하는 경우 임시로 사용하며 점진적으로 타입을 차차 바꿔나갈 때 유용하다.

하지만 모든 타입을 포함한다고 해서 무분별하게 사용하면 타입스크립트는 쓰는 이유가 없다!

 

되도록이면 any 타입을 쓰는 것을 피하도록 하자!.. 🙌

여담으로 이번에 투두리스트를 리팩토링하면서도 any 타입을 한 번도 사용하지 않았다...!

 

 

 

옵셔널 파라미터

타입에 옵셔널 파라미터가 포함되어 있다면 필수적인 값이 아니라는 의미. 즉 선택적인 파라미터라는 것이다.

function printText({name, age=15, language}:{name: string; age?:number; language?:string;}){
    // ....
}

printText({name:'abc'}); // 1
printText({age:20, language:'kor'}); // 2

위와 같은 코드가 있을 때 printText 라는 함수는 매개변수로 name, age, language를 받고,
age의 기본 값은 15다. 이 매개변수들의 타입을 보면 age와 langauge에는 옵셔널 파라미터가 추가되어 있다.
여기서 필수적으로 들어가야 하는 매개변수는 name 뿐인 것을 알 수 있다.

 

그 아래의 1번 코드 같은 경우는 에러가 나지 않지만, 2번 코드는 필수로 들어가야 하는 name 파라미터가 없기 때문에 에러가 발생할 것이다.

 

 

제네릭

제네릭은 Java, C# 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 많이 활용되는 문법이다.
<T> 라는 기본 문법을 통해서 타입을 함수의 파라미터처럼 쓸 수 있다.

 

function printText<T>(text: T): T {
  console.log(text);
  return text;
}

printText(10); // number
printText('얍'); // string
printText(true); // boolean

제네릭을 위와 같은 예시로 들 수 있겠다.
함수를 호출했을 때 타입추론을 통해서 파라미터에 따라 타입을 동적으로 지정해서 쓸 수 있다.

10의 경우 printText 에게 10을 인자로 넘겨줌으로써 함수에게 T에 number 타입을 사용하겠다고 명시한다.