좋은 TS 인터뷰 질문(3개 레벨 포함)을 공유하고 어떤 레벨에 답할 수 있는지 확인하세요!

최근에 좋은 TS 면접 질문을 발견해서 공유하고 싶습니다.

이 질문은 3가지 레벨로 구성되어 있습니다. 하나씩 살펴보겠습니다.

첫 번째 레이어의 요구 사항은 다음과 같습니다.

두 배열의 요소를 순서대로 병합하는 zip 기능을 구현합니다. 예를 들어 [1,2,3], [4,5,6], Return [[1,4], [2,5],[3,6]]

이 레이어는 매번 두 배열에서 하나의 요소를 가져와 병합하여 배열에 넣은 후 다음 요소를 계속 처리합니다. 하나. 배열이 빌 때까지 이 프로세스를 반복적으로 수행합니다.

function zip(target, source) {
  if (!target.length || !source.length) return [];

  const [one, ...rest1] = target;
  const [other, ...rest2] = source;

  return [[one, other], ...zip(rest1, rest2)];
}

결과는 맞습니다:

첫 번째 레벨은 상대적으로 간단합니다. 그러면 두 번째 레벨 요구 사항을 살펴보겠습니다.

이 zip 함수에 대한 ts 유형을 정의합니다(쓰기 방법 두 가지)

함수 정의에는 두 가지 형태가 있습니다.

함수를 통해 직접 함수를 선언하는 방법:

function func() {}

과 익명 함수를 선언하고 이를 변수에 할당하는 방법:

const func = () => {}

매개변수 유형과 반환 값은 모두 배열이지만 특정 유형이 알려지지 않았으므로 알 수 없음[ ]이라고 쓸 수 있습니다.

그래서 두 가지 함수 유형의 정의는 다음과 같습니다.

직접 함수 유형을 선언하는 함수와 함수 유형을 선언한 후 변수 유형에 추가하는 인터페이스도 있습니다.

특정 요소 유형을 알 수 없으므로 알 수 없음을 사용합니다.

여기서 any와 알 수 없음의 차이점을 물어볼 수 있습니다.

any와 알 수 없음 모두 모든 유형을 받을 수 있습니다.

any는 어떤 유형에도 할당될 수 있지만, Unknown은 할당될 수 없습니다.

이것은 다른 유형을 수신하는 데 사용되는 것이므로 알 수 없음이 무엇보다 적절하고 안전합니다.

이 레벨도 상대적으로 기본적인 ts 구문이며 세 번째 레벨은 더 어려워집니다.

[1,2,3], [4,5, 6에 매개변수를 전달하는 등 정확한 유형 힌트를 얻으려면 유형 프로그래밍을 사용하세요. ]이면 반환 값의 유형은 [[1,4], [2,5],[3,6]]

여기서 반환 값 유형이 정확해야 하며 이를 결정해야 합니다. 매개변수 유형에 따라 반환 값 유형을 동적으로 생성합니다.

그렇습니다.

두 가지 유형 매개변수인 Target과 Source를 선언하고 제약 조건은 모든 요소 유형의 배열 유형인 알 수 없음[]입니다.

이 두 가지 유형 매개변수는 전달된 두 매개변수의 유형입니다.

반환 값은 Zip을 통해 계산됩니다.

그런 다음 고급 유형의 Zip을 구현해야 합니다.

전달된 유형 매개변수는 두 가지 배열 유형이며, 여기서 각 요소를 추출하여 함께 병합해야 합니다.

패턴 일치를 사용하여 요소를 추출할 수 있습니다.

따라서 이 유형은 다음과 같이 정의할 수 있습니다.

type Zip<One extends unknown[], Other extends unknown[]> =
    One extends [infer OneFirst,...infer Rest1]
      ? Other extends [infer OtherFirst, ...infer Rest2]
        ? [[OneFirst, OtherFirst], ...Zip<Rest1, Rest2>]
        : []
      : [];

두 배열의 첫 번째 요소를 각각 추출하고 새 배열을 구성합니다. 그런 다음 배열이 빌 때까지 나머지 배열에 대해 이 작업을 반복적으로 수행합니다.

이렇게 하면 우리가 원하는 고급 유형이 달성됩니다.

그러나 이를 함수에 반환 값으로 추가하면 오류가 보고됩니다.

왜냐하면 매개변수가 무엇인지 모르기 때문입니다. 함수를 선언하면 당연히 Zipa7808be3c0f211b573c7d3497f62053f 값을 계산할 수 없으므로 여기서 유형 불일치가 발생합니다.

어떻게 해야 할까요?

함수 오버로딩으로 해결 가능:

ts는 동일한 이름을 가진 여러 함수에 대한 유형 정의를 작성하고 마지막으로 함수 구현을 작성할 수 있습니다. 함수 유형과 일치하는 매개변수 유형을 기반으로 합니다.

우리가 타입 프로그래밍을 사용하는 함수는 이런 식으로 작성되면 오류를 보고하지 않습니다.

한 번 살펴보겠습니다:

