Type maskChar don't exist - TypeScript

[VictorNevola]

Hi everyone, I'm using typescript in my project, but prop "maskChar" don't exist in types. i'm try extends props in declare module of typeScript, but I could not.

Has anyone ever experienced this ?

[dmb-2222]

Hi. You can add maskChar type to types in modules, but this only local solution.

[danielblignaut]

I'd suggest also updating the docs as maskPlaceholder does not work, you have to use maskChar

[aacgn]

Hi @VictorNevola.

I had that same issue sometime ago, but I figure out that was just the version of @types/react-input-mask I was using. The lastest version of the package do not have the maskChar property declared indeed, if you wanna use it I do recomend to change the package to the 1.2.1 version.

I hope that works for you! 😉

[rgb2hsl]

Same for me, type definitions at DT are not correct. They miss some important props.

You can take typedefs drom DT and made your own custom d.ts and add it to tsconfig's typeRoots:

// Type definitions for react-input-mask 3.0
// Project: https://github.com/sanniassin/react-input-mask
// Definitions by: Alexandre Paré <https://github.com/apare>
//                 Dima Danylyuk <https://github.com/dima7a14>
//                 Lucas Rêgo <https://github.com/lucasraziel>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.9
// modified by ru-web-designer

declare module "react-input-mask" {
    import * as React from 'react';

    export interface Selection {
        start: number;
        end: number;
    }

    export interface InputState {
        value: string;
        selection: Selection | null;
    }

    export interface BeforeMaskedStateChangeStates {
        previousState: InputState;
        currentState: InputState;
        nextState: InputState;
    }

    export interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
        /**
         * Mask string. Format characters are:
         * * `9`: `0-9`
         * * `a`: `A-Z, a-z`
         * * `\*`: `A-Z, a-z, 0-9`
         *
         * Any character can be escaped with backslash, which usually will appear as double backslash in JS strings.
         * For example, German phone mask with unremoveable prefix +49 will look like `mask="+4\\9 99 999 99"` or `mask={"+4\\\\9 99 999 99"}`
         */
        mask: string | Array<(string | RegExp)>;
        maskChar: string | null;
        /**
         * Character to cover unfilled editable parts of mask. Default character is "_". If set to null, unfilled parts will be empty, like in ordinary input.
         */
        maskPlaceholder?: string | null;
        /**
         * Show mask even in empty input without focus.
         */
        alwaysShowMask?: boolean;
        /**
         * Use inputRef instead of ref if you need input node to manage focus, selection, etc.
         */
        inputRef?: React.Ref<HTMLInputElement>;
        /**
         * In case you need to implement more complex masking behavior, you can provide
         * beforeMaskedStateChange function to change masked value and cursor position
         * before it will be applied to the input.
         *
         * * previousState: Input state before change. Only defined on change event.
         * * currentState: Current raw input state. Not defined during component render.
         * * nextState: Input state with applied mask. Contains value and selection fields.
         */
        beforeMaskedStateChange?(states: BeforeMaskedStateChangeStates): InputState;
    }

    export class ReactInputMask extends React.Component<Props> {
    }

    export default ReactInputMask;
}

(don't forget to give a credit to DT contributors due to license)

I added the maskChar: string | null; string and that's all I need, but really, DO your own type definitions please, guys.

[Albuquerquess]

Show, @ru-web-designer, muito obrigado!

[msvargas]

I share update declaration file:

// Type definitions for react-input-mask 3.0
// Project: https://github.com/sanniassin/react-input-mask
// Definitions by: Alexandre Paré <https://github.com/apare>
//                 Dima Danylyuk <https://github.com/dima7a14>
//                 Lucas Rêgo <https://github.com/lucasraziel>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.9
// modified by ru-web-designer

declare module 'react-input-mask' {
    import * as React from 'react';

    export interface Selection {
        start: number;
        end: number;
    }

    export interface InputState {
        value: string;
        selection: Selection | null;
    }

    export interface BeforeMaskedStateChangeStates {
        previousState: InputState;
        currentState: InputState;
        nextState: InputState;
    }

    export interface MaskOptions {
        mask: string;
        maskChar: string | null;
        alwaysShowMask: boolean;
        formatChars: Record<string, any>;
        permanents: Array<number>;
    }

    export interface InputMaskProps extends React.InputHTMLAttributes<HTMLInputElement> {
        /**
         * Mask string. Format characters are:
         * * `9`: `0-9`
         * * `a`: `A-Z, a-z`
         * * `\*`: `A-Z, a-z, 0-9`
         *
         * Any character can be escaped with backslash, which usually will appear as double backslash in JS strings.
         * For example, German phone mask with unremoveable prefix +49 will look like `mask="+4\\9 99 999 99"` or `mask={"+4\\\\9 99 999 99"}`
         */
        mask: string | Array<string | RegExp>;
        maskChar?: string | null;
        formatChars?: Record<string, any>;
        /**
         * Character to cover unfilled editable parts of mask. Default character is "_". If set to null, unfilled parts will be empty, like in ordinary input.
         */
        maskPlaceholder?: string | null;
        /**
         * Show mask even in empty input without focus.
         */
        alwaysShowMask?: boolean;
        /**
         * Use inputRef instead of ref if you need input node to manage focus, selection, etc.
         */
        inputRef?: React.Ref<HTMLInputElement>;
        /**
         * In case you need to implement more complex masking behavior,
         * you can provide beforeMaskedValueChange function to change masked
         * value and cursor position before it will be applied to the input.
         * beforeMaskedValueChange receives following arguments:
         *
         * @param newState (object): New input state. Contains value and selection fields. selection is null on input blur or when function is called before input mount.
         * @example { value: '12/1_/____', selection: { start: 4, end: 4 } }
         *
         * @param oldState (object): Input state before change. Contains value and selection fields. selection is null on input focus or when function is called before input mount.
         * @param userInput (string): Raw entered or pasted string. null if user didn't enter anything (e.g. triggered by deletion or rerender due to props change).
         * @param maskOptions (object): Mask options.
         * @example {
         *  mask: '99/99/9999',
         *  maskChar: '_',
         *  alwaysShowMask: false,
         * formatChars: {
         *  '9': '[0-9]',
         *  'a': '[A-Za-z]',
         *  '*': '[A-Za-z0-9]'
         * },
         * permanents: [2, 5] // permanents is an array of indexes of the non-editable characters in the mask
         *  }
         */
        beforeMaskedValueChange?(
            newState: InputState,
            oldState: InputState,
            userInput: string | null,
            maskOptions: MaskOptions,
        ): InputState;
    }

    export class ReactInputMask extends React.Component<InputMaskProps> {}

    export default ReactInputMask;
}

[vladcorn]

Issue not fixed

[asalazarb]

The error is generated by typescript, not by javascript. Until the package is fixed, a workaround is to bypass typescript. To do that just add:

// @ts-ignore:next-line maskChar={null}

[Altroo]

Why this issue is closed ? the maskChar still not found there...

[yslpn]

Why this issue is closed ? the maskChar still not found there...

Problem fixed. Just update @types/react-input-mask