github: https://github.com/Jessie-jzn
웹사이트: https://www.jessieontheroad.com/

1. TypeScript를 사용하는 이유는 무엇인가요?

1. 정적 유형 검사

TypeScript의 핵심 장점은 런타임이 아닌 컴파일 단계에서 일반적인 오류를 포착하는 데 도움이 되는 정적 유형 검사입니다. 이를 통해 코드 신뢰성과 안정성이 향상됩니다.

2. 향상된 코드 편집 경험

TypeScript의 유형 시스템은 편집기에서 보다 정확한 코드 완성, 리팩토링, 탐색 및 문서화 기능을 지원하여 개발 효율성을 크게 향상시킵니다.

3. 향상된 코드 유지 관리

유형 선언을 사용하면 코드 의도와 구조를 더 쉽게 이해할 수 있으며 이는 팀 개발 환경에 특히 유용합니다.

4. 고급 언어 기능

TypeScript는 인터페이스, 열거형, 제네릭 등 JavaScript에 없는 고급 기능을 지원하여 보다 구조화되고 확장 가능한 코드 개발을 촉진합니다.

5. 더 나은 도구 지원

TypeScript는 생성된 JavaScript 코드를 최적화하기 위한 다양한 컴파일러 옵션을 제공하고 TypeScript를 호환되는 JavaScript로 컴파일하여 다양한 JS 환경을 지원합니다.

2. TypeScript 대 JavaScript

3. TypeScript의 기본 데이터 유형

• 부울: 참 또는 거짓 값을 나타냅니다.
• 숫자: 정수와 부동 소수점 숫자를 모두 나타냅니다.
• 문자열: 작은따옴표나 큰따옴표를 사용하여 텍스트 데이터를 나타냅니다.
• Array: type[] 또는 Array.
를 사용하여 지정된 유형의 값 컬렉션을 나타냅니다.
• 튜플: 지정된 유형의 고정된 개수의 요소가 있는 배열을 나타냅니다.
• Enum: 명명된 상수 집합을 나타냅니다.
• 모두: 모든 유형의 값을 나타냅니다. 유형 검사를 제공하지 않습니다.
• Void: 값이 없음을 나타내며, 값을 반환하지 않는 함수의 반환형으로 흔히 사용됩니다.
• Null 및 정의되지 않음: 각각 값이 없음과 초기화되지 않은 상태를 나타냅니다.
• Never: 오류가 발생하거나 무기한 실행되는 함수와 같이 절대 발생하지 않는 값을 나타냅니다.
• 객체: 기본이 아닌 유형을 나타냅니다.

4. TypeScript의 제네릭은 무엇입니까? 어떻게 사용되나요?

제네릭을 사용하면 유형 안전성을 유지하면서 함수, 클래스 및 인터페이스가 모든 유형에서 작동할 수 있습니다.

예:

function identity(arg: T): T {
  return arg;
}

const numberIdentity = identity(42);
const stringIdentity = identity("Hello");

이 예에서 ID 함수는 일반 를 사용하여 모든 유형의 값을 허용하고 반환할 수 있습니다.

5. TypeScript에서 알 수 없음과 모든 것의 차이점

• 모든 유형: 모든 유형의 값을 나타내며 모든 유형 검사를 우회합니다. 유형 확인 없이 임의의 값을 할당할 수 있습니다.
• 알 수 없는 유형: 알 수 없는 유형을 나타냅니다. 알 수 없는 유형의 값은 사용하기 전에 확인해야 하며, 이는 유형이 불확실한 값을 처리하는 더 안전한 방법을 제공합니다.

let anyVar: any;
let unknownVar: unknown;

anyVar = 5;
anyVar.toUpperCase(); // No compile-time error, but might cause runtime error

unknownVar = "Hello";
if (typeof unknownVar === "string") {
  unknownVar.toUpperCase(); // Type check ensures safety
}

6. readonly 수정자와 const 키워드의 차이점

• 읽기 전용 수정자: 초기화 후 객체 속성을 불변으로 만들기 위해 객체 속성에 사용됩니다.
• const 키워드: 불변 참조로 변수를 선언하는 데 사용됩니다. 개체의 속성은 계속 수정할 수 있습니다.

const obj = { name: "John" };
obj.name = "Doe"; // Allowed

interface User {
  readonly id: number;
  name: string;
}

const user: User = { id: 1, name: "John" };
user.name = "Doe"; // Allowed
user.id = 2; // Error, `id` is readonly

7. TypeScript의 데코레이터

데코레이터는 메타데이터를 추가하거나 클래스, 메서드, 속성 또는 매개변수를 수정할 수 있는 특별한 TypeScript 기능입니다.

유형:

• 클래스 데코레이터: 클래스 동작을 수정하거나 메타데이터를 추가하기 위해 클래스 생성자에 적용됩니다.
• 메서드 데코레이터: 동작을 변경하거나 메타데이터를 추가하는 메서드에 적용됩니다.
• 접속자 데코레이터: 접근자의 동작을 수정하도록 접근자를 가져오거나 설정하는 데 적용됩니다.
• 속성 데코레이터: 메타데이터를 추가하거나 동작을 수정하기 위해 클래스 속성에 적용됩니다.
• 매개변수 데코레이터: 메타데이터를 추가하기 위해 메소드 매개변수에 적용됩니다.

예:

• 클래스 데코레이터:

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return `Hello, ${this.greeting}`;
  }
}

• 메서드 데코레이터:

function logMethod(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyName} called with args: ${JSON.stringify(args)}`);
    return originalMethod.apply(this, args);
  };
}

class Calculator {
  @logMethod
  add(a: number, b: number): number {
    return a   b;
  }
}

용법:

데코레이터는 tsconfig.json에서 ExperimentDecorators를 true로 설정하여 활성화됩니다.

8. 인터페이스와 유형의 차이점

인터페이스 및 유형은 둘 다 객체 유형을 정의하는 데 사용되지만 몇 가지 차이점이 있습니다.

이러한 질문과 답변은 기본 개념과 실제 사용법을 다루면서 TypeScript 인터뷰를 준비하는 데 도움이 됩니다.