Typescript generic type for an array input

Question

I have a question around generic type for array input. I have a function called useForm and it accepts the following options

export interface DataType {
  [key: string]: FieldValue;
}

export type FieldValue = boolean | string | string[] | number | {};

export default function useForm<Data extends DataType>(
  { mode, validationSchema, defaultValues, validationFields }: Props<Data> = {
    mode: 'onSubmit',
    defaultValues: {},
  },
): UseFormFunctions<Data> {
}

export interface Props<Data> {
  mode: 'onSubmit' | 'onBlur' | 'onChange';
  defaultValues?: { [key: string]: any };
  validationFields?: string[]; // how do i use generic type here to only allow key from FormData
  validationSchema?: any;
}

type FormData = {
  firstName: string,
  lastName: string,
}

const { register } = useForm<FormData>({
  validationFields: ['test'] // should throw error because it's not firstname or lastname
})

i want it to throw an type error when FormData type is not found.

could you post the signature of useForm

Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir

2019-06-05 03:40:45 +00:00
Commented Jun 5, 2019 at 3:40 — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Jun 5, 2019 at 3:40
@TitianCernicova-Dragomir sure, thanks for taking a look

Bill
– Bill

2019-06-05 03:42:33 +00:00
Commented Jun 5, 2019 at 3:42 — Bill
– Bill, Commented Jun 5, 2019 at 3:42
can you post the code for UseFormFunctions and DataType

Shadab Faiz
– Shadab Faiz

2019-06-05 03:48:29 +00:00
Commented Jun 5, 2019 at 3:48 — Shadab Faiz
– Shadab Faiz, Commented Jun 5, 2019 at 3:48
sure @ShadabFaiz thanks heaps for helping

Bill
– Bill

2019-06-05 03:54:29 +00:00
Commented Jun 5, 2019 at 3:54 — Bill
– Bill, Commented Jun 5, 2019 at 3:54

Titian Cernicova-Dragomir · Accepted Answer · 2019-06-05 03:53:11Z

2

You can use keyof to get a union of keys in Data:

export default function useForm<Data extends DataType>(
  { mode, validationSchema, defaultValues, validationFields }: Props<Data> = {
    mode: 'onSubmit',
    defaultValues: {},
  },
): UseFormFunctions<Data> {
  return null!;
}

export interface Props<Data> {
  mode: 'onSubmit' | 'onBlur' | 'onChange';
  defaultValues?: { [key: string]: any };
  validationFields?: Array<keyof Data>; // how do i use generic type here to only allow key from FormData
  validationSchema?: any;
}

type FormData = {
  firstName: string,
  lastName: string,
}

const { register } = useForm<FormData>({
  mode: 'onBlur',
  validationFields: ['test'] // error now
})

answered Jun 5, 2019 at 3:53

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Bill Over a year ago

Nice! didn't know you can do that, any chance you can share the reference? would like to learn

Titian Cernicova-Dragomir Over a year ago

@Bruce This is a good start: typescriptlang.org/docs/handbook/…

Bill Over a year ago

quick question Array<keyof Data> how to convert into [] version

Bill Over a year ago

cause i had an eslint error: 18:22 error Array type using 'Array<T>' is forbidden. Use 'T[]' instead @typescript-eslint/arra , thanks bill

Titian Cernicova-Dragomir Over a year ago

@Bruce (keyof Data)[] but i find this particularly ugly .. for complex types Array<T> is much better ..

|

Collectives™ on Stack Overflow

Typescript generic type for an array input

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related