항목이 튜플마다 다를 수 있는 튜플 배열에 유형을 할당하는 방법은 무엇입니까?
P粉068486220
P粉068486220 2023-09-06 22:44:17
0
2
548

내가 가지고 있다고 가정 function foo(args) {...},其中args是一个二元组数组,这样元组中的条目是相同类型的(即[T,T]),但是元组的条目可能任意变化(即[[T,T], [U,U],[V,V]]). 예:

으아악

튜플의 일치하지 않는 유형으로 인해 컴파일 시간 유형 오류가 발생하도록 하려면 fooargs 매개변수를 어떻게 입력해야 합니까? 예:

으아악

타입 오류를 인라인으로 표시할 수 없는 경우 전체 함수 호출을 잘못하는 것도 허용됩니다.


Appendix: 사용 가능합니까 [SomeType, T] 类型的 2 元组(即第二个条目的类型应与第一个),但 T 仍然可以在元组之间变化 [[SomeType, T],[SomeType, U],[SomeType, V]]?

foo([
  [1, 3],
  ["hello", "world"],
  [true, true],
  [2, 7]
]) // no error

P粉068486220
P粉068486220

모든 응답(2)
P粉948258958

row 创建一个类型来简单地实现此目的,该类型将接受 stringnumber 或 布尔值로 합격할 수 있을 것 같아요.

类型 Row = string[] |布尔值[] |数字[]

이제 이 유형을 foo 函数的 args 매개변수에 할당할 수 있습니다.

으아악

이 유형 정의를 사용하면 행의 요소 유형이 일치하지 않는 foo에 인수를 제공하면 Typescript에서 오류가 발생합니다.

여기가 놀이터Link代码>.

P粉136356287

이를 달성하려면 generics배열과 매핑 유형을 사용하여 배열 요소를 매핑해야 합니다. 배열은 길이가 2인 튜플의 배열이어야 한다는 것을 알고 있으므로 튜플의 첫 번째 항목에 대한 일반 매개변수를 추론하고 두 번째 항목이 동일한 유형을 갖도록 만듭니다. 일반 매개변수의 유형을 얻으려면 Infer 키워드를 사용해야 합니다. 작동하는 데 사용된 일반 유형을 정확히(또는 적어도 비슷한 모양의 유형) 알아야 합니다. 우리의 경우에는 Variable:

으아악

그게 전부인 것처럼 보일 수도 있지만 다음 배열의 유형을 살펴보겠습니다.

으아악

보시다시피 유형은 우리가 arr에 있는 것과 정확히 동일하지 않습니다. 컴파일러는 배열 요소를 변경할 수 있도록 유형을 확장합니다. 배열이 읽기 전용임을 컴파일러에 알리려면 const 어설션을 사용해야 합니다.

으아악

이제 좋아 보입니다. 이는 foo에 전달된 배열을 읽기 전용`으로 설정해야 함을 의미하며, 읽기 전용 배열은 읽기 전용 배열을 배열에 전달하려고 하면 얻을 수 있는 변경 가능한 배열의 상위 집합이므로, 오류가 나타납니다:

으아악

따라서 foo의 모든 배열 유형을 읽기 전용으로 업데이트합니다. 배열은 2D이므로 내부 배열도 읽기 전용이 되며 배열의 제약 조건은 읽기 전용 배열의 읽기 전용 배열이어야 합니다.

으아악

테스트:

으아악

그러나 여전히 몇 가지 문제가 있습니다. 예를 들어, 튜플의 첫 번째 요소가 숫자인 Variable ,则意味着第二个参数也应该是 7,而不是任何数字,如果这是一个问题我们需要获取 7의 기본 요소인 경우입니다. 이 작업은 내 type-samurai 오픈 소스 프로젝트의 ToPrimitive 유틸리티 유형을 사용하여 수행할 수 있습니다. p> 으아악

업데이트된 기능:

으아악

또 다른 문제는 현재 foo 实现中推断的类型是 number[] 구현에서 추론된 유형이 number[]

인 경우 읽기 전용 배열을 허용하지 않는다는 것입니다.

으아악 수정 방법은 매우 간단합니다. 추론된 유형이 배열인지 확인한 다음 해당 요소 유형을 가져오고 읽기 전용 ElementType[]

을 튜플의 두 번째 매개변수로 가져옵니다.

으아악

테스트:🎜으아악

성가신 부분은 const 断言。在 Typescript 5.0 中,const 类型参数,这样我们就可以避免 const 断言를 모든 곳에서 사용해야 한다는 것입니다:

으아악

안타깝게도 T를 유형으로 직접 할당하는 대신 매개변수로 작업을 하기 때문에 사용할 수 없습니다.

으아악

어쨌든 현재로서는 const 断言이 예상대로 작동하는지 확인하는 유일한 방법입니다.

놀이터 링크

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