기술 면접 질문 - 파트 Typescript
- Barbara Streisand원래의
- 2024-10-25 03:20:29324검색
소개
안녕하세요안녕하세요!! :디
모두들 잘 지내시길 바랍니다!
실제 느낌:
이 시리즈의 두 번째 편으로 돌아왔습니다. ?
이번 장에서는 제가 인터뷰 중 겪었던 ✨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;
}
이 코드에 대해 세 가지 사항을 알려드리겠습니다.
- add는 익명의 화살표 함수입니다(첫 번째 장에서 논의했습니다).
- 원하는 경우 일반 이름을 ,
또는 로 지정할 수 있습니다. - 아직 유형을 지정하지 않았으므로 클래스 내부에서 작업을 구현할 수 없습니다. 따라서 제네릭의 타입을 선언하여 클래스를 인스턴스화한 후 함수를 구현해야 합니다.
모습은 다음과 같습니다.
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: 인터페이스와 유형의 차이점은 무엇입니까?
짧은 대답은 다음과 같습니다.
- 선언 병합은 인터페이스에서는 작동하지만 유형에서는 작동하지 않습니다.
- 공용체 유형이 있는 클래스에서는 구현을 사용할 수 없습니다.
- 공용체 유형을 사용하는 인터페이스에는 확장을 사용할 수 없습니다.
첫 번째 사항에 대해 선언 병합이란 무엇을 의미하나요?
보여드리겠습니다:
클래스에서 사용하면서 동일한 인터페이스를 두 번 정의했습니다. 그런 다음 클래스는 두 정의에 선언된 속성을 통합합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!