Forem: tmhao2005

Interesting TypeScript issue

tmhao2005 — Fri, 16 Aug 2024 17:24:09 +0000

I recently ran into the issue as following:

const actions = {
  call: (num: number) => {
    // todo
  },
  speak: (text: string) => {
    // todo
  },
}

// I'm going to create a function which can pass the action 
// and its corresponding argument as following:
doThings('call', 911);
doThings('speak', 'hello');

// so here the simple implemenatation
type Actions = typeof actions;
function doThings<T extends keyof Actions>(p0: T, ...[p1]: Parameters<Actions[T]>) {
  const action = actions[p0];
  // error!
  // Argument of type 'string | number' is not assignable to parameter of type 'never'.
  action(p1);
}

As we can see, it has a typing issue as the comment. I quickly searched for solution, then I ended up following up this issue which was open long ago https://github.com/microsoft/TypeScript/issues/30581.

Looks like we haven't yet had a good solution for the issue though. I eventually came up with a solution after reading a few solutions/hackarounds from comments as following:

// create arguments map
type ArgsMap = {
  call: [num: number, message: string];
  speak: [message: string];
};

// this is a key where we have to define the type for the object
const actions: {[K in keyof ArgsMap]: (...p: ArgsMap[K]) => void} = {
  call: (num, message) => {
    // todo
  },
  speak: (text) => {
    // todo
  },
}
// eventually the function signature 
function getAcion<K extends keyof ArgsMap>(name: K, ...p: ArgsMap[K]) {
  const action = actions[name]
  // works!
  action(...p)
}

TypeScript useful advanced types

tmhao2005 — Tue, 29 Nov 2022 04:13:22 +0000

As the title says, here are all the useful types that I'm using every day or create new types on top of them. I thought it might be handy for some people so I just share here and this will be updated moving forward.

More resources

Overloading

type Foo = (a: string) => string;
type Bar = (a: number) => number;

// it becomes overloading
declare let fn: Foo & Bar;

const x = fn(2); // nubmer
const y = fn("hello"); // string

Strict union type


type A<T> = {
    isMulti: false;
    foo: string;
    onChange: (value: T) => any;
};
type B<T> = {
    isMulti: true;
    foo: number;
    onChange: (value: T[]) => any;
};
type C<T> = {
    foo: string;
    onChange: (value: T) => any;
};

// NOTE: this one only works well in case of `strict` mode on
// https://stackoverflow.com/questions/65805600/struggling-with-building-a-type-in-ts#answer-65805753
type UnionKeys<T> = T extends T ? keyof T : never;
type StrictUnionHelper<T, TAll> = T extends any
    ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, never>>
    : never;
type StrictUnion<T> = StrictUnionHelper<T, T>;

type Unions<T> = StrictUnion<A<T> | B<T> | C<T>>;

type Options<T = any> = {
    options: T[];
} & Unions<T>;

interface Option {
    value: string;
}

const a: Options<Option> = {
    options: [
        {
            value: "abc"
        }
    ],
    // trick is here
    onChange: <T extends Option>(value: T) => {
        return value;
    }
};

// test
if (a.isMulti) {
    a.onChange();
}
// unknown
const b = {
    // ...
} as Unions<Option>;

if (b.isMulti) {
    b.foo; // number
} else {
    b.foo; // string
}

Loop through an tuple array type

Link to here

