프론트엔드 면접 질문 정리 ⑤ TypeScript 질문

서론

오늘은 프론트엔드 개발에 화두 중 하나인 타입스크립트에 관한 인터뷰 질문들을 정리해보았습니다. 해당 글을 번역한 글이므로, 원문을 확인하고자 하시는 분들은 직접 방문하셔서 확인해보시길 추천드립니다.

본론

 

타입스크립트의 특징은 무엇인가요?

기준	TypeScript	JavaScript
패러다임	객체 지향 언어	스크립트 언어
Typing Method	정적 타이핑	동적 타이핑
Module System	지원	미지원
Optional Parameters	지원	미지원

 

• 언어의 패러다임 : 물론 Tsc도 자바스크립트에 속한다. 그러나 Tsc는 클래스와 인터페이스 그리고 정적 타이핑을 제공하는 자바나 C#과 같은 객체 지향 프로그래밍 언어이기도 하다.
• 타이핑 방법 : 자바스크립트는 기본적으로 변수에 값이 할당될 때, 변수의 자료형이 결정되는 동적 타이핑 언어이다. 반면 타입스크립트는 선언할 때 타입을 지정해줘야 하는 정적 타이핑 언어이다.
• Module System : 지원한다고 한다.
• Optional Parameters는 다음의 코드와 같이, 파리미터로 변수를 선택적으로 전달할 수 있다. 이에 대한 타입을 지정해줄 수 있는 것은 덤이다.

// Optional Parameters
sayHello(hello?: string) { 
    console.log(hello); 
}
sayHello(); // Prints 'undefined'
sayHello('world'); // Prints 'world'

 

타입스크립트를 도입했을 때의 장점과 단점은 무엇인가?

 

• 장점
  • Static Type-Checking : 정적 타이핑 언어이고 런타임 타임이 아니라, 컴파일 타임에 타입 체킹이 가능하기 때문에 관련된 오류를 예방할 수 있다.
  • Optional Static Typing : 자바스크립트 코드를 포함할 수 있다.
• 단점
  • 라이브러리 호환 문제 : 자바스크립트 라이브러리를 타입스크립트에서 사용하려면 일반적으로 추가적인 작업이 요구된다.
  • 추가적인 컴파일 시간 : 컴파일하는 데, 추가적인 시간이 요구된다.

 

타입스크립트의 기본 자료형은 무엇인가요?

 

• Number : 부동소수점으로 변환된다.
• String : Unicode UTF-16 코드로 변환된다.
• Boolean
• Null : undefined 형태의 값을 갖는 변수를 나타낸다.
• Undefined : 값이 할당되지 않은 변수들을 나타낸다.
• Void : 어떤 값도 반환하지 않는 함수의 리턴 타입을 나타낸다.

 

타입스크립트에서 변수를 선언하는 방법은 무엇인가요?

 

• 변수를 선언하는 4가지 방법이 있다. 일반적으로 한 구문에 타입과 값을 동시에 선언해준다.

var [identifier] : [type-annotation] = value; //Declaring type and value in a single statement 

var [identifier] : [type-annotation]; //Declaring type without value 

var [identifier] = value; //Declaring its value without type 

var [identifier]; //Declaring without value and type 

 

다양한 사용방법에 관하여 이야기해보아라.

 

---

• 여러 개의 타입스크립트 파일들을 하나로 합치는 방법
• tsc --outFile comman.js file1.ts file2.ts file3.ts
• js로 컴파일하는 방법과 타입스크립트 변화에 따라서 자동으로 컴파일하는 방법
• tsc file1.ts tsc --watch file1.ts

 

타입스크립트에서 함수 오버로딩을 구현할 수 있는가?

 

• 구현 가능하다. 다만, 구현 방법이 조금 이상해보일 수 있다. 첫째로 파라미터를 여러 개 둠으로써 각 함수들을 구분지을 수 있다. 둘째 같은 파라미터에서 다양한 타입을 받아야 하는 경우에는 typeof 를 사용해준다.

class Customer {
  name: string;
  Id: number;
  add(Id: number);
  add(name:string);
  add(value: any) {
    if (value && typeof value == "number") {
      //Do something
    }
    if (value && typeof value == "string") {
      //Do Something
  }
}

 

타입스크립트의 데코레이터에 관하여 이야기해봐라.

 

• 데코레이터는 함수로, @expression 선언문과 함께 사용하며, 클래스, 메소드, 속성, 파라미터 등에 적용된다.
• 데코레이터 함수를 사용하려면, tsconfig.json 파일에서 experimentalDecorators 속성을 추가해줘야 한다.

{
  "compilerOptions": {
      "target": "ES5",
      "experimentalDecorators": true
  }
}

 

타입스크립트가 선택적으로 타입을 지정하는 언어인 까닭은 무엇인가?

 

• 타입스크립트에선 아래와 같이, any 타입을 사용함으로써 타입 체커를 무력화시킬 수 있습니다.

var unknownType: any = 4;
unknownType = "Welcome to Edureka"; //string
unknownType = false; // A boolean.

참고자료

타입스크립트 인터뷰 질문 리스트