Question 412528 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to make TS check type any, when working with useState (React)?

import { useEffect, useState } from 'react'

export type TTOrigin = {
  name: 'Name1' | 'Name2'
  url: string
}

export function App() {
  const [data, setData] = useState<TTOrigin[]>([])

  useEffect(() => {
    fetch('https://swapi.dev/api/people/1/')
      .then((res) => res.json())
      .then((json) => setData(json))
      .catch((err) => console.log(err))
  }, [])

  return <h1>App</h1>
}

JSON has type any. But TS allows to put it in setData. Although in useState the type TTOrigin is specified

enter image description here

Tags:

2

Answers


  1. 0

    The rule in Typescript is that no type checks are done on code that involves a variable of type any.

    It basically means that for all such code parts, Typescript will behave as JavaScript and the developer is responsible again for doing type checks (is this really an array / string / number), content checks (is this string really only "Y" or "N"), property name checks and what not.

    The example code below runs and will show that the string variable a can suddenly contain a number 3:

    let a: string = "x"
let b: any = 3
a = b;
console.log(a)
console.log(typeof a)

    TS Playground: https://www.typescriptlang.org/play/?#code/FAGwpgLgBAhgXFAzhATgSwHYHMoF4oBEAHgaJFAEYIwYCeeUAzMDAxQNzADGA9hoj3AA6EDywAKGAEpufAcNESItAA5geAM1gzgwIA

    Login or Signup to reply.
  2. 0

    any is a special type in TypeScript because it is assignable to anything and can be assigned to anything. Simply put, any turns off type checks. That’s why you can pass json to setData() without compiler error.

    Regarding "Can we do a check for any?".

    Yes, you can using a conditional type. Since any will allow any assignment you can check if two unassignable values will be assignable when intersected with any. See jcalz’ great answer on the question Typescript check for the ‘any’ type. The following will raise a compiler error if json is of type any by returning unknown.

    setData(json as (0 extends (1 & typeof json) ? unknown : typeof json)

    Many people consider fetch unsafe because it returns Promise<any>. So you might also consider overriding the global definition with interface declaration merging.

    declare global {
  interface Body {
    json(): Promise<unknown>;
  }
}

    With the above declaration added, it will require you to assert the json value before assigning it.

    setData(json as TTOrigin[])
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search