개발자를 위한 TypeScript 인터뷰 질문 및 답변 모음

2025-01-04 17:17:38

typescriptinterviewprogrammingjavascript

TypeScript란 무엇인가요?

TypeScript는 JavaScript의 상위 집합으로, 정적 타입을 추가하여 코드의 품질을 향상시키고 런타임 전 오류를 검출할 수 있도록 도와주는 언어입니다. TypeScript는 인터페이스, 열거형, 제네릭 등의 기능을 지원하며, 더 나은 오류 검사, 향상된 도구, 코드 가독성을 제공합니다.

타입스크립트의 명시적 및 암시적 타입 할당

명시적 타입 할당은 개발자가 타입을 직접 명시하는 것을 의미합니다. 예를 들면:

let firstName: string = "Rutvik";

암시적 타입 할당은 타입스크립트가 값에 따라 유형을 추론하는 것을 의미합니다. 다음 예제는 number로 추론됩니다.

let age = 23;

TypeScript의 any, unknown 및 never 차이점은?

any: 변수가 어떤 타입이든 상관없이 할당할 수 있는 타입입니다. 다른 타입으로 재할당해도 오류가 발생하지 않습니다.
```
let x: any = 10;
x = 'hello';
console.log(x.toUpperCase()); // No TypeScript error
```

unknown: any보다 안전한 유형으로, 사용하기 전에 유형 검사가 필요합니다.

let y: unknown = 10;
if (typeof y === 'number') {
    console.log(y.toFixed(2));
}

never: 발생하지 않는 값의 타입을 나타냅니다. 일반적으로 함수의 반환 타입에 사용됩니다.
```
function throwError(message: string): never {
    throw new Error(message);
}
```

배열의 타입 지정 방법

배열 타입을 지정하기 위해 특정 타입을 배열로 설정합니다. 예를 들어, 문자열만 포함될 수 있는 배열은 다음과 같습니다:

const names: string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah");

readonly 키워드를 사용하여 배열을 변경할 수 없도록 할 수 있습니다.

const names: readonly string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // Error

배열에서 타입 추론이란?

타입을 명시하지 않으면 배열의 타입을 자동으로 추론합니다.

const numbers = [1, 2, 3]; // inferred to type number[]
numbers.push(4);

튜플이란?

튜플은 고정된 길이와 타입을 가진 배열입니다. 혼합된 타입의 배열에 유용합니다.

let ourTuple: [number, boolean, string];
ourTuple = [5, false, 'Coding Hero was here'];

읽기 전용 튜플이란?

튜플을 readonly로 만들지 않으면 추가적인 항목을 추가해도 타입스크립트가 오류를 발생시키지 않습니다.

let ourTuple: [number, boolean, string];
ourTuple = [5, false, 'Coding Hero was here'];
ourTuple.push('This is wrong');

readonly 키워드를 사용하여 튜플을 변경할 수 없도록 할 수 있습니다.

let ourTuple: readonly [number, boolean, string];
ourTuple = [5, false, 'Coding Hero was here'];
ourTuple.push('Coding Hero took a day off'); // Error

객체의 타입을 지정하는 방법

객체의 타입은 인터페이스나 타입을 사용하여 설정할 수 있습니다.

interface CarTypes {
    brand: string;
    model: string;
    year: number;
}

const car: CarTypes = {
  brand: "Tata",
  model: "Punch",
  year: 2020
};

객체의 선택적 속성 설정

선택적 속성을 정의하려면 키 끝에 ?를 추가합니다.

interface CarTypes {
    brand: string;
    model: string;
    year?: number;
}

const car: CarTypes = {
  brand: "Tata",
  model: "Punch"
};

TypeScript의 enum이란?

enum은 상수의 집합입니다. 기본적으로 숫자 값을 가지며 0부터 시작하여 1씩 증가합니다.

enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}
console.log(Direction.Up); // 1
console.log(Direction.Down); // 2

문자열 기반의 enum도 가능합니다.

enum Direction {
  Up = "Up",
  Down = "Down",
  Left = "Left",
  Right = "Right"
}
console.log(Direction.Up); // Up
console.log(Direction.Down); // Down

타입 별칭이란?

타입 별칭은 기본 타입인 string이나 number뿐만 아니라 객체나 배열 같은 복잡한 타입에 대해서도 사용할 수 있습니다.

type CarTypes = {
   brand: string;
   model: string;
   year: number;
}

const car: CarTypes = {
  brand: "Tata",
  model: "Punch",
  year: 2020
};

인터페이스란?

인터페이스는 객체만을 위한 기능으로, 같은 구조를 가진 여러 객체에 대해 공통의 타입을 정의할 수 있습니다.

interface Square {
   length: number;
}

const square: Square = {
  length: 20
};

인터페이스의 확장 방법

인터페이스는 extend 키워드를 사용하여 확장할 수 있습니다.

interface Square {
   length: number;
}

interface ColorSquare extends Square {
    color: string;
}

const square: ColorSquare = {
  length: 20,
  color: 'blue'
};

유니언과 인터섹션 타입이란?

유니언 타입은 속성이 두 가지 이상의 값을 가질 수 있을 때 사용됩니다. | 기호를 사용하여 표현합니다.
```
let id: string | number;
id = "ABC123";
id = 123;
```

인터섹션 타입은 여러 타입을 하나로 결합할 때 사용됩니다. & 기호를 사용합니다.

interface Person {
  name: string;
}

interface Employee {
  employeeId: number;
}

type Worker = Person & Employee;

const worker: Worker = {
  name: "Rutvik",
  employeeId: 12345
};

TypeScript의 함수란?

함수에서 반환 타입 지정 방법

함수의 반환 타입은 함수 이름 뒤에 :를 붙여 제공합니다.

function getSum(): number {
    return 24;
}

function printMessage(): void {
    console.log("Good Morning");
}

함수의 매개변수 타입 지정 방법

매개변수 타입은 각 매개변수 뒤에 :를 붙여 명시합니다.

function sum(a: number, b: number) {
  return a + b;
}

함수에서 선택적, 기본값 및 나머지 매개변수 사용 방법

기본 매개변수를 사용하면 매개변수를 선택적으로 만들 수 있습니다.

function subtract(a: number, b: number, c?: number) {
  return a - b - (c || 0);
}

기본값은 타입 뒤에 지정할 수 있습니다.

function multiply(a: number, b: number = 10) {
  return a * b;
}

나머지 매개변수는 배열 타입을 사용합니다.

function add(a: number, b: number, ...rest: number[]) {
  return a + b + rest.reduce((p, c) => p + c, 0);
}

R_11