Axios 和 Typescript：如何从 Object 分配类型变量

Question

I'm currently working on a Next js App and i'm using Axios to call my external API.

When i'm using Axios i can define a type to template the function like this:

export type User = {
  id: string
  username: string
  firstName: string
  lastName: string
}

const response = await axios.get<User>(route, config)

But if the API send me more properties on data, the user is not a User anymore is just an object.

For example:

Data received from the API

{
  id: "foo"
  username: "foo"
  firstName: "foo"
  lastName: "foo"
  email: "foo" // not in User
}

Then i will assign my user variable with the data

const user: User = response.data // should be a User 

Finally, if i log my user there is spare propeties like email

console.log(user)

// give me 

{
  id: "foo"
  username: "foo"
  firstName: "foo"
  lastName: "foo"
  email: "foo"
}

// and not 

{
  id: "foo"
  username: "foo"
  firstName: "foo"
  lastName: "foo"
}

So what is the interest of the template in the get function?

and

Is there a generic way to assign my typed variable with the object received and choose between fill my type with the value received and ignore spare propeties or fill my type with the value received and if there is one or more propeties in extra just return or throw an error?

Thanks

Answer 1

You can use type narrowing for this.

  const isUser = (candidate: any): candidate is User => {
      return (
          ('id' in candidate && typeof candidate.id === 'string') && 
          ('username' in candidate && typeof candidate.username === 'string') 
          // etc
      ) 
  }

if (!isUser(dataFromApi)) {
    throw new Error("Bad data structure")
}

After the isUser your code knows it is a User. In practice I like to use superstruct for this.