These type definitions for markdown-to-jsx don't seem to be generic enough, causing issues like the one mentioned below. For more details, refer to Why is type SFC<AnchorProps> not assignable to type SFC<{}>?
/Users/sunknudsen/Sites/sunknudsen/sunknudsen-website/src/Test.tsx
TypeScript error in /Users/sunknudsen/Sites/sunknudsen/sunknudsen-website/src/Test.tsx(40,13):
No overload matches this call.
Overload 1 of 2, '(props: Readonly<MarkdownProps>): Markdown', gave the following error.
Type 'FunctionComponent<AnchorProps>' is not assignable to type 'string | SFC<{}> | ComponentClass<{}, any>'.
Type 'FunctionComponent<AnchorProps>' is not assignable to type 'SFC<{}>'.
Types of parameters 'props' and 'props' are incompatible.
Type '{ children?: ReactNode; }' is not assignable to type 'PropsWithChildren<AnchorProps>'.
Type '{ children?: ReactNode; }' is missing the following properties from type 'AnchorProps': baseUrl, relativeUrl, href
Overload 2 of 2, '(props: MarkdownProps, context?: any): Markdown', gave the following error.
Type 'FunctionComponent<AnchorProps>' is not assignable to type 'string | SFC<{}> | ComponentClass<{}, any>'.
Type 'FunctionComponent<AnchorProps>' is not assignable to type 'SFC<{}>'. TS2769
38 | overrides: {
39 | a: {
> 40 | component: Anchor,
| ^
41 | props: {
42 | baseUrl: "/privacy-guides",
43 | relativeUrl: "",
Is there a way to make the ComponentOverride more generic? Understanding these type definitions can be challenging. I see this as an opportunity for learning for myself and others. I've spent the whole day trying to unravel it.
// Type definitions for markdown-to-jsx 6.9
// Project: https://probablyup.github.io/markdown-to-jsx
// Definitions by: Elizabeth Craig <https://github.com/ecraig12345>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
import * as React from 'react';
export default class Markdown extends React.Component<MarkdownProps> { }
export interface MarkdownProps extends React.HTMLAttributes<HTMLElement> {
options?: MarkdownOptions;
// React.ReactNode contains both null and undefined
// tslint:disable-next-line:no-null-undefined-union
children?: React.ReactNode;
}
export type ComponentOverride = string | React.ComponentClass | React.SFC | {
component: string | React.ComponentClass | React.SFC;
props?: any;
};
export interface MarkdownOptions {
/** Force all input strings to use block layout. */
forceBlock?: boolean;
/** Force all input strings to use inline layout. */
forceInline?: boolean;
/** Override representation of any HTML tag or custom component. */
overrides?: {
// As of 6.9.3, these tags are the only ones automatically generated by markdown-to-jsx.
a?: ComponentOverride;
br?: ComponentOverride;
button?: ComponentOverride;
code?: ComponentOverride;
del?: ComponentOverride;
div?: ComponentOverride;
em?: ComponentOverride;
footer?: ComponentOverride;
input?: ComponentOverride;
h1?: ComponentOverride;
h2?: ComponentOverride;
h3?: ComponentOverride;
h4?: ComponentOverride;
h5?: ComponentOverride;
h6?: ComponentOverride;
hr?: ComponentOverride;
img?: ComponentOverride;
ol?: ComponentOverride;
p?: ComponentOverride;
pre?: ComponentOverride;
span?: ComponentOverride;
strong?: ComponentOverride;
sub?: ComponentOverride;
sup?: ComponentOverride;
table?: ComponentOverride;
tbody?: ComponentOverride;
td?: ComponentOverride;
th?: ComponentOverride;
thead?: ComponentOverride;
tr?: ComponentOverride;
ul?: ComponentOverride;
/** In addition to HTML tags, you can specify a custom component name which can be used within markdown text. */
[key: string]: ComponentOverride | undefined;
};
/** Custom React.createElement behavior. */
createElement?: <P extends {}>(
type: React.SFC<P> | React.ComponentClass<P> | string,
// This typing is copied from React
// tslint:disable-next-line:no-null-undefined-union
props?: React.Attributes & P | null,
// tslint:disable-next-line:no-null-undefined-union
...children: React.ReactNode[]) => React.ReactElement<P>;
/** Custom function to generate an HTML id from headings. */
slugify?: (text: string) => string;
}
export function compiler(markdown: string, options?: MarkdownOptions): JSX.Element;