type Foo = [
  {
    id: number;
    items: [
  }
]
type ReduceItems<Arr extends ReadonlyArray<any>, Result extends any[] = []> = Arr extends []
    ? Result
    : Arr extends [infer H]
    ? H extends {items: ReadonlyArray<MenuItem>}
        ? [...Result, ...H["items"]]
        : never
    : Arr extends readonly [infer H, ...infer Tail]
    ? Tail extends ReadonlyArray<any>
        ? H extends {items: ReadonlyArray<MenuItem>}
            ? ReduceItems<Tail, [...Result, ...H["items"]]>
            : never
        : never
    : never;

Deep required

type DeepRequired<T> = {
  [K in keyof T]: Required<DeepRequired<T[K]>>;
};

Make some props become required:

type RequiredProps<T extends object, K extends keyof T = keyof T> = Omit<T, K> & Required<Pick<T, K>>;

Make some props become optional

type Optional<T, K extends keyof T> = Omit<T, K> & Partial<T>;

Recursively partial type

type RecursivePartial<T> = {
  [P in keyof T]?:
    T[P] extends (infer U)[] ? RecursivePartial<U>[] :
    T[P] extends object | undefined ? RecursivePartial<T[P]> :
    T[P];
};

Array.prototype.map returns as const tuple:

function map<T extends any[]>(
  // arr: T
  arr: readonly [...T]
): [...{ [I in keyof T]: `foo${T[I]}`}] {
  // 
  return arr.map(elem => `foo${elem}`) as any;
}

const arr = ['x', 'y'] as const satisfies readonly ('x' | 'y' | 'z')[]
const result = map(arr) // ['foox', 'fooy']

Keep array `as const` with suggestion enabled:

type FooBar = "foo" | "bar";
// `foo` now has type as `readonly ["foo", "bar"]`
const foo = ["foo", "bar"] as const satisfies readonly FooBar[];

Get all paths for all props:

type NestedProps<T extends object> = {
    [P in keyof T & (string | number)]: T[P] extends Date
        ? `${P}`
        : T[P] extends Record<string, unknown>
        ? `${P}` | `${P}.${NestedProps<T[P]>}`
        : `${P}`;
}[keyof T & (string | number)];

Check an arbitrary property exits in an generic object:

function hasOwnProperty<X extends Record<string, any>, Y extends PropertyKey>(
    obj: X,
    prop: Y
): obj is X & Record<Y, any> {
    return prop in obj;
}

Split string with space as smaller strings

type Parts<Path> = Path extends `${infer PartA} ${infer PartB}` ? PartA | Parts<PartB> : Path;
// Test
type Test0 = Parts<'a b c'> // 'a' | 'b' | 'c'

Is union type

type IsUnion<T, U extends T = T> = T extends unknown ? ([U] extends [T] ? false : true) : false;

Is never type

type IsNever<T> = [T] extends [never] ? true : false;
// Test
type Test0 = IsNever<never> // true;
type Test0 = IsNever<string> // false;

Is type an `any`?

type IsAny<T> = 0 extends 1 & T ? true : T;
// Test
type Test0 = IsAny<any> // true;
type Test1 = IsAny<string> // string;

Is an empty object

type IsEmptyObject<T extends Record<PropertyKey, unknown>> =
  [keyof T] extends [never]
    ? true
    : false;
// Test
type Test0 = IsEmptyObject<{}> // true
type Test1 = IsEmptyObject<{foo: string}> // false
type Test2 = IsEmptyObject<{[K: string]: any}> // false

Known keys

type KnownKeys<T> = {
  [K in keyof T as string extends K ? never : number extends K ? never : symbol extends K ? never : K]: T[K];
}

// Test
type Test0 = KnownKeys<
  {foo: string; [K: string]: any} // index signature 
>; // {foo: string}

Flatten object keys

type FlattenObjectKeys<
  T extends Record<string, unknown>,
  Key = keyof T
> = Key extends string
  ? T[Key] extends Record<string, unknown>
    ? `${Key}.${FlattenObjectKeys<T[Key]>}`
    : `${Key}`
  : never

// Test
type Test0 = FlattenObjectKeys<{foo: {bar: string}}> // foo | foo.bar

Deep exclude

type DeepExclude<T, U> = T extends U
  ? never
  : T extends object
  ? {
      [K in keyof T]: DeepExclude<T[K], U>;
    }
  : T;
// Test
type Test0 = DeepExclude<
  {foo: string, bar: number}, 
  {foo: string}
> // {bar: number}

Omit never values

type OmitNever<T> = Omit<
  T,
  {
    [K in keyof T]-?: IsNever<T[K]> extends true ? K : never;
  }[keyof T]
>;

// Test
type Test0 = OmitNever<{foo: string; bar: never}> // {foo: string}

Deep omit keys

type OmitKeysRecursively<T, K extends PropertyKey> = Omit<
  {
    [P in keyof T]: T[P] extends object ? OmitKeysRecursively<T[P], K> : T[P];
  },
  K
>;
// Test
type Test0 = OmitKeysRecursively<
  {foo: string; bar: {baz: number, biz: boolean}},
  'foo' | 'baz'
> // {foo: string; bar: {biz: boolean}}

Pick keys which is a bit complicated than omit keys

// helper helps remove keys with `never` as value
type OmitNever<T> = Omit<
  T,
  {
    [K in keyof T]-?: Pick<T, K> extends Partial<Record<K, undefined>> ? K : never;
  }[keyof T]
>;

type PickRecursively<T extends object, K extends PropertyKey> = OmitNever<{
  [P in keyof T]: P extends K
    ? T[P]
    : T[P] extends infer O
    ? O extends object
      ? PickRecursively<O, K>
      : never
    : never;
}> extends infer O
  ? { [P in keyof O]: O[P] }
  : never;

// Test
type TestP0 = PickRecursively<
  { foo: string; bar: { baz: string; bix: string } }, 
  'foo' | 'bar'
>; // {foo: string; bar: {baz: string}}

A type of mapping

export enum Group {
  FOO = 'foo',
  BAR = 'bar',
}

interface Mapping {
  [Group.FOO]: { fooString: string; fooNumber: number };
  [Group.BAR]: { barString: string; barDate: Date; notFoo: string };
}

type Values<T> = T[keyof T]
type ParamAsArray<T> = Values<{
  [P in keyof T]: [P, T[P]]
}>

function method(...[p0, p1]: ParamAsArray<Mapping>) {...}
// call the method as normal
method(Group.FOO, {...});

An another example of checking others props type based on an particular prop:

type Values<T> = T[keyof T];
type Props = Values<{
  [P in keyof JSX.IntrinsicElements]: { as: P } & {
    [K in keyof JSX.IntrinsicElements[P]]: JSX.IntrinsicElements[P][K];
  };
}>;

// Do not spread the props directly on parameter
// like: `{as, ...rest}`
// since TS is now not dynamic enough to update
// `rest` with correct type based on `as`
// but `rest` will contain all common props
const BaseComponent: React.FC<Props> = (props) => {
  if (props.as === 'a') {
    const { as, ...others } = props;
    console.log(others.href) // ok
  }
};

Typescript override typing for `Object.keys`

tmhao2005 — Fri, 23 Sep 2022 07:52:12 +0000

If you guys work with Object in Typescript long enough, we all are aware of that one of the most used methods are Object.keys always returning a string[] which should return a list of union types of keys.

Here's how the Object.keys is defined within Typescript's built-in types, you can find it in lib.es5.d.ts:

interface ObjectConstructor {
    // other stuff

    /**
     * Returns the names of the enumerable string properties and methods of an object.
     * @param o Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
     */
    keys(o: object): string[];
}

This is definitely an annoying issue which should be fixed probably later on. So util then, there's a solution for it :)

First of all, we define a proper type which returns a list of keys of a generic object:

// some util types
type IsAny<T> = 0 extends 1 & T ? true : T;
type KnownKeys<T> = {
    [K in keyof T as string extends K ? never : number extends K ? never : symbol extends K ? never : K]: T[K];
}
type IsEmptyObject<T extends Record<PropertyKey, unknown>> = [keyof T] extends [never]
    ? true
    : false;

type ObjectKeys<T> = IsAny<T> extends true
    ? string[]
    : T extends object
    ? IsEmptyObject<KnownKeys<T>> extends true
        ? string[]
        : (keyof KnownKeys<T>)[]
    : T extends number
    ? []
    : T extends Array<any> | string
    ? string[]
    : never;

interface ObjectConstructor {
    keys<T>(o: T): ObjectKeys<T>;
}

// testing
type Test1 = ObjectKeys<{foo: string, bar: string }> // Array<"foo" | "bar">
type Test2 = ObjectKeys<['']> // string[]
type Test3 = ObjectKeys<"foo">  // string[]
type Test4 = ObjectKeys<Record<PropertyKey, any>> // string[]

Override the built-in ObjectConstructor interface. Let's define object.d.ts in your repo, normally I place the extra typing files under at typings dir. So in my case it's going to be here typings/object.d.ts:

// typings/object.d.ts
type IsAny<T> = 0 extends 1 & T ? true : T;
type KnownKeys<T> = {
    [K in keyof T as string extends K ? never : number extends K ? never : symbol extends K ? never : K]: T[K];
}
type IsEmptyObject<T extends Record<PropertyKey, unknown>> = [keyof T] extends [never]
    ? true
    : false;

type ObjectKeys<T> = IsAny<T> extends true
    ? string[]
    : T extends object
    ? IsEmptyObject<KnownKeys<T>> extends true
        ? string[]
        : (keyof KnownKeys<T>)[]
    : T extends number
    ? []
    : T extends Array<any> | string
    ? string[]
    : never;

// interface can be merged together
interface ObjectConstructor {
  keys<T>(o: T): ObjectKeys<T>;
}

Finally, include all defined typing files under typings to the configuration tsconfig.json:

// tsconfig.json
{
  // ...
  include: [..., "typings"]
}

Understand "esModuleInterop" option in Typescript

tmhao2005 — Thu, 01 Apr 2021 02:46:58 +0000

Here are couple of cases that I have tested how the option esModuleInterop of Typescript compiler (tsc) works.

Each test will have 2 different imports (one is default import and an namespace import) and we'll check the generated code.

#1

{ esModuleInterop: false } with tsc

import * as foo from "foo";
import bar from "bar";

console.log(foo, bar)

// JS

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var foo = require("foo");
var bar = require("bar");
// I'm not sure why (`.default`), but most of `commonjs` modules 
// won't export this value which causes void 0
console.log(foo, bar.default);

#2

{ esModuleInterop: true } with tsc:

import * as foo from "foo";
import bar from "bar";

console.log(foo, bar)

// JS
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};

