DEV Community: Irakλi Safareli

non-string keys in object literal syntax JS

Irakλi Safareli — Mon, 13 Sep 2021 13:24:03 +0000


type KeyStore <T> =  {
    asKey: (value: T) => symbol;
    fromKey: (key: symbol) => [] | [T];
}

const mkKeyStore = <T>():KeyStore<T> => {
  const map = new Map<symbol,T>();
  const asKey = (value: T) : symbol =>  {
    const key = Symbol()
    map.set(key, value);
    return key
  }

  const fromKey = (key: symbol): [] | [T] => {
    if (map.has(key)) { 
      return [map.get(key)!]
    }
    return []
  }
  return {asKey, fromKey}
}


const mapMakerMaker = <K>(s:KeyStore<K>) => <T>(record:Record<Extract<K,string | number | symbol> | symbol, T>): Map<K,T> => {
  const stringEntires:[string, T][] = Object.entries<T>(record)
  const entires1 = stringEntires as any as [K,T][]

  const symbols = Object.getOwnPropertySymbols(record);
  const entries2 = symbols.flatMap(key => s.fromKey(key).map((v):[K,T] => [v, record[key]] ))
  const map = new Map<K,T>([
    ...entires1,
    ...entries2
  ])
  return map
}

const keyStore = mkKeyStore<string | ["required",string]>()
const required = (key:string) => keyStore.asKey(["required", key])
const mkMap = mapMakerMaker(keyStore);

const x = mkMap({
 [required("asd")]: "string",
 basd: "int"
})

console.log(x)
// Map (2) {"basd" => "int", ["required", "asd"] => "string"}

You could have invented lenses!

Irakλi Safareli — Mon, 14 Jun 2021 20:01:22 +0000

Imagine you have a JavaScript code like this:

const someObj = { tags: [], packages: [] };
function hasValue(key, item) {
  return someObj[key].indexOf(item) !== -1;
}

And you are porting this this into TypeScript. You are trying to follow best practices, like using strict mode. And don’t want to use any and unsafe casts. so you start adding types:

type SomeType = {
  tags: (string | number)[];
  packages: string[];
};
const someObj: SomeType = { tags: [], packages: [] };

This was easy, but then you hit one issue that you can’t really write type for hasValue without using some sort of casting. This is your best attempt:

function hasValue<K extends keyof SomeType>(key: K, item: SomeType[K]) {
  return someObj[key].indexOf(item) !== -1;
  //                   ^^^^
  // Argument of type 'SomeType[K]' is not assignable to parameter of type 'string'.
  //   Type '(string | number)[] | string[]' is not assignable to type 'string'.
  //     Type '(string | number)[]' is not assignable to type 'string'
  //
}

Unfortunately, looks like typescript can’t understand that type of item depends on the key and it's safe to do indexOf like this. You start tearing your hear if you still have any but don't quite know what to do. and then you get a great idea, instead of using property access using [...] why not pass some sort of getter function to the hasValue. You feel excited, and start to add more types, more code!

type Getter<Obj, Param> = (o: Obj) => Param;

function hasValue<Val>(getter: Getter<SomeType,Val[]>, item: Val) {
  return getter(someObj).indexOf(item) !== -1;
}

And boom! it works. But you have another similar function which also needs to set value. Yeah you guessed it right, we need some setter function

type Setter<Obj, Param> = (o: Obj, val: Param): void;

function resetIfHasValue<Val>(
  getter: Getter<SomeType,Val[]>,
  setter: Setter<SomeType,Val[]>,
  item: Val
) {
  if(hasValue(getter,val)){
    setter(someObj,[])
  }
}

Nice, but we would have to define getters and setters for each property and we would have to be passing them as 2 separate values to this function. Would be nicer if we created one type containing both:

type Modifier<Obj, Param>
  = Setter<Obj, Param>
  & Getter<Obj, Param>;

type Setter<Obj, Param> = {
  set(o: Obj, val: Param): void;
};

type Getter<Obj, Param> = {
  get(o: Obj): Param;
};

function resetIfHasValue<Val>(
  modifier: Modifier<SomeType,Val[]>,
  item: Val
) { ... }

We are onto something here and it starts to look nice. but we still would have to define all the modifiers by hand, but why should we, we are developers let’s write code that writes code for us :D :

const keyModifier = <Obj>() => <Key extends keyof Obj>(
  key: Key
): Modifier<Obj, Obj[Key]> => ({
  set(o: Obj, val: Obj[Key]) {
    o[key] = val;
  },
  get(o: Obj): Obj[Key] {
    return o[key];
  },
});

const tags = keyModifier<SomeType>()("tags")
const packages = keyModifier<SomeType>()("packages")

Now this will compile and work just fine:

resetIfHasValue(tags, 1)
resetIfHasValue(tags, "dd")
resetIfHasValue(packages, "asd")

You notice that Getters are composable as they are just pure functions, but the fact that setters are mutating values is not that nice. Tho, at this point we have invented quasi mutable lenses and If you really want you might invent actual purely functional lenses as well, but that’s for another day. Meanwhile you can take a look at an actual typescript lesses library from @gcanti / monocle-ts.

Pick, Omit and union types in TypeScript

Irakλi Safareli — Wed, 09 Jun 2021 17:52:53 +0000

You can play along in typescript playground

Built in Pick, Omit and other similar type operators don't quite support union types well.