반환값 유형이 잘못된 이유는 무엇인가요?

사실 이때 일치하는 함수형은 맞지만, 추론한 것은 리터럴형이 아닙니다.

이때 const로 추가할 수 있습니다.

하지만 const로 추가하면 readonly [1,2,3]

유형이 일치하지 않으므로 유형 매개변수 선언에 readonly:

를 추가해야 합니다.

그러나 Zip 기능의 유형이 다시 일치하지 않습니다.

이 유형이 사용되는 모든 곳에 읽기 전용을 추가해야 합니까?

필요없습니다. 읽기 전용 수정만 제거하면 되나요?

Typescript에는 읽기 전용 고급 유형이 내장되어 있습니다.

인덱스 유형의 각 인덱스에 읽기 전용 수정을 추가할 수 있습니다.

그러나 읽기 전용 수정을 제거하는 고급 유형은 없습니다.

매핑 유형 구문을 사용하여 새 인덱스 유형을 구성하고 -readonly를 추가하여 읽기 전용 수정을 제거합니다.

배열형도 인덱스형인가요?

네, 인덱스 타입은 여러 요소를 모아놓은 타입이라 객체, 배열, 클래스가 모두 해당됩니다.

그러면 배열에서 자연스럽게 사용할 수 있습니다.

(정확히 말하면 튜플이라고 합니다. 튜플은 고정된 수의 요소가 있는 배열입니다.)

그러면 다음과 같이 사용하면 됩니다. 변경 가능:

다시 시도:

완료! 이제 반환 값 유형이 정확합니다.

하지만 또 다른 문제가 있습니다. 리터럴을 직접 전달하지 않으면 리터럴 유형을 추론할 수 없습니다.

하지만 우리 모두 오버로드 유형을 선언하지 않았나요?

리터럴 유형을 추론할 수 없는 경우 다음과 일치해야 합니다.

그러나 실제로는 첫 번째 유형과 일치합니다.

이때 두 함수의 순서만 변경하면 됩니다. 현재:

현재 리터럴 매개변수의 상황은 여전히 ​​정확합니다.

왜요?

왜냐하면 오버로드된 함수의 종류는 위에서 아래로 일치하면 적용되기 때문입니다.

비리터럴 값의 경우 유형은 number[]이며, 이는 알 수 없음[] 유형과 일치할 수 있으므로 함수 유형이 적용됩니다.

리터럴의 경우 파생이 읽기 전용 [1,2,3]이고 읽기 전용이므로 알 수 없음[]과 일치하지 않습니다. 계속해서 일치하면 함수 유형이 유형 매개변수와 일치하게 됩니다. .

이렇게 하면 두 경우 모두 적절한 함수 유형이 적용됩니다.

전체 코드는 다음과 같습니다.

type Zip<One extends unknown[], Other extends unknown[]> = One extends [
  infer OneFirst,
  ...infer Rest1
]
  ? Other extends [infer OtherFirst, ...infer Rest2]
    ? [[OneFirst, OtherFirst], ...Zip<Rest1, Rest2>]
    : []
  : [];

type Mutable<Obj> = {
  -readonly [Key in keyof Obj]: Obj[Key];
};

function zip(target: unknown[], source: unknown[]): unknown[];

function zip<Target extends readonly unknown[], Source extends readonly unknown[]>(
  target: Target,
  source: Source
): Zip<Mutable<Target>, Mutable<Source>>;

function zip(target: unknown[], source: unknown[]) {
  if (!target.length || !source.length) return [];

  const [one, ...rest1] = target;
  const [other, ...rest2] = source;

  return [[one, other], ...zip(rest1, rest2)];
}

const result = zip([1, 2, 3] as const, [4, 5, 6] as const);

const arr1 = [1, 2, 3];
const arr2 = [4, &#39;5&#39;, 6];

const result2 = zip(arr1, arr2);

ts playground 地址

总结

今天我们做了一道综合的 ts 面试题，一共有三层：

第一层实现 js 的逻辑，用递归或者循环都能实现。

第二层给函数加上类型，用 function 声明类型和 interface 声明函数类型两种方式，参数和返回值都是 unknown[]。

第三层是用类型编程实现精准的类型提示，这一层需要拿到参数的类型，通过提取元素的类型并构造出新的数组类型返回。还要通过函数重载的方式来声明类型，并且要注意重载类型的声明顺序。

as const 能够让字面量推导出字面量类型，但会带有 readonly 修饰，可以自己写映射类型来去掉这个修饰。

其实这也是我们学习 ts 的顺序，我们先要能把 js 逻辑写出来，然后知道怎么给函数、class 等加 ts 类型，之后学习类型编程，知道怎么动态生成类型。

其中类型编程是 ts 最难的部分，也是最强大的部分。攻克了这一层，ts 就可以说学的差不多了。

【相关推荐：javascript学习教程

위 내용은 좋은 TS 인터뷰 질문(3개 레벨 포함)을 공유하고 어떤 레벨에 답할 수 있는지 확인하세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!