sqrtArrowFunction is defined using a variable declaration:

export const sqrtArrowFunction = (x: number): number => Math.sqrt(x);

TypeDoc is smart and documents sqrtArrowFunction as a function rather than a variable.

Make sure to export the options type when using this pattern. Otherwise, TypeDoc will not document the options.

The options type is written directly in the function definition.

The documentation site allows you to toggle between the different overloads of a function. The implementation signature of the overloaded function is not included in the documentation.

The documentation site allows you to toggle between the different overloads of a function. The implementation signature of the overloaded function is not included in the documentation.

<CardA variant="secondary">
    <h5>My Title</h5>
    <p>My content</p>
</CardA>

The props type is defined as a separate interface which must be exported!

export interface CardAProps {
    // ...
}

export function CardA({
    children,
    variant = "primary",
}: PropsWithChildren<CardAProps>): ReactElement {
    // ...
}

This is our recommended way to define React components as it makes your code more readable. The minor drawback is you must click the CardAProps link to see the component's props.

<CardB variant="secondary">
    <h5>My Title</h5>
    <p>My content</p>
</CardB>

The props type is written directly in the function definition:

export function CardB({
    children,
    variant = "primary",
}: PropsWithChildren<{
    variant: "primary" | "secondary" | "success" | "danger" | "light" | "dark";
}>): ReactElement {
    // ...
}

This can make the TypeDoc documentation a bit cleaner for very simple components, but it makes your code less readable.

A wrapper around ActionDialog that removes a lot of the boilerplate needed for dialogs that contain a form.

interface ExampleProps {
    onSuccess(responseData: number): Promise<void>
    onClose(): void
}

export function Example({
    onSuccess,
    onClose,
}: ExampleProps): ReactElement {
    const { onChildValidChange, allFieldsValid } = useFieldValidity()
    const [showValidation, setShowValidation] = useState(false)
    const vProps = { showValidation, onValidChange: onChildValidChange }

    const [myNumber, setMyNumber] = useState('')

    async function submit() {
        await api.product.performOperation()

        return {
            responseData: parseInt(myNumber),
        }
    }

    return (
        <EasyFormDialog
            title="Enter a Number"
            submitButtonText="Submit"
            formIsValid={allFieldsValid}
            showValidation={showValidation}
            onShowValidationChange={setShowValidation}
            onSubmit={submit}
            onSuccess={onSuccess}
            onClose={onClose}
        >
            <FormGroup label="My number">
                {(id) => (
                    <ValidatedInput
                        id={id}
                        name="myNumber"
                        validators={[Validators.required(), Validators.integer()]}
                        value={myNumber}
                        onChange={setMyNumber}
                        {...vProps}
                    />
                )}
            </FormGroup>
        </EasyFormDialog>
    )
}

All comments are parsed as Markdown. TypeDoc uses the Marked markdown parser to convert comments to HTML.

You can link to other classes, members or functions using double square brackets or an inline link tag. See the TypeDoc documentation for details.

Some inline code: npm install --save-dev typedoc

A TypeScript code block:

// A fabulous variable
const x: number | string = 12

See syntaxHighlightingShowcase for more code blocks.

• 🥚 Eggs
• 🍞 Bread
• 🧀 Swiss cheese

Rebellious subjects, enemies to peace, Profaners of this neighbour-stained steel,-- Will they not hear? What, ho! you men, you beasts, That quench the fire of your pernicious rage With purple fountains issuing from your veins

This requires the media option to be set.

If no language is specified, the code block is assumed to be TypeScript:

// A fabulous variable
const x: number | string = 12

You can specify the language at the start of your code block like this:

```rust

Use the tsx language to get JSX support:

function BasicComponent(): ReactElement {
    return <div>Test</div>
}

You might want to write code in the language your backend uses. Here's some Python:

for i in range(30):
    print(i + 1)

And some CSS:

.card {
    background-color: white;
    padding: 1rem;
    border: 1px solid lightgray;
}

If you don't want syntax highlighting, use the text language:

package.json
src/
    index.ts
    __tests__/
        index.test.ts

View the full list of supported languages. You can also get this list by running typedoc --help.