Object.defineProperty(exports, "__esModule", { value: true });
var foo = __importStar(require("foo"));
var bar = __importDefault(require("bar"));

// In this case, `foo` won't work if `foo` is `commonjs` which is a single export: 
// `module.exports = {}` 
// then it would return { default: {} }
console.log(foo, bar.default);

Finally, we have an issue with `webpack`:

Let's say to have module foo which is quite common pattern:

- lib
-- index.cjs.js
-- index.esm.js

index.cjs.js

module.exports = {}

index.esm.js

export default {}

Then import:

import * as foo from "foo"

console.log(foo)

with foo's package.json:

{
  main: './lib/index.cjs.js',
  module: './lib/index.esm.js'
}

would result in in webpack:

var foo = __webpack_require__("./node_modules/foo/lib/index.esm.js");

console.log(foo) // { default: {...} }

// But with `cjs`, it works

var foo = __webpack_require__("./node_modules/foo/lib/index.cjs.js");

console.log(foo) // {...}

If webpack takes es2015+ module, it will transform to harmony module.

/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony default export */ __webpack_exports__["default"] = (Bar);

__webpack_require__ with esm:

// foo.js
export default 1;

// result
__webpack_require__('foo.js'); // { default: 1 }

__webpack_require__ with cjs:

// foo.js
module.exports = 1;

