TypeScript 유형에 대한 지식이 부족함을 입증 할 위험이 있습니다. 다음과 같은 질문이 있습니다.
다음과 같이 배열에 대한 유형 선언을 할 때 …
position: Array<number>;
… 임의의 길이로 배열을 만들 수 있습니다. 그러나 특정 길이, 즉 x, y, z 구성 요소에 대해 3을 가진 숫자를 포함하는 배열을 원한다면 고정 길이 배열에 대한 유형을 만들 수 있습니까?
position: Array<3>
어떤 도움이나 설명을 주시면 감사하겠습니다!
답변
자바 스크립트 배열에는 배열의 길이를 허용하는 생성자가 있습니다.
let arr = new Array<number>(3);
console.log(arr); // [undefined × 3]
그러나 이것은 초기 크기 일 뿐이며 변경에 대한 제한은 없습니다.
arr.push(5);
console.log(arr); // [undefined × 3, 5]
Typescript에는 특정 길이와 유형으로 배열을 정의 할 수있는 튜플 유형 이 있습니다.
let arr: [number, number, number];
arr = [1, 2, 3]; // ok
arr = [1, 2]; // Type '[number, number]' is not assignable to type '[number, number, number]'
arr = [1, 2, "3"]; // Type '[number, number, string]' is not assignable to type '[number, number, number]'
답변
튜플 접근 방식 :
이 솔루션은 튜플을 기반으로 하는 엄격한 FixedLengthArray (일명 SealedArray) 유형 서명을 제공합니다 .
구문 예 :
// Array containing 3 strings
let foo : FixedLengthArray<[string, string, string]>
경계를 벗어난 인덱스 액세스를 방지 한다는 점을 고려할 때 가장 안전한 접근 방식 입니다.
구현 :
type ArrayLengthMutationKeys = 'splice' | 'push' | 'pop' | 'shift' | 'unshift' | number
type ArrayItems<T extends Array<any>> = T extends Array<infer TItems> ? TItems : never
type FixedLengthArray<T extends any[]> =
Pick<T, Exclude<keyof T, ArrayLengthMutationKeys>>
& { [Symbol.iterator]: () => IterableIterator< ArrayItems<T> > }
테스트 :
var myFixedLengthArray: FixedLengthArray< [string, string, string]>
// Array declaration tests
myFixedLengthArray = [ 'a', 'b', 'c' ] // ✅ OK
myFixedLengthArray = [ 'a', 'b', 123 ] // ✅ TYPE ERROR
myFixedLengthArray = [ 'a' ] // ✅ LENGTH ERROR
myFixedLengthArray = [ 'a', 'b' ] // ✅ LENGTH ERROR
// Index assignment tests
myFixedLengthArray[1] = 'foo' // ✅ OK
myFixedLengthArray[1000] = 'foo' // ✅ INVALID INDEX ERROR
// Methods that mutate array length
myFixedLengthArray.push('foo') // ✅ MISSING METHOD ERROR
myFixedLengthArray.pop() // ✅ MISSING METHOD ERROR
// Direct length manipulation
myFixedLengthArray.length = 123 // ✅ READ-ONLY ERROR
// Destructuring
var [ a ] = myFixedLengthArray // ✅ OK
var [ a, b ] = myFixedLengthArray // ✅ OK
var [ a, b, c ] = myFixedLengthArray // ✅ OK
var [ a, b, c, d ] = myFixedLengthArray // ✅ INVALID INDEX ERROR
(*)이 솔루션이 작동하려면 noImplicitAny
typescript 구성 지시문 을 활성화해야합니다 (일반적으로 권장되는 방법).
Array (ish) 접근 방식 :
이 솔루션은 Array
추가 두 번째 매개 변수 (배열 길이)를 허용하는 유형 의 증가로 작동 합니다. Tuple 기반 솔루션 만큼 엄격하고 안전하지 않습니다 .
구문 예 :
let foo: FixedLengthArray<string, 3>
이 접근 방식 은 선언 된 경계를 벗어난 인덱스에 액세스하고 여기 에 값을 설정하는 것을 방지하지 않습니다 .
구현 :
type ArrayLengthMutationKeys = 'splice' | 'push' | 'pop' | 'shift' | 'unshift'
type FixedLengthArray<T, L extends number, TObj = [T, ...Array<T>]> =
Pick<TObj, Exclude<keyof TObj, ArrayLengthMutationKeys>>
& {
readonly length: L
[ I : number ] : T
[Symbol.iterator]: () => IterableIterator<T>
}
테스트 :
var myFixedLengthArray: FixedLengthArray<string,3>
// Array declaration tests
myFixedLengthArray = [ 'a', 'b', 'c' ] // ✅ OK
myFixedLengthArray = [ 'a', 'b', 123 ] // ✅ TYPE ERROR
myFixedLengthArray = [ 'a' ] // ✅ LENGTH ERROR
myFixedLengthArray = [ 'a', 'b' ] // ✅ LENGTH ERROR
// Index assignment tests
myFixedLengthArray[1] = 'foo' // ✅ OK
myFixedLengthArray[1000] = 'foo' // ❌ SHOULD FAIL
// Methods that mutate array length
myFixedLengthArray.push('foo') // ✅ MISSING METHOD ERROR
myFixedLengthArray.pop() // ✅ MISSING METHOD ERROR
// Direct length manipulation
myFixedLengthArray.length = 123 // ✅ READ-ONLY ERROR
// Destructuring
var [ a ] = myFixedLengthArray // ✅ OK
var [ a, b ] = myFixedLengthArray // ✅ OK
var [ a, b, c ] = myFixedLengthArray // ✅ OK
var [ a, b, c, d ] = myFixedLengthArray // ❌ SHOULD FAIL
답변
실제로 현재 타이프 스크립트로이를 달성 할 수 있습니다.
type Grow<T, A extends Array<T>> = ((x: T, ...xs: A) => void) extends ((...a: infer X) => void) ? X : never;
type GrowToSize<T, A extends Array<T>, N extends number> = { 0: A, 1: GrowToSize<T, Grow<T, A>, N> }[A['length'] extends N ? 0 : 1];
export type FixedArray<T, N extends number> = GrowToSize<T, [], N>;
예 :
// OK
const fixedArr3: FixedArray<string, 3> = ['a', 'b', 'c'];
// Error:
// Type '[string, string, string]' is not assignable to type '[string, string]'.
// Types of property 'length' are incompatible.
// Type '3' is not assignable to type '2'.ts(2322)
const fixedArr2: FixedArray<string, 2> = ['a', 'b', 'c'];
// Error:
// Property '3' is missing in type '[string, string, string]' but required in type
// '[string, string, string, string]'.ts(2741)
const fixedArr4: FixedArray<string, 4> = ['a', 'b', 'c'];