TypeScript: How to conditional type in array?

Question

I have difficult time to explain this, maybe pictures of my code can help

I am able to do conditional type like this

if first parameter is 'FIRST_KEY', the second parameter must be number

then if first parameter is 'SECOND_KEY', the second parameter must be a boolean

This is my successful approach

then i want to do the same but in an array like this

and i have no idea to make the typescript to work in that situation

here is my helper code and the type

i thought it gives better information using screenshots visually like this

Here is the code in text

helpers/local-storage.ts

import AsyncStorage from "@react-native-async-storage/async-storage"

import { localStorageType } from '../references/types/local-storage'

async function getItem<keyType extends keyof localStorageType>(key: keyType) {
  return await AsyncStorage.getItem(key)
}

async function multiGet<keyType extends (keyof localStorageType)[]>(keys: keyType) {
  return await AsyncStorage.multiGet(keys)
}

async function setItem<keyType extends keyof localStorageType, pickedlocalStorageType extends localStorageType[keyType]>(key: keyType, savedData: pickedlocalStorageType) {
  await AsyncStorage.setItem(key, typeof savedData != 'string' ? JSON.stringify(savedData) : savedData)
}

async function multiSet()  {
  
}

multiSet([
  ['FIRST_KEY', 8],
  ['THIRD_KEY', 'test'],
])

async function removeItem<keyType extends keyof localStorageType>(key: keyType) {
  await AsyncStorage.removeItem(key)
}

async function multiRemove<keyType extends (keyof localStorageType)[]>(keys: keyType) {
  return await AsyncStorage.multiRemove(keys)
}

async function clear() {
  await AsyncStorage.clear()
}

export default {
  getItem,
  multiGet,
  setItem,
  multiSet,
  removeItem,
  multiRemove,
  clear
}

types/local-storage.ts

export type localStorageType = {
  FIRST_KEY: number,
  SECOND_KEY: boolean,
  THIRD_KEY: string
}

thanks

Don't post pictures of your code, but your code itself, please. — jperl
– jperl, Commented Mar 17, 2021 at 13:57

georg · Accepted Answer · 2021-03-17 15:11:37Z

2

Given a structure T, this type

type Pair<T> = {
    [K in keyof T]: [K, T[K]];
} [keyof T];

creates a Union of all possible key-value pairs (that is, ['FIRST',string] | ['SECOND',number] | etc...

Thus, the parameter of multiSet should be Array<Pair<localStorageType>>

Note that this type allows keys to be in arbitrary order and be repeated, so for example, this would be valid:

multiSet([
   ['SECOND_KEY', 'foo'],
   ['FIRST_KEY', 123],
   ['SECOND_KEY: 'bar'],
])

If you want each key to appear at most once, then pass an object (of type Partial<localStorageType>), not an array.

edited Mar 17, 2021 at 15:11

answered Mar 17, 2021 at 14:46

georg

216k57 gold badges324 silver badges401 bronze badges

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

3 Comments

Rey Over a year ago

I'm not experienced with typescript's union, so in my function I should declare it like this multiSet(pairings: Pair<localStorageType>[]) ? thanks it works awesome, but with a little problem when I typing comma , after the first element like 'FIRST_KEY', vs code doesn't show what type I should insert in the second element other than that it works as expected like in VSCode's Problems tab not give error when the second element is right, and give expected problem message when second element is wrong type

Rey Over a year ago

from what i see Array<Pair<localStorageType>> and Pair<localStorageType>[]) behave the same, both are works I just realized why the second element doesn't show data type suggestion, it's not like second parameter in a function that the IDE can show you the type haha, after understanding it for now it's not a problem

Rey Over a year ago

you right, i need to change it to an object if i want each key to appear at most once however this question is still count as a valid question and your answer too thanks for the insight, I will still upvoted and accept the answer, I wish i can double / triple / quadruple upvote it :)

Florent Arlandis · Accepted Answer · 2021-03-17 13:57:44Z

0

I would define two different types. Then use union type to differenciate them when you use them (as params of a function for example)

answered Mar 17, 2021 at 13:57

Florent Arlandis

9352 gold badges13 silver badges29 bronze badges

Collectives™ on Stack Overflow

TypeScript: How to conditional type in array?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related