Are there type definitions for TypeScript for *.funcs.ts files

[SoftHai]

Hi,

creating a function with TypeScript will end in some type check "errors" for the parameters:

Are there TS type definitions for at least a few of the parameters (like dispatch, history, ...). Option and StateOfDispatch are types which has to be defined in the specific application, isn't it?

Actual you have to define the type definition by your own:

Or use a // @ts-ignore to ignore the errors.

[ipselon]

@SoftHai, thank you for the detailed explanation. I'll add some TS typings into the react-app-framework package in the next release.

As a workaround, I'd like to suggest using the following example:

Install @types/history before: yarn add @types/history -D -E

import { History } from 'history';
import { PrimaryButtonProps } from './PrimaryButton.comp';

type SetTextStateOptions = {
    stateByDispatch: PrimaryButtonProps;
    history: History;
};

// Specify this in the global index.d.ts
type DispatchFunction = (arg0: any) => void;

export const setText = (text: string, stateOptions: SetTextStateOptions) => (dispatch: DispatchFunction) => {
    const { stateByDispatch, history } = stateOptions;
    // ...
    
    // OR
    // const hist: History = stateOptions.history;
    // const stateByDispatch: PrimaryButtonProps = stateOptions.stateByDispatch;
    //...
};

[ipselon]

@SoftHai,

Option and StateOfDispatch are types which has to be defined in the specific application, isn't it?

Yes, that's correct.

[SoftHai]

Hi, cool. For the meanwhile your workaround will work. Feel free to close the issue or keep it open as reminder. As you like. Thanks

[ipselon]

@SoftHai, thank you. I'll keep this issue until I add this as an example to the User Guide.

[ipselon]

@SoftHai,

It seems that my example is not correct. Please consider my following example for TS types in function.

global.d.ts

import { History } from 'history';

export type DispatchFunction<T> = (arg0: T) => void;

export interface StateOptions<T> {
    stateByDispatch: T;
    history: History;
}

functionExamples.funcs.ts

import { StateOptions, DispatchFunction } from "typings/global";
import { PrimaryButtonProps } from './PrimaryButton.comp';

interface StateByDispatch {
    props?: PrimaryButtonProps;
}

interface DispatchOptions extends StateByDispatch {
    // here we already have output fields from StateByDispatch
    // add additional fields for the dispatch output
}

export const setText = (textValue: string, stateOptions: StateOptions<StateByDispatch>) => (dispatch: DispatchFunction<DispatchOptions>) => {
    const { stateByDispatch, history } = stateOptions;
    if (stateByDispatch) {
        const {props} = stateByDispatch;
        dispatch({props: {...props, text: textValue}});
    }
};

How it is used on the flow: