Here's a different implementation of the 

Similarly to last time, we're getting the "implicitly has an 'any' type" error.

Not all of the functions you write will take primitive types. When you need to pass objects as parameters, there are a few different ways to type them properly.

There are multiple solutions to this problem.

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

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

Note that TypeScript will understand if you use a comma between the 

However, Prettier will correct it to use semicolons instead.

A useful technique is creating a named type. Use the 

 keyword, then provide a name and object similar to the previous solution.

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

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

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

. It could be a number, or a string, or a boolean.

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

When you're just getting started, it doesn't really matter if you choose 

Add Types to Object Params

 There are multiple solutions to this problem. The first one, and maybe one of the simplest to understand, is you can parse in an object type here direct to the params argument. Use these curly braces to represent and object, and then you create the type in line there.

 You notice that TypeScript will understand if you use a comma in this situation, but you mostly, and Prettier will correct it, so you use semicolons, instead.

 This is the first solution. The second solution is by creating a type here. We create a named type, give a type a name, which is pretty useful. We create it with this equals sign here. We say...basically parse the same thing as we had before, just inside a type there.

 If I wanted to convert this to a type, I'll just create a new type here and say NewType and say type NewType = and just paste in what I copied there.

 The third solution is to use an interface. An interface is pretty similar to type, but interfaces can only be used to represent objects and a couple of other things, but mostly objects in this basic course.

 You may be wondering why would you choose type over interface? Type can technically represent anything. Type could be a number. It can be a string. It can be boolean. It can be absolutely anything, whereas an interface, if you try to say interface = string, it's going to yell at you. It's not going to let you. It's not very fun.

 Why would you use interface over type? There used to be a lot of confusion over this. It's a question I get asked a lot.

 To be honest, whatever syntax you prefer, you should choose and just stay consistent. Either one is going to give you...

 You'll notice, too, if you...In this first solution, if I refactor this back to how it was, I'm actually going to get a more verbose error message if I do this rather than the other way. If I mess this up, and if I say...Let's say I remove one of these and we just add in a random number instead.

 Then, it's going to say "Argument of type 'number' is not assignable to parameter of type..." and it gives it the literal value here, so it's spelled out.

 Whereas if I do it on this one, where it has a type alias assigned to it and I go blah, blah, blah, blah, blah, blah, then it's going to say, "Argument of type 'number' is not assignable to type 'AddTwoNumbers Args'", which is better and a bit more readable, a bit more understandable.

 In general, you should be extracting these out into their own aliases, but it doesn't really matter whether you use type or interface, especially when you're first starting out.

Working with Object Params

 We've got a similar problem here to what we had last time. We have a function argument which is giving us "Parameter 'params' implicitly has an 'any' type," except it's a little bit different because we've still got our addTwoNumbers function, except that we're parsing them in as an object into our function.

 We somehow need to work out how to type this params as an object type with a key of first, which is a number and a key of second, which is also a number. That's your challenge.

Get hands-on interactive TypeScript practice and learn the foundational knowledge and skills you need to become a TypeScript Wizard.

Learn to type variables, functions, and errors

Become familiar with the TypeScript documentation

Gain experience with modern TypeScript tooling

, and see why TypeScript’s an essential tool for modern web developers!

This Beginner’s TypeScript tutorial is split into several exercises. Each features a 

 that encourages you to take an active, exploratory learning approach to finding a 

Give it a go to see if it solves the problem (there may be more than one solution!)

Whether you succeed or get stuck, watch & read the 

You’ll need a working understanding of JavaScript.

the Beginner’s TypeScript Tutorial repo

, and use npm or yarn to install dependencies.

, you can work in a full VS Code coding environment running in your browser.

Free interactive video tutorial that will help you get started with TypeScript.

First thing’s first: dealing with the implicit ‘any’ type error.

Add type annotations to the function arguments

The Implicit ‘Any’ Type Error

TypeScript can’t tell by itself if your code will still work when object properties are missing. For these situations, you need to specify which are optional.

Denote an Optional Property

Set Properties as Optional

Just as we saw with object properties, function parameters can be set as optional as well.

Mark a Function Parameter as Optional

Optional Parameters

Assigning types to variables allows TypeScript to provide more useful error messages on the lines where they occur.

Make a Variable Conform to an Interface

Assigning Types to Variables

TypeScript allows us to constrain a property’s value to one of a set number of things. For example, a medal that could only be gold, silver, or bronze.

Delineate Types a Value Can Be

Constraining Value Types

Arrays are one of the most common data structures in development. In this lesson, find out how they are represented in TypeScript.

Two Ways to Represent Arrays

Working with Arrays

Being strict about what is returned from your functions ensures that your code is safe on the inside as well as the outside.

Annotate a Function to Specify its Return Type

Function Return Type Annotations

Almost every web application involves making API calls. But how can we tell TypeScript what to expect when we’re expecting data?

Update Return Type Annotations for Async Functions

Typing Promises and Async Requests

One of the most crucial TypeScript concepts to understand is how type arguments work with certain functions and constructors.

Pass a Type Argument to Restrict Potential Types

Passing Type Arguments

Seeing “index” in a type error message usually refers to the key of an object. In this lesson are a few techniques for properly typing dynamic object keys.

Techniques for Typing Dynamic Object Keys

Assigning Dynamic Keys to an Object

TypeScript offers powerful features for narrowing down branches when working with third party APIs or functions that support data in different forms.

Change Function Returns Based on Type

Narrowing Down Union Types

When using a try-catch in TypeScript, it’s important that you type the error appropriately. There are a few different techniques to accomplish this.

Techniques for Coercing an Unknown Type

Typing Errors in a Try-Catch

Interfaces can inherit properties from other interfaces. This allows us to DRY out our code and have a neater way to work with complex data models.

Extend Interfaces From Other Interfaces

Inheriting Interface Properties

TypeScript allows for composing types together to create new types. This is useful when returning data that is a combination of multiple different types.

Combine Inline or at the Type Level

Combining Types to Create New Types

TypeScript provides us with tools for being more selective when creating new types based on others.

Two Techniques for Creating New Types Based on Others

Selectively Construct Types from Other Types

TypeScript supports typing functions that are passed in as arguments, including the arguments that they take.

Specify the Type of a Function

Typing Functions

TypeScript supports typing the returns from asynchronous functions– great for real world processes like fetching from databases or other third-party APIs.

Transcript

Working with Object Params

Challenge

Code

Transcript