function 和 typescript 中的 es6 解构参数

Question

I still want to use destructuring because visually it helps in calling a function. But I have a problem doing it in a function params:

const t = ({id, name}: {number, string}) => `id: ${id} name:${name}`

another failed approach where I try to avoid putting all types of the param in one line but use an interface:

interface tParams {
    id: number,
    name: string
}
const t = ({id, name} as tParams) => `id: ${id} name:${name}`

Playground Link

Answer 1

You can either do it this way:

const t = ({id, name}: {id: number, name: string}) => `id: ${id} name:${name}`

or this way:

interface tParams {
    id: number,
    name: string
}
const t = ({id, name}: tParams) => `id: ${id} name:${name}`

Answer 2

Destructure works on any object type. So if your object definition is correct destructure will work. Here the person is on an object which consists id and name. So both function are correct

interface Person {
  id?:number;
  name: string;
}
const t = (person: Person) => `id: ${person.id} name:${person.name}`

// Equivalent to 

const t2 = ({id, name}: Person) => `id: ${id} name:${name}`

as is use for casting

class Employee {
  name:string;
  salary: number;
}
const emp = new Employee()

console.log(emp.id) //Error here since emp does not have id.
console.log((emp as Person).id) //NO error

Answer 3

Edit your answer to this should fix it:

const t = ({id, name}: {id: number, name: string}) => `id: ${id} name:${name}`

Answer 4

Hopefully, the stuff below helps and gives you an idea.

 const t = ({id, name}) =>  `id: ${id} name:${name}`;


 interface tParams {
     id: number,
     name: string
 }

 const t2 = ({id, name} : tParams) => `id: ${id} name:${name}`;

 //testing code below
 let tParamsObject: tParams = {
     id: 123,
     name: "James"
 };

 console.log (t(tParamsObject));
 console.log (t2(tParamsObject));