기술 면접 질문 - 파트 Typescript

소개

안녕하세요안녕하세요!! :디

모두들 잘 지내시길 바랍니다!

실제 느낌:

이 시리즈의 두 번째 편으로 돌아왔습니다. ?

이번 장에서는 제가 인터뷰 중 겪었던 ✨Typescript✨ 질문에 대해 자세히 알아보겠습니다.

인트로는 짧게 할테니 바로 들어가겠습니다!

## 질문
1. TypeScript의 제네릭은 무엇입니까? 가 무엇인가요?
2. 인터페이스와 유형의 차이점은 무엇인가요?
3. 모두, null, 알 수 없음, 없음의 차이점은 무엇인가요?

---

질문 1: TypeScript의 제네릭이란 무엇입니까? 란 무엇인가요?

짧은 대답은...

TypeScript의 제네릭을 사용하면 특정 유형을 지정하지 않고도 다양한 유형에서 작동할 수 있는 재사용 가능한 함수, 클래스 및 인터페이스를 만들 수 있습니다. 이렇게 하면 any를 포괄적인 유형으로 사용하는 것을 피하는 데 도움이 됩니다.

구문 일반 유형을 선언하는 데 사용되지만 , 또는 다른 자리 표시자를 사용할 수도 있습니다.

어떻게 작동하나요?

예를 들어서 분석해 보겠습니다.

매개변수를 받아들이고 동일한 유형의 요소를 반환하는 함수가 있다고 가정해 보겠습니다. 특정 유형으로 해당 함수를 작성하면 다음과 같습니다.

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

내가 선언했기 때문에 stringData의 유형이 "string"이 될 것이라는 것을 알고 있습니다.

그런데 다른 유형을 반환하고 싶으면 어떻게 되나요?

const numberData = returnElement(5);

신고한 유형과 다르기 때문에 오류 메시지가 나타납니다.

숫자 유형을 반환하는 새로운 함수를 만드는 것이 해결책일 수 있습니다.

function returnNumber(element: number): number {
 return element;
}

이러한 접근 방식은 효과가 있지만 코드가 중복될 수 있습니다.

이를 방지하기 위한 일반적인 실수는 선언된 유형 대신 any를 사용하는 것인데, 이는 유형 안전성의 목적에 어긋납니다.

function returnElement2(element: any): any {
 return element;
}

그러나 any를 사용하면 Typescript의 유형 안전성 및 오류 감지 기능이 손실됩니다.
또한 중복 코드를 피해야 할 때마다 사용하기 시작하면 코드 유지 관리가 손실됩니다.

이것이 바로 제네릭을 사용하는 것이 유익한 때입니다.

function returnGenericElement<T>(element: T): T {
 return element;
}

이 함수는 특정 유형의 요소를 수신합니다. 해당 유형은 제네릭을 대체하고 런타임 내내 그대로 유지됩니다.

이 접근 방식을 사용하면 유형 안전성을 유지하면서 중복된 코드를 제거할 수 있습니다.

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

하지만 배열에서 제공되는 특정 함수가 필요한 경우에는 어떻게 해야 하나요?

제네릭을 배열로 선언하고 다음과 같이 작성할 수 있습니다.

const numberData = returnElement(5);

그럼

function returnNumber(element: number): number {
 return element;
}

선언된 유형은 매개변수로 제공되는 유형으로 대체됩니다.

클래스에서도 제네릭을 사용할 수 있습니다.

function returnElement2(element: any): any {
 return element;
}

이 코드에 대해 세 가지 사항을 알려드리겠습니다.

1. add는 익명의 화살표 함수입니다(첫 번째 장에서 논의했습니다).
2. 원하는 경우 일반 이름을 , 또는 로 지정할 수 있습니다.
3. 아직 유형을 지정하지 않았으므로 클래스 내부에서 작업을 구현할 수 없습니다. 따라서 제네릭의 타입을 선언하여 클래스를 인스턴스화한 후 함수를 구현해야 합니다.

모습은 다음과 같습니다.

function returnGenericElement<T>(element: T): T {
 return element;
}

그리고 이 질문을 끝내기 전에 마지막으로 한 가지 추가하겠습니다.
제네릭은 Typescript의 기능이라는 점을 기억하세요. 이는 Javascript로 컴파일할 때 제네릭이 지워진다는 것을 의미합니다.

에서

const stringData2 = returnGenericElement("Hello world");


const numberData2 = returnGenericElement(5);

에

function returnLength<T>(element: T[]): number {
 return element.length;
}

---

질문 2: 인터페이스와 유형의 차이점은 무엇입니까?

짧은 대답은 다음과 같습니다.

1. 선언 병합은 인터페이스에서는 작동하지만 유형에서는 작동하지 않습니다.
2. 공용체 유형이 있는 클래스에서는 구현을 사용할 수 없습니다.
3. 공용체 유형을 사용하는 인터페이스에는 확장을 사용할 수 없습니다.

첫 번째 사항에 대해 선언 병합이란 무엇을 의미하나요?

보여드리겠습니다:
클래스에서 사용하면서 동일한 인터페이스를 두 번 정의했습니다. 그런 다음 클래스는 두 정의에 선언된 속성을 통합합니다.

const stringLength = returnLength(["Hello", "world"]);

이것은 유형에서는 발생하지 않습니다. 유형을 두 번 이상 정의하려고 하면 TypeScript에서 오류가 발생합니다.

class Addition<U> {
 add: (x: U, y: U) => U;
}

다음 사항에 대해 합집합 유형과 교차 유형을 구별해 보겠습니다.

