Question 241482 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Difference in syntax in typescript

I have started learning typescript and came across defining the type of an argument in a different way than usual.

function postThread({userId}:{userId:string}) {
  // code to be executed
}

instead of this

function postThread({userId}:string) {
  // code to be executed
}

why can’t we directly assign the type to it?

Tags:

3

Answers


  1. 0

    Let’s break down the differences:

    function postThread({userId}:{userId:string}) {
  // code to be executed
}

    In this case, you’re using object destructuring in the function parameter. The function postThread expects a single argument, which should be an object with a property named userId of type string.

    function postThread({userId}:string) {
  // code to be executed
}

    In this version, you’re directly specifying that the function expects a single argument of type string. This is not using object destructuring, but rather just declaring the expected type of the parameter. However, this seems to be incorrect, as you’re trying to destructure an object, but the provided type is just string.

    Login or Signup to reply.
  2. 0

    In your first example you explicitly add a type to your object parameter which is destructured immediately .

    function postThread({userId}:{userId:string}) { // destructuring
  // code to be executed
}

    Your second example produces a compiler error. Again, you destructure a property userId of an object parameter which has a explicit type of string. However, a primitive string does not have a property userId.

    function postThread({userId}: string) {
  //                 ~~~~~~
  // Property 'userId' does not exist on type 'String'.
}

    Unless you actually defined userId on the String interface:

    interface String {
  userId: string;
}

    TypeScript Playground

    Login or Signup to reply.
  3. 0 
    function postThread({ userId }: { userId: string }) {
  console.log(userId) // logs a string
}

postThread({ userId: 'abc123' })

    This declares an object type { userId: string }, and destructures the userId property from the parameter with that object type.

    Note how when you call the function, you pass it an object with a userId property.

    This is basically equivalent to:

    function postThread(props: { userId: string }) {
  const userId = props.userId
  console.log(userId) // logs a string
}

postThread({ userId: 'abc123' })

    function postThread({ userId }: string) {
  // will not compile
}

    This is not valid. { userId }: string attempts to access the userId property of a string, which won’t work. This will raise a type error.

    A common alternative, and what your second snippet probably meant to show, is this:

    function postThread(userId: string) {
  console.log(userId) // logs a string
}

postThread('abc123')

    In this example, the function accepts a simple string parameter.

    Note how when you call the function, you pass it a string, and not an object.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search