Typescript Basics: Types and Basic Function Usage
Typescript is a language that complies to Javascript. The benefit of using Typescript is that it has type inference, meaning it can infer what type of data is being used. By using Typescript we are able to define what type of data a function or component is expecting to receive or return, and Typescript identifies when the type doesn’t match what it was expecting, then lets you know when you’ve made a type-related mistake by providing a helpful error message when type-related mistakes are made. This reduces the need to debug when you program is not working as expected.
The type of a variable or function is defined after the variable declaration with a colon and the type, let type: string = “string". When you assign a variable or a function to a type, the returned value must be that type, otherwise Typescript warns you that you have made a mistake.
In the example above, Typescript was expecting the value of snacks to be an array of strings, but it was assigned a single string. With brackets around the string, the Typescript warning is remedied.
Typescript Types
Typescript has the same types as Javascript, plus a Enum type. Below is an example of each in a simple example.
Any Type
Variables assigned to the any type can have a value of any data type. Any type is great for situations where not all type information is available, or when you are first incorporating Typescript into a project because it essentially allows skipping a type check, as needed, since the value can be any time.
let snack: any;snack = "popcorn";
snack = 10;
snack = true;
snack = { tasty: true };
Null or Undefined Types
Null and Undefined types are not helpful on their own:
let missedLunch: null = nulllet exactTimeForSnack: undefined = undefined
However, they can be helpful in scenarios where a value may be null or undefined, such as:
let todaysLunch: undefined | string = "falafel"let tomorrowsLunch: undefined | string = undefined
Void
Void is useful for console.logs or any other function where there is no return value.
let emptyStomachWarning: void = console.log("Change hungry status to true");Unknown
Unknown type is used when the type of the variable is unknown, such as dynamic content from the user, or when you want to allow all values into the API.
Objects:
Objects are not as simple to type as strings and numbers are, because Typescript wants to know the form of the object. In my example below, I typed filterValues to be an object, however I was getting an error that said “Property ‘label’ does not exist on type ‘object’”
Even though filterValues was an object type, with a property of label.
So I created an interface for FilterValues, and set that value to filterValues in the Prop interface.
Type Assertions
There are times when you may know more than Typescript does about the data types, for those situations you are able to tell Typescript, don’t worry just allow ___ type. You can do type assertions with the as-syntax or the angle-bracket syntax as shown below
Functions
For functions, types need to be added to the parameters to ensure the values being passed to the function are the types that the function operate on, and a type can be added after the parameters to indicate the type that needs to be returned by the function. In the example below the function returns a console.log which is void type.
But if we try to pass the variable doritos as an object type, we get an “Argument of type ‘…’ is not assignable to parameter of type ‘…’” because this eat() function is expecting a string and not an object.
Typescript Infers Types:
There are times when Typescript knows the types without them being declared. In the below example the top function does not have it’s return type declared, but when you hover over the IDE provides a message with the return type included.
Optional Parameters:
In Typescript the same number of arguments needs to be given to the function as the parameters defined by the function. If the function is expecting two parameters and you give it one, Typescript will give you a helpful warning, like the one below.
You can make parameters optional by adding a ? at the end of the parameter name. In the below example by adding a ? mark after the parameter quantity, the function can be called with and without a quantity.
Default parameters are also treated as optional when they are they follow required parameters.