One of the main issues is in keyof. By default when keyof is used with union type it will count only common keys. this is usually not what you want, for example:

type X =
  | { type: "string"; foo: string; komara: 1 }
  | { type: "number"; foo: number; kzxzdad: string }
  | { type: "undefined"; foo: undefined; ajjs: 1; asdad: 44 };

type Keys<T> = keyof T;

// type Keys_X = "type" | "foo"
type Keys_X = Keys<X>;

To fix this we want to use distributive conditional types:

type DistributiveKeys<T> = T extends unknown ? Keys<T> : never;

// type DistributiveKeys_X = "type" | "foo" | "komara" | "kzxzdad" | "ajjs" | "asdad"
type DistributiveKeys_X = DistributiveKeys<X>;

Now we have the foundation we need to rebuild distributive Pick and Omit:

type DistributivePick<T, K extends DistributiveKeys<T>> = T extends unknown
  ? Pick<T, Extract<keyof T, K>>
  : never;

export type DistributiveOmit<T, K extends DistributiveKeys<T>> =
  T extends unknown ? Omit<T, Extract<keyof T, K>> : never;

Tho I prefer to inline Omit and Pick which results in much nicer type shown in the IDE. Best way that I've found for doing this, is:

type DistributivePick<T, K extends DistributiveKeys<T>> = T extends unknown
  ? { [P in keyof Pick_<T, K>]: Pick_<T, K>[P] }
  : never;

type Pick_<T, K> = Pick<T, Extract<keyof T, K>>;

export type DistributiveOmit<T, K extends DistributiveKeys<T>> =
  T extends unknown ? { [P in keyof Omit_<T, K>]: Omit_<T, K>[P] } : never;

type Omit_<T, K> = Omit<T, Extract<keyof T, K>>;

To see this in action we can compare DistributivePick, a naive implementation of DistributivePick and Pick:

type DistributivePickNaive<T, K extends keyof T> = T extends unknown
  ? Pick<T, K>
  : never;

// type Test1Pick = {
//     foo: string | number | undefined;
//     type: "string" | "number" | "undefined";
// }
type Test1Pick = Pick<X, "foo" | "type">;

// type Test1Naive =
// | { type: "string"; foo: string; }
// | { type: "number"; foo: number; }
// | { type: "undefined"; foo: undefined; }
type Test1Naive = DistributivePickNaive<X, "foo" | "type">;

// type Test1 =
// | { type: "string"; foo: string; }
// | { type: "number"; foo: number; }
// | { type: "undefined"; foo: undefined; }
type Test1 = DistributivePick<X, "foo" | "type">;

type Test2Pick = Pick<X, "foo" | "type" | "kzxzdad">;
// ERROR             ~~~~~~~~~~~~~~~~~~~~~~~~~~
// Type '"type" | "foo" | "kzxzdad"' does not satisfy the constraint '"type" | "foo"'.
//   Type '"kzxzdad"' is not assignable to type '"type" | "foo"'.(2344)

type Test2Naive = DistributivePickNaive<X, "foo" | "type" | "kzxzdad">;
// ERROR                           ~~~~~~~~~~~~~~~~~~~~~~~~~~
// Type '"type" | "foo" | "kzxzdad"' does not satisfy the constraint '"type" | "foo"'.
//   Type '"kzxzdad"' is not assignable to type '"type" | "foo"'.(2344)

// type Test2 =
// | { type: "string"; foo: string; }
// | { type: "number"; foo: number; kzxzdad: string; }
// | { type: "undefined"; foo: undefined; }
type Test2 = DistributivePick<X, "foo" | "type" | "kzxzdad">;

Removing `{}` from result

Sometimes when using those DistributivePick and DistributiveOmit you might get type that contains ... | {} | ... and in some cases you might want to remove it.

type RemoveObject<T> = T extends unknown
  ? keyof T extends never
    ? never
    : T
  : never;

type Test3 =
  | {}
  | { az: string }
  | { foo: 12 }
  | {
      foo: string;
      __foo: string;
    };

// type Test3 = {
//     az: string;
// } | {
//     foo: 12;
// } | {
//     foo: string;
//     __foo: string;
// }
type Test4 = RemoveObject<Test3>;

Now let's apply this technique to DistributivePick and DistributiveOmit

export type DistributivePick<T, K extends DistributiveKeys<T>> =
  T extends unknown
    ? keyof Pick_<T, K> extends never
      ? never
      : { [P in keyof Pick_<T, K>]: Pick_<T, K>[P] }
    : never;

type Pick_<T, K> = Pick<T, Extract<keyof T, K>>;

export type DistributiveOmit<T, K extends DistributiveKeys<T>> =
  T extends unknown
    ? keyof Omit_<T, K> extends never
      ? never
      : { [P in keyof Omit_<T, K>]: Omit_<T, K>[P] }
    : never;

type Omit_<T, K> = Omit<T, Extract<keyof T, K>>;

// type Test5 = {
//     az: string;
// } | {
//     __foo: string;
// }
type Test6 = DistributiveOmit<Test3, "foo">;

// type Test5 = {
//     foo: 12;
// } | {
//     foo: string;
// }
type Test5 = DistributivePick2<Test3, "foo">;

Originally commented about this here.

DEV Community: Irakλi Safareli

non-string keys in object literal syntax JS

You could have invented lenses!

Pick, Omit and union types in TypeScript

Removing {} from result

Removing `{}` from result