【面接の必需品】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

	TypeScript	JavaScript
Type System	Static typing with compile-time type checks. Types can be specified for variables, function parameters, and return values.	Dynamic typing with runtime type checks, which can lead to type-related runtime errors.
Type Annotations	Supports type annotations to explicitly define types. E.g., let name: string = "Alice";	No type annotations. Types are determined at runtime.
Compilation	Requires compilation to JavaScript. TypeScript compiler checks for type errors and generates equivalent JavaScript code.	Runs directly in browsers or Node.js without a compilation step.
Object-Oriented Programming	Richer OOP features such as classes, interfaces, abstract classes, and access modifiers.	Basic OOP features with prototype-based inheritance.
Advanced Features	Includes all ES6 and ES7 features, plus additional features like generics, enums, and decorators.	Supports ES6 and later standards, but lacks some of the advanced features provided by TypeScript.

TypeScript JavaScript 型システム コンパイル時の型チェックによる静的型付け。変数、関数パラメータ、戻り値には型を指定できます。 実行時型チェックを使用した動的型付け。これにより、型関連の実行時エラーが発生する可能性があります。 型の注釈 型を明示的に定義するための型アノテーションをサポートします。たとえば、name: 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<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은 모두 객체 유형을 정의하는 데 사용되지만 몇 가지 차이점이 있습니다.

일>

	interface	type
Basic Usage	Defines the shape of objects, including properties and methods.	Defines primitive types, object types, union types, intersection types, etc.
Extension	Supports declaration merging. Multiple declarations of the same interface are automatically merged.	Does not support declaration merging.
Union and Intersection Types	Not supported.	Supports union (`
Primitive Type Aliases	Not supported.	Supports aliasing primitive types.
Mapped Types	Not supported.	Supports mapped types.
Class Implementation	Supports class implementation using implements.	Does not support direct class implementation.

인터페이스

입력

기본 사용법 속성 및 메소드를 포함한 객체의 모양을 정의합니다. 기본 유형, 객체 유형, 결합 유형, 교차 유형 등을 정의합니다. 확장 선언 병합을 지원합니다. 동일한 인터페이스의 여러 선언은 자동으로 병합됩니다. 선언 병합을 지원하지 않습니다. 통합 및 교차 유형 지원되지 않습니다. 통합 지원(` 기본 유형 별칭 지원되지 않습니다. 앨리어싱 기본 유형을 지원합니다. 매핑 유형 지원되지 않습니다. 매핑 유형을 지원합니다. 수업 구현 구현을 사용한 클래스 구현을 지원합니다. 직접 클래스 구현을 지원하지 않습니다. 이러한 질문과 답변은 기본 개념과 실제 사용법을 다루며 TypeScript 인터뷰를 준비하는 데 도움이 됩니다.

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