If you have some experience with JavaScript and need to learn the basics of TypeScript, this page is for you. TypeScript is one of the most commonly used languages for web development. A project is created in TypeScript, then transpiled to JavaScript code, then that JavaScript code is run in the browser. Many frameworks are built using TypeScript, such as Angular, which requires it, and React, which is compatable with it. This website was built on Angular with TypeScript, and the backend project is also built with TypeScript.
"TypeScript is a strongly typed programming language which builds on JavaScript giving you better tooling at any scale."
Introduction to TypeScript
TypeScript is a languages that combines JavaScript and types. This means that you can use the familiar JavaScript syntax in combination with a new syntax for declaring variables with types, setting return types of functions, and enforcing type definitions while coding. The code below shows a simple example where we set the types of a function's input parameters, the type of its return value, and the type of a variable declared in the function.
In the TypeScript code above, we are explicitly setting the types of the parameters, return value, and inner sum variable to "number". Like JavaScript, TypeScript does not differentiate between integers, floats, doubles, etc. Notice that other than the type declarations, the TypeScript and JavaScript codes are exactly the same. This is the concept behind TypeScript; it is said that TypeScript is a superset of JavaScript, meaning that any valid JavaScript code is also TypeScript code and can be imported directly into a TypeScript project (then type declarations can be added from there). The official TypeScript website is typescriptlang.org, which gives a full technical outline of the language and provides an online sandbox where you can create and execute TypeScript code.
Assigning Types
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 allows you to set type declarations using JavaScript's primitive types:
- string
- number
- bigint
- boolean
- symbol
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
TypeScript classes are similar to classes in most other languages. They look similar to JavaScript classes with the additional feature of allowing for private and protected variables, though when the TypeScript is converted to JavaScript, all variables will be public again.
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.