TypeScript?

[micahstubbs]

👋 @Swizec

curious, what do you think about some TypeScript for d3blackbox?

it could be any one of:

1. converting this module to TS
2. leave this module JS, but include TS defs for those crazy TS people
3. publish type annotations to DefinitelyTyped, do nothing here

[micahstubbs]

I came up with these types for D3 Blackbox:

import { ReactComponentLike } from 'prop-types';
import { RefObject } from 'react';

export type D3RenderFunction = (
  anchor: RefObject<{}>,
  props: Props,
  state: State
) => void;

export interface Props {
  x: number;
  y: number;
  component?: ReactComponentLike;
}

export interface State {}

[Swizec]

I like these @micahstubbs . I'm pretty new to typescript still so not sure what the standard approach is. Do people usually export a Props and State type?

Might be tricky in this case because D3Render is a HOC so you should be allowed to pass any props/state that you like. Don't think the library should be strict about that 🤔

[micahstubbs]

yea, you probably want some solution with generic types since this is an HOC. should go search twitter or look at the source to see what you eventually came up with

[micahstubbs]

ah, ok, so it is pretty similar for now. https://github.com/Swizec/d3blackbox/blob/master/src/types.d.ts

import { ReactComponentLike } from "prop-types";

export type D3RenderFunction = (
    anchor: React.RefObject<unknown>,
    props: Props,
    state: State
) => void;

export type D3RenderHookFunction = (anchor: HTMLElement | null) => void;

export interface Props {
    x: number;
    y: number;
    component?: ReactComponentLike;
}

export interface State {
    [key: string]: any;
}