【面接の必需品】ommon TypeScript 面接の質問

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<T>(arg: T): T {
  return arg;
}

const numberIdentity = identity<number>(42);
const stringIdentity = identity<string>("Hello");

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

5. Unknown과 TypeScript의 Any의 차이점

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

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. 인터페이스와 타입의 차이점

interface 및 type은 모두 객체 유형을 정의하는 데 사용되지만 몇 가지 차이점이 있습니다.

以上が【面接の必需品】ommon TypeScript 面接の質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。