Beginner's TypeScript #2

⭐ Working with Object Params ⭐

Consider this addTwoNumbers function:

export const addTwoNumbers = (a, b) => {
  return a + b
}

The function accepts a params object with first and second properties.

{
  first: 2,
  second: 4,
}

Similarly to the previous time, we get the "implicitly has an 'any' type" error.

We need to type params as an object with a key of first that is a number and a key of second that is also a number.

👉 Solutions:

1️⃣ Pass an Object Type Directly:

Perhaps the simplest solution is to pass an object type directly to the params argument.

Use curly braces to represent the object, then create a type inline:

export const addTwoNumbers = (params: { first: number; second: number }) => {
    ...
}

Note that TypeScript will understand if you use a comma between the first and second types like this:

params: {first: number, second: number}

2️⃣ Create a Named Type:

A useful technique is creating a named type. Use the type keyword, then provide a name and object similar to the previous solution.

In this case, we will name the type AddTowNumbersArgs and type first and second as number:

type AddTwoNumbersArgs = {
  first: number;
  second: number;
}

Now we can set the params to be typed as AddTowNumbersArgs:

export const addTwoNumbers = (params: AddTwoNumbersArgs) => {
  return params.first + params.second;
}

3️⃣ Create an Interface:

Interfaces can be used to represent objects (they can do other things, but we are only concerned with objects for now).

Using interface is similar to using type.

interface AddTwoNumbersArgs {
  first: number;
  second: number;
}

export const addTwoNumbers = (params: AddTwoNumbersArgs) => {
  return params.first + params.second;
}

👉 Choosing Inline vs. Type vs. Interface:

The inline technique used in the first solution will provide a verbose error that includes the full object type:

Argument of type 'number' is not assignable to a parameter of type'{first: number; second: number;}'

But generally speaking, we should be using aliases instead of going inline.

So when should you choose type and when should you choose interface?

It comes down to the syntax we prefer.

Technically, type can represent anything. It could be a number, a string, or a boolean.

TypeScript will give you an error if you try to use a string with interface:

// this won't work!
interface AddTwoNumbersArgs = string

When we are just getting started, it does not really matter if you choose type or interface.

Just be consistent!

---

I hope you found it useful. Thanks for reading. 🙏
Let's get connected! You can find me on:

• Medium: https://medium.com/@nhannguyendevjs/
• Dev: https://dev.to/nhannguyendevjs/
• Hashnode: https://nhannguyen.hashnode.dev/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (formerly Twitter): https://twitter.com/nhannguyendevjs/