// result
__webpack_require__('foo.js'); // 1

esModuleInterop option won't affect to es2015+ module.

Tip! Mock jsdom location with Jest

tmhao2005 — Tue, 27 Oct 2020 09:18:23 +0000

Problem

In some cases, we have to call assign method of window.location object in order to redirect to a different url as below:

window.location.assign = '/home';

You would receive an warning like below in case of jest running through above code:

Error: Not implemented: navigation (except hash changes)

What is the solution here?

We obviously think about how to mock the location, right?

Here is the easiest way to do that:

const mockWinAssign = jest.fn();

const oldWindowLocation = window.location;

beforeAll(() => {
  delete window.location;
  window.location = Object.defineProperties(
    {},
    {
      ...Object.getOwnPropertyDescriptors(oldWindowLocation),
      assign: {
        configurable: true,
        value: mockWinAssign,
      },
    },
  )
})

afterAll(() => {
  // restore location
  window.location = oldWindowLocation;
})

test('your test to call location method', () => {
  // do things

  // finally
  expect(mockWinAssign).toHaveBeenCalledWith('/home');
})

webpack compiles node_modules

tmhao2005 — Fri, 23 Oct 2020 13:53:22 +0000

I found out an interesting use case as we import a module (just call it foo) which supports both node and browser. But with the same import of foo, webpack would end up a different result in the browser. Let's have a look at the following example:

