3

While working in TypeScript today, I wanted to type a field to a string array with a set size. Though I know how to actually do this in TS, my C instincts made me write:

interface MyInterface {
  arrayField: string[7];
  // ...
}

I noticed that neither linter nor compiler complains about this, but it appears that arrayField is now simply typed to string. Does anyone know what's going on here?

2
  • if you want to declare an array of specific length you should do arrayField: Array<string> = new Array<string>(7). The type on the field can be omitted, since it's inferred from the assignment.
    – fredrik
    Aug 6, 2021 at 10:11
  • Thank you for your comment, fredrik! As I said, "[...] I know how to actually do this in TS," but I appreciate your saying how it's supposed to be done. Aug 6, 2021 at 11:12

2 Answers 2

3

I believe it is a mistake. I think it should have been a string[].

While this notation string[7] is valid from TS perspective, it does not make any sense.

string is just a primitive type. Because all values are objects in javascript, string type has also a set of allowed methods/indexed properties.

In plain javascript "abs"[0] returns a. Since TypeScript does not have a char type, it should be compatible with javascript. Hence string[10000] returns just a string.

Here you can find all built in properties of string type:

type StringProperties= {
  [Prop in keyof string]: { key: Prop, value: string[Prop] }
}

enter image description here

How do we make a fixed length string in TS ?

Only with help of conditional types. You should iterate over each char and put this char into array. Then you need compare the length of the array with expected string length.

See example:


type ToArray<T extends string, Cache extends readonly string[] = []> =
  T extends ''
  ? Cache
  : T extends `${infer A}${infer Rest}`
  ? ToArray<Rest, [...Cache, A]>
  : Cache

type IsValid<T extends string[], Len extends number> = T['length'] extends Len ? true : false

type IsLength<T extends string, Len extends number> = IsValid<ToArray<T>, Len> // ok

type Result1 = IsLength<'hello', 6> // false
type Result2 = IsLength<'hello', 5> // true

Playground

If you are interested in string validation techniques, you can read my blog

4
  • 1
    How do we make a fixed length string in TS? Aug 6, 2021 at 10:16
  • @ShivamSingla TS strings, just like in JS, are immutable and are per definition fixed length. i.e. once created they can't be changed.
    – fredrik
    Aug 6, 2021 at 10:19
  • 1
    Interesting! So one can actually access specific parts of types just like you'd access fields in an object — e.g., let x: MyInterface['arrayField'] would be a legitimate way to type x to the type of arrayField? Thank you, this was exactly what I was looking for! Aug 6, 2021 at 11:19
  • 1
    Yes, you can find more explanation here typescriptlang.org/docs/handbook/2/indexed-access-types.html Aug 6, 2021 at 11:24
0

Fixed length can be done easily:

interface MyInterface {
  arrayField: [string, string, string, string, string, string, string];
}

Well it is possible but for big integers it's pretty bad. You can write into dev tools simple code:

function array(length, type = "string") {
  return `[${Array(length).fill(type)}]`
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.