"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 【면접 필수사항】일반적인 TypeScript 면접 질문

【면접 필수사항】일반적인 TypeScript 면접 질문

2024-11-01에 게시됨
검색:203

【Interview Essentials】ommon TypeScript Interview Questions

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

타입스크립트 자바스크립트
유형 시스템 컴파일 시간 유형 검사를 통한 정적 유형 지정. 변수, 함수 매개변수, 반환값에 대한 유형을 지정할 수 있습니다. 런타임 유형 검사를 통한 동적 유형 지정으로 유형 관련 런타임 오류가 발생할 수 있습니다.
유형 주석 유형을 명시적으로 정의하기 위한 유형 주석을 지원합니다. 예를 들어, 이름을 지정하십시오: string = "Alice"; 유형 주석이 없습니다. 유형은 런타임에 결정됩니다.
편집 JavaScript로 컴파일해야 합니다. TypeScript 컴파일러는 유형 오류를 확인하고 동등한 JavaScript 코드를 생성합니다. 컴파일 단계 없이 브라우저나 Node.js에서 직접 실행됩니다.
객체 지향 프로그래밍 클래스, 인터페이스, 추상 클래스, 액세스 한정자와 같은 더욱 풍부한 OOP 기능. 프로토타입 기반 상속을 갖춘 기본 OOP 기능.
고급 기능 모든 ES6 및 ES7 기능과 함께 제네릭, 열거형, 데코레이터와 같은 추가 기능이 포함됩니다. ES6 이상 표준을 지원하지만 TypeScript에서 제공하는 일부 고급 기능이 부족합니다.

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 인터뷰를 준비하는 데 도움이 됩니다.

릴리스 선언문 이 글은 https://dev.to/jessie_chen_4d333540e0c71/interview-essentials-8-common-typescript-interview-questions-4jki?1에서 복제됩니다.1 침해 내용이 있는 경우, [email protected]으로 연락하여 삭제하시기 바랍니다.
최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3