Firstly, assume to have a package foo like below:

- dist
-- index.js (cjs)
-- index.module.js (esm - mostly for browser)

The content of foo would look like in both modules:

// dist/index.js 
// the content can be `cjs` or `umd`, for example:
module.exports = 1;

// dist/index.module.js
export default 1;

Next, write a simple snippet to import foo in cjs style:

const foo = require('foo');

console.log(foo);

Then run on Node:

const foo = require('foo');

// since above line of code ref to dist/index.js so will work as expected
console.log(foo); // 1

Finally, run on browser via webpack after having been transformed:

// webpack auto select `esm` module by default
var foo = __webpack_require__("./node_modules/foo/index.module.js");

// __webpack_require__ will turn the foo object to be like: 
// { default: 1 }

// As a result of that, this code won't work as expected
console.log(foo); // undefined

To sum up, we have to be careful with the package (foo) which supports running on node/browser to avoid unexpected result as above. As I know most of packages are now being implemented that way. If you write code in Typescript or Esnext style, you can enable the configuration { esModuleInterop: true } to import helper to sort out the issue in case of Typescript.

Thanks for reading!

Fix "Jest encountered an unexpected token" with "create-react-app"

tmhao2005 — Sun, 06 Sep 2020 15:58:57 +0000

Here is one of the most popular question which is related to testing with jest for repo setup with create-react-app as I've seen in stackoverflow community. So I decided to come with a post on this with a hope to help more people via channel.

The problem is most likely as we install a 3rd party package which is untranspiled. By default Jest will skip to transform any packages in the node_modules.

Here are a few ways I have seen, assume the package is being used @fullcalendar:

Use a customized package react app customize-cra:

const { override, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  babelInclude([
    path.resolve('src'), 
    path.resolve('node_modules/@fullcalendar')
  ]),
)

Use the customized parameter passing to jest via react script

react-scripts test --transformIgnorePatterns \"node_modules/(?!@fullcalendar)/\"",

Of course most of above ways are to try to transform that package again but exclude the others in node_modules by setting transformIgnorePatterns. Unfortunately, the above 2 ways don't work as expected.

What is the best approach to fix?

The easiest way to fix this one is of course also using the same option transformIgnorePatterns but we just simply put in the package.json file under jest area since create-react-app still uses these options to override their default options:

jest": {
  "transformIgnorePatterns": [
    "/node_modules/(?!@fullcalendar)"
  ]
},

Hopefully, it would help!

How to test JSX directly on browsers without any building steps

tmhao2005 — Sun, 06 Sep 2020 14:57:27 +0000

Is there anytime you wonder that we have a React component written in ES6 style and you want to test it straight away on the browser without configuring babel to transform JSX and then configure webpack to bundle things?

If you have the same interest, here is the few steps helping you out.

First of all, we create the test website directory with the following structure:

website
- index.html
- index.js
- Foo.js

with Foo.js is a simple component with following content:


export default () => <div>Foo</div>;

index.js is all about importing and rendering:

import Foo from "./foo.js"; // can also use `foo`

ReactDOM.render(<Foo />, document.getElementById("root"));

index.html this is the most important

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script
      src="https://unpkg.com/react@16/umd/react.production.min.js"
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
    ></script>
  </head>

  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-es2015-modules-umd"
      type="text/babel"
      src="./foo.js"
    ></script>
    <script
      data-plugins="transform-es2015-modules-umd"
      type="text/babel"
      src="./index.js"
    ></script>
  </body>
</html>

There are couple of important things here:

We must include babel script for transpiling JSX and React + ReactDOM via CDN:

https://unpkg.com/babel-standalone@6/babel.min.js
https://unpkg.com/react@16/umd/react.production.min.js
https://unpkg.com/react-dom@16/umd/react-dom.production.min.js

Next, we register a module by wrapping in <script type="text/babel" />, plus in order to support import from another module we have to use plugin transform-es2015-modules-umd by adding more data-plugins="transform-es2015-modules-umd". In this case we register 2 modules foo and index respectively so we can import foo module in index module.

That's it!