keyof for arrays

[bezreyhan]

TypeScript Version: 2.5.3

Would it be possible to have something like the keyof operator for arrays? The operator would be able to access the values in the array.

Code
With object we can do the following:

const obj = {one: 1, two: 2}
type Prop = {
  [k in keyof typeof obj]?: string;
}
function test(p: Prop) {  
  return p;
}

test({three: '3'}) // throws an error

Could we do something like the following with arrays?

const arr = ['one', 'two'];
type Prop = {
    [k in valuesof arr]?: string;
  }
function test(p: Prop) {  
  return p;
}

test({three: '3'}) // throws an error

[DanielRosenwasser]

You can get valuesof arr with the indexed access type (typeof arr)[number], but you'll get string instead of "one" | "two" without an explicit type annotation. #10195 would help there though.

[bezreyhan]

Thanks @DanielRosenwasser, #10195 would be helpful but ideally we would be able to do without indexed access types. What I was looking for was a way to express: "All keys in an object must be a value in an array".

[DanielRosenwasser]

You could always define a type alias for that, but you won't be able to get around using typeof in conjunction with it.

export type ValuesOf<T extends any[]>= T[number];

declare var x: ...;
type Foo = ValuesOf<typeof x>;

[bezreyhan]

That's interesting, I didn't think of that. I'll close out the ticket. Thanks!

[kpdonn]

@bezreyhan I came across this issue while searching around for something else. I don't know if this will be useful to you two months later but I think this will do essentially what you want as long as you don't need to save the array in a variable beforehand:

function functionGenerator<T extends string, U = { [K in T]?: string }> (keys: T[]): (p: U) => U {
  return (p: U) => p
}

const testFun = functionGenerator(['one', 'two'])

testFun({one: '1'}) // no error
testFun({two: '2'}) // no error
testFun({three: '3'}) // error as expected because 'three' is not a known property

If you do need the array in a variable, it looks like this will work:

function literalArray<T extends string>(array: T[]): T[] {
    return array
}

const arr = literalArray(['one', 'two'])

const testFun2 = functionGenerator(arr)
testFun2({one: '1'}) // no error
testFun2({two: '2'}) // no error
testFun2({ three: '3' }) // error as expected because 'three' is not a known property

Here is a link of those examples in the playground: Link

[tomzaku]

@kpdonn Thanks. But I have problem with using array variable instead of direct array in parameter

const functionGenerator = <T extends string, U = { [K in T]?: string }>(keys: T[]): U => {
  return keys.reduce((oldType: any, type) => ({ ...oldType, [type]: type }), {})
}
const data = ['one', 'two']
const testFun = functionGenerator(data)
testFun.one
testFun.three <<<<<< also ok, expected throw error

[nickserv]

Using resolveJsonModule, would it be possible to get the type of a JSON array without explicitly declaring the type of the JSON module and losing typechecking on its data? I tried the ValuesOf approach but it seems like I would have to declare the type of my function argument explicitly.

[tpucci]

@kpdonn I find your solution very interesting.
Any idea how to have the same result with an array of object instead of an array of string ?
The following code passes typescript diagnostic. However, the last line should throw an error.

function functionGenerator<T extends {name: string}, U = { [K in T['name']]?: string }>(keys: T[]): (p: U) => U {
  return p => p;
}

const testFun = functionGenerator([{name: 'one'}, {name: 'two'}]);

testFun({ one: '1', two: '2' }); // no error
testFun({ two: '2' }); // no error
testFun({ three: '3' }); // error expected but type diagnostic passes

[tpucci]

@kpdonn I find your solution very interesting.
Any idea how to have the same result with an array of object instead of an array of string ?
The following code passes typescript diagnostic. However, the last line should throw an error.

If anyone is interested, I found the solution of my problem:

function functionGenerator<
  V extends string,
  T extends {name: V},
  U = { [K in T['name']]?: string }
>(keys: T[]): (p: U) => U {
  return p => p;
}

const testFun = functionGenerator([{name: 'one'}, {name: 'two'}]);

testFun({ one: '1', two: '2' }); // no error
testFun({ two: '2' }); // no error
testFun({ three: '3' }); // throws an error

[NickDubelman]

Is there anything wrong with doing the following:

export type Things = ReadonlyArray<{
    readonly fieldA: number
    readonly fieldB: string
    readonly fieldC: string
    ...other fields
}>

type Thing = Things[number]

When I do that, type Thing has the correct type. Obviously you wouldn't want to do this by default, but I find myself in the situation where I have something generating array types, but sometimes I want functions to take a single value of that array and obviously I don't want to have to manually duplicate the type definition.

The above syntax is kind of weird, but it seems to do the job?

[benneq]

Typescript 3.4 made things better:

const myArray = <const> ['foo', 'bar'];
type MyArray = typeof myArray[number];

👍

[Serrulien]

@benneq Thanks for that hint. I'm now able to type function's parameter without having to create an enum

const pages = <const> [
    {
        label: 'homepage',
        url: ''
    },
    {
        label: 'team',
        url: ''
    }
];

// resulting signature = function getUrl(label: "homepage" | "team"): void
function getUrl(label: (typeof pages[number])['label']) {}

getUrl('homepage') // ok
getUrl('team') // ok
getUrl('bad') // wrong

[bopfer]

Is there a way to do what @Serrulien posted, but also with types defined for each object in the array?

Something like:

type Page = {
  label: string;
  url: string;
};

Then enforce that type of each object of the const array. With an array of many elements, it would help to avoid type errors in any individual object.