Búsqueda de sitios web

reactjs - Usando setInterval() en React con Typescript

Estoy intentando convertir un ejemplo de temporizador basado en React a Typescript.

La clase se parece un poco a esto:

export class Container extends
    Component<IProps, IState> {

    private timerID: NodeJS.Timeout | undefined;  // stops a warning in DidMount

    constructor(props: IRevovlingContainerProps) {
        super(props);
        this.state = { date: new Date() } as any;
    }

    componentDidMount() {
        this.timerID = setInterval(
            () => this.tick(),
            1000
        );
    }

    componentWillUnmount() {
        clearInterval(this.timerID);  // error here on this.timerID
    }

    // ...

En componentWillUnmount() this.timerID tiene un error:

[ts] El argumento de tipo 'Timeout | undefined' no se puede asignar al parámetro de tipo 'number | undefined'. El tipo 'Timeout' no se puede asignar al tipo 'number'. [2345]

He revisado index.d.ts, que declara clearInterval():

declare function clearInterval(intervalId: NodeJS.Timeout): void;

Así que parece que estoy pasando un argumento con el tipo correcto a clearInterval() y, sin embargo, espera un número. ¿Qué debería estar pasando, por favor?

Editar: si cambio mi declaración de timerID, entonces aparece un error en this.timerID en componentDidMount():

private timerID: number | undefined; 
Type 'Timeout' is not assignable to type 'number'.

Respuesta #1

NodeJS.Timeout está destinado a usarse cuando estás ejecutando en el entorno node. Dado que quieres usar las APIs del navegador, tendrás que usar number como tipo para el timerID.

Además, las funciones integradas no deberían resolver sus tipos a partir de las definiciones de tipo node, en tu caso. Si tienes @types/node instalado, por favor desinstálalo si no es necesario. Eso puede estar causando un conflicto con los tipos que necesitas usar.

Respuesta #2

React utiliza el setInterval estándar de JavaScript, que devuelve un número. Consulta setInterval en MDN

El intervalID devuelto es un valor numérico diferente de cero

Sin embargo, el tipo de retorno al que te refieres, NodeJS.Timeout, es el que devuelve el setInterval de Node. Eso es específico de Node.js.

Clase: Tiempo de espera:

"Este objeto se crea internamente y se devuelve desde setTimeout() y setInterval()"

No se puede asignar Timeout a un número significa que estás declarando el tipo esperado como Timeout de Node, y lo que realmente se recibe es un número.

Artículos relacionados