How to declare a Fixed length Array in TypeScript

Question

At the risk of demonstrating my lack of knowledge surrounding TypeScript types - I have the following question   When you make a type declaration for an array like this     position  Array lt number gt        it will let you make an array with arbitrary length  However  if you want an array containing numbers with a specific length i e  3 for x y z components can you make a type with for a fixed length array  something like this   position  Array lt 3 gt    Any help or clarification appreciated

User · Accepted Answer

The javascript array has a constructor that accepts the length of the array:

let arr = new Array<number>(3);
console.log(arr); // [undefined × 3]

However, this is just the initial size, there's no restriction on changing that:

arr.push(5);
console.log(arr); // [undefined × 3, 5]

Typescript has tuple types which let you define an array with a specific length and types:

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]'

User · Answer

The Tuple approach    This solution provides a strict FixedLengthArray   ak a  SealedArray  type signature based in Tuples   Syntax example       Array containing 3 strings let foo   FixedLengthArray lt  string  string  string  gt        This is the safest approach  considering it prevents accessing indexes out of the boundaries    Implementation    type ArrayLengthMutationKeys    splice     push     pop     shift     unshift    number type ArrayItems lt T extends Array lt any gt  gt    T extends Array lt infer TItems gt    TItems   never type FixedLengthArray lt T extends any   gt      Pick lt T  Exclude lt keyof T  ArrayLengthMutationKeys gt  gt     amp     Symbol iterator        gt  IterableIterator lt  ArrayItems lt T gt   gt      Tests    var myFixedLengthArray  FixedLengthArray lt   string  string  string  gt      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       This solution requires the noImplicitAny typescript configuration directive to be enabled in order to work  commonly recommended practice     The Array ish  approach    This solution behaves as an augmentation of the Array type  accepting an additional second parameter Array length   Is not as strict and safe as the Tuple based solution    Syntax example    let foo  FixedLengthArray lt string  3 gt        Keep in mind that this approach will not prevent you from accessing an index out of the declared boundaries and set a value on it    Implementation    type ArrayLengthMutationKeys    splice     push     pop     shift      unshift  type FixedLengthArray lt T  L extends number  TObj    T     Array lt T gt   gt      Pick lt TObj  Exclude lt keyof TObj  ArrayLengthMutationKeys gt  gt     amp        readonly length  L        I   number     T      Symbol iterator        gt  IterableIterator lt T gt           Tests    var myFixedLengthArray  FixedLengthArray lt string 3 gt      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

User · Answer

Actually  You can achieve this with current typescript  type Grow lt T  A extends Array lt T gt  gt      x  T     xs  A    gt  void  extends      a  infer X    gt  void    X   never  type GrowToSize lt T  A extends Array lt T gt   N extends number gt      0  A  1  GrowToSize lt T  Grow lt T  A gt   N gt    A  length   extends N   0   1    export type FixedArray lt T  N extends number gt    GrowToSize lt T      N gt    Examples     OK const fixedArr3  FixedArray lt string  3 gt      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 lt string  2 gt      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 lt string  4 gt      a    b    c     EDIT  after a long time  This should handle bigger sizes  as basically it grows array exponentially until we get to closest power of two   type Shift lt A extends Array lt any gt  gt         args  A    gt  void  extends      args   A 0      infer R     gt  void    R   never   type GrowExpRev lt A extends Array lt any gt   N extends number  P extends Array lt Array lt any gt  gt  gt    A  length   extends N   A       0  GrowExpRev lt     A     P 0    N  P gt     1  GrowExpRev lt A  N  Shift lt P gt  gt        A     P 0   N  extends undefined   0   1    type GrowExp lt A extends Array lt any gt   N extends number  P extends Array lt Array lt any gt  gt  gt    A  length   extends N   A       0  GrowExp lt     A     A   N   A     P  gt     1  GrowExpRev lt A  N  P gt        A     A  N  extends undefined   0   1    export type FixedSizeArray lt T  N extends number gt    N extends 0        N extends 1    T    GrowExp lt  T  T   N    T   gt

[typescript] How to declare a Fixed length Array in TypeScript

Examples related to typescript

Examples related to types

Examples related to fixed-length-array