Introduction to TypeScript
The syntax for assigning types is simple to learn but is different than what you might expect based on other languages.
To assign a type to a variable:
To assign a type to a function/method parameter:
To assign a return type to a function:
Primitive and Common Types
TypeScript also provides a few other basic types:
- any: a type declaration which states that any type of value can be assigned / used. Any variable which is not given a type definition implicitly has the 'any' type unless the type can be inferred directly from assignment.
- void: a type declaration indicating that nothing should be assigned / returned. This is most commonly used as the return type for a function that does not return a value.
A type can be inferred if TypeScript can determine the type based on the assignment.
Types for Arrays
In TypeScript, we can declare an array of some type. For example, if I have a list of email addresses, I can represent these values as an Array of strings.
The type of Array is a generic type; we can provide a type argument to have arrays of different types. We will not go into detail on generic types here. If you are interested in that topic, you may take a look at the TypeScript documentation on generics.
Creating a Class
The internal variables and functions/methods of a class can be given type declaration in the same way as shown in the previous sections.
Defining an Interface
An interface is a definition of properties and/or functions/methods a particular object should have. Like other object-oriented languages, interfaces can be applied to classes; classes can implement interfaces, but unlike many other object-oriented languages, non-class objects can also implement them. In addition, we can declare properties in interfaces, as well as functions/methods.
When it comes time to implement the interface, we can choose to use a class or a plain object depending upon our needs:
Exports and Imports
A TypeScript project can be split into multiple files. Each file is considered a module and can export zero or more variables, functions, classes, etc. To export something, add the keyword export in front of the declaration.
While exporting many things from a single file is possible, it is generally a best practice to only export one thing per file to keep the file more readable and the codebase as a whole easier to navigate. A possible exception is when exporting more than one constant from some file which holds many constants.
One something is exported, it can then be imported by another file.
Import statements should be put at the top of the file before any other executable code is declared. An import statement contains:
- The 'import' keyword.
- A list of things to import from that file or package enclosed in brackets (in most cases).
- The 'from' keyword.
- The location of the module being imported. This can be from a file you've created or from some node_modules dependency if you have any.
There are some cases where the above information is incomplete or otherwise not relevant. For a more detailed overview of modules, please visit the official documentation.
Catching Issues at Build Time, Not Run Time
The main reason we would use TypeScript, or any similar language, is to enable us to catch bugs and issues at build time, not run time. This means that we will be able to catch certain issues, such as incorrect types, misspelled variable or function names, classes or objects which are missing properties, and much more. The earlier we can catch these types of bugs, the more money and time we will save in development work, and the less cost and damage we will incur by having these issues make it to production / the final project.