How to create typescript interface for array of objects with array as values

Question

I have input data in this form:

const input = {
    postcode: ['0000']
    submitted: ['yes']
}

const output = {
    postcode: '0000'
    submitted: 'yes'
}

How to create interface for input data?

I tried:

interface inputData {
    postcode: string[]
    submitted: string[]
}

interface outputData {
    postcode: string
    submitted: string
}

But I get error while applying it:

const extract = (input: inputData[]): outputData => {
  for (const key in input) {
    if (Object.hasOwnProperty.call(input, key)) {
      input[key] = input[key][0]; // Error here
    }
  }
  const output: any = input;
  return output;
}

Error: Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'inputData'. Property '0' does not exist on type 'inputData'.

:outputData isnt a type (its a variable) What are you expecting the output to look like? — Damian Green
– Damian Green, Commented Jun 13, 2022 at 20:51
its still not clear, in your first paragraph you say you have input data in the form... and you define a const called outputData. and your output doesnt have the type of outputData. Did you mean `const output = { postcode: '0000' submitted: 'yes' } ? — Damian Green
– Damian Green, Commented Jun 13, 2022 at 20:55
Looks like your input and output data structure looks same, so you can create one interface and use that interface for input and output both. — Najmus Sakib
– Najmus Sakib, Commented Jun 13, 2022 at 20:59

Yassine El Bouchaibi · Accepted Answer · 2022-06-13 21:01:00Z

1

Here is a working version

function hasOwnProperty<X extends {}, Y extends PropertyKey>
  (obj: X, prop: Y): obj is X & Record<Y, unknown> {
  return obj.hasOwnProperty(prop)
}

interface inputData {
    postcode: string[];
    submitted: string[];
}
type outputData = inputData;

const extract = (input: inputData): outputData => {
    for (const key in input) {
        if (hasOwnProperty(input, key)) {
            const value = input[key];

            if (value instanceof Array) {
                input[key] = value[0];
            }
        }
    }
    const output: any = input;
    return output;
}

answered Jun 13, 2022 at 21:01

Yassine El Bouchaibi

2391 silver badge5 bronze badges

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

Comments

Damian Green · Accepted Answer · 2022-06-13 21:20:46Z

1

From the information you've provided the type of inputData is Record<string,string[]>` Record is a utility type (Link)

    postcode: ['0000'],
    submitted: ['yes']
}

type inputDataT = Record<string,string[]>

interface inputData {
    postcode: string[]
    submitted: string[]
}

const extract = (input: inputDataT) => {
  const output: any = input;
  for (const key in input) {
    if (Object.hasOwnProperty.call(input, key)) {
      output[key] = input[key][0];
    }
  }

  return output;
}
console.log(extract(inputData))

Also if you're sure that there will only ever be one string in the property value array you can make it stronger as follows:

type inputDataT = Record<string,[string]>
const inputData:inputDataT = {
    postcode: ['0000'],
    submitted: ['yes']
}

Playground

edited Jun 13, 2022 at 21:20

answered Jun 13, 2022 at 21:01

Damian Green

7,5952 gold badges36 silver badges47 bronze badges

5 Comments

kittu Over a year ago

Can you please tell what is Record?

kittu Over a year ago

I can actually only use this type inputDataT = Record<string,string[]> and it still works but looking at interface, it doesn't represent what are the types inside the record..

Damian Green Over a year ago

it matches the type in your question, please update the question with actual data if it differs

kittu Over a year ago

Yes but what if someone pass the input as postcodeBlahBlah: ['0000'], will it still validate? it has be only postcode: ['0000'] right?

Damian Green Over a year ago

I've posted 2 different ways of validating against your data. Without knowing the exact schema it's not possibel to know the exact format.

Matte · Accepted Answer · 2022-06-13 21:00:45Z

0

You can define an interface with an indexer:

interface EnumServiceGetOrderBy {
    [index: number]: { id: number; label: string; key: any };
}

answered Jun 13, 2022 at 21:00

Matte

1147 bronze badges

1 Comment

Damian Green Over a year ago

How is this the right approach? What's EnumServiceGetOrderBy. where are id, label and key mentioned in the question?

Collectives™ on Stack Overflow

How to create typescript interface for array of objects with array as values

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related