Union 유형을 사용하면 값이 여러 유형 중 하나가 될 수 있도록 지정할 수 있습니다. 이는 변수가 여러 유형을 보유할 수 있는 경우 유용합니다.

교집합 유형을 사용하면 유형을 하나로 결합할 수 있습니다. & 연산자를 사용하여 정의됩니다.

const operation = new Addition<number>();


operation.add = (x, y) => x + y; => We implement the function here


console.log(operation.add(5, 6)); // 11

조합 유형:

function returnGenericElement<T>(element: T): T {
 return element;
}

교차로 유형:

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

Animal과 같은 공용체 유형과 함께 Implements 키워드를 사용하려고 하면 TypeScript에서 오류가 발생합니다. 이는 구현이 공용체 유형이 아닌 단일 인터페이스 또는 유형을 기대하기 때문입니다.

const numberData = returnElement(5);

Typescript를 사용하면 다음과 같은 "구현"을 사용할 수 있습니다.

아. 교차로 유형

function returnNumber(element: number): number {
 return element;
}

ㄴ. 인터페이스

function returnElement2(element: any): any {
 return element;
}

function returnGenericElement<T>(element: T): T {
 return element;
}

ㄷ. 싱글형.

const stringData2 = returnGenericElement("Hello world");


const numberData2 = returnGenericElement(5);

Union 유형으로 확장을 사용하려고 하면 동일한 문제가 발생합니다. 인터페이스가 공용체 유형을 확장할 수 없기 때문에 TypeScript는 오류를 발생시킵니다. 예시는 다음과 같습니다

function returnLength<T>(element: T[]): number {
 return element.length;
}

공용체 유형은 가능한 여러 유형을 나타내기 때문에 확장할 수 없으며 어떤 유형의 속성을 상속해야 하는지 명확하지 않습니다.

그러나 유형이나 인터페이스를 확장할 수 있습니다.

const stringLength = returnLength(["Hello", "world"]);

또한 단일 유형을 확장할 수도 있습니다.

class Addition<U> {
 add: (x: U, y: U) => U;
}

---

질문 3: 모두, null, 알 수 없음, 없음의 차이점은 무엇인가요?

짧은 답변:

모두 => 이는 최상위 유형 변수(유니버설 유형 또는 유니버설 슈퍼 유형이라고도 함)입니다. 변수에 any를 사용하면 변수는 모든 유형을 보유할 수 있습니다. 일반적으로 변수의 특정 유형을 알 수 없거나 변경될 것으로 예상되는 경우에 사용됩니다. 그러나 any를 사용하는 것은 모범 사례로 간주되지 않습니다. 대신 제네릭을 사용하는 것이 좋습니다.

const operation = new Addition<number>();


operation.add = (x, y) => x + y; => We implement the function here


console.log(operation.add(5, 6)); // 11

메서드 호출과 같은 작업이 허용되지만 TypeScript 컴파일러는 이 단계에서 오류를 포착하지 않습니다. 예를 들면 다음과 같습니다.

function returnGenericElement<T>(element: T): T {
 return element;
}

모든 변수에 어떤 값이든 할당할 수 있습니다.

function returnGenericElement(element) {
 return element;
}

게다가 정의된 유형을 사용하여 임의의 변수를 다른 변수에 할당할 수도 있습니다.

interface CatInterface {
 name: string;
 age: number;
}


interface CatInterface {
 color: string;
}


const cat: CatInterface = {
 name: "Tom",
 age: 5,
 color: "Black",
};

---

알 수 없음 => 다른 유형과 마찬가지로 이 유형은 모든 값을 보유할 수 있으며 최상위 유형으로도 간주됩니다. 변수 유형을 모를 때 사용하지만 나중에 할당되어 런타임 중에 동일하게 유지됩니다. Unknow는 그 어떤 것보다 덜 허용적인 유형입니다.

type dog = {
 name: string;
 age: number;
};


type dog = { // Duplicate identifier 'dog'.ts(2300)
 color: string;
};


const dog1: dog = {
 name: "Tom",
 age: 5,
 color: "Black", //Object literal may only specify known properties, and 'color' does not exist in type 'dog'.ts(2353)
};

unknown에서 메소드를 직접 호출하면 컴파일 시간 오류가 발생합니다.

type cat = {
 name: string;
 age: number;
};


type dog = {
 name: string;
 age: number;
 breed: string;
};

사용하기 전에 다음과 같은 확인을 수행해야 합니다.

type animal = cat | dog;

다른 것과 마찬가지로 변수에 어떤 유형이든 할당할 수 있습니다.

type intersectionAnimal = cat & dog;

그러나 알 수 없는 유형을 다른 유형이 아닌 다른 유형에 할당할 수는 없습니다.

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

이렇게 하면 오류가 표시됩니다

---

무효 => 변수는 두 유형 중 하나를 보유할 수 있습니다. 변수에 값이 없다는 뜻입니다.

const numberData = returnElement(5);

null 변수에 다른 유형을 할당하려고 하면 오류가 발생합니다.

function returnNumber(element: number): number {
 return element;
}

---

절대로 => 이 유형을 사용하여 함수에 반환 값이 없음을 지정합니다.

function returnElement2(element: any): any {
 return element;
}

---

끝...

Typescript로 마무리합니다.

오늘(?

이 내용이 누군가에게 도움이 되었기를 바랍니다.

설명하고 싶은 기술 면접 질문이 있으면 댓글로 알려주세요. ??

좋은 한 주 보내세요 ?

위 내용은 기술 면접 질문 - 파트 Typescript의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!