Download code from GitHub
Types, Variables, and Function Techniques
TypeScript introduces strong typing to JavaScript through a simple syntax, referred to by Anders Hejlsberg as syntactic sugar. This sugar is what assigns a type to a variable. This strong typing syntax, which is officially called type annotation, is used wherever a variable is used. In other words, we can use type annotation in a variable declaration, a function parameter, or to describe the return type of a function itself.
As we discussed in Chapter 1, TypeScript – Tools and Framework Options, there are many benefits to enforcing types in a development language. These include better error checking, the ability for an IDE to provide more intelligent code suggestions, and the ability to introduce object-oriented techniques into the coding experience.
The TypeScript language uses several basic types, such as number and boolean, and...
Basic types
JavaScript, by nature, is described as a dynamically typed language. This means that any particular variable can hold a number of data types, including numbers, strings, arrays, objects, and functions. The type of a variable in JavaScript is determined by assignment. This means that when we assign a value to a variable, the JavaScript runtime interpreter determines the type of that variable.
However, the JavaScript runtime can also reassign the type of a variable depending on how it is being used, or on how it is interacting with other variables. It may assign a number to a string, for example, in certain cases.
Let's take a look at an example of this dynamic typing in JavaScript and what errors it can introduce. Then, we will explore the strong typing that TypeScript uses and its basic type system.
Functions
So far, we have explored how to add type annotations to variables and objects. However, this simple syntax can also be used with functions in order to introduce type safety whenever a function is used. Let's now examine the type annotation syntax as it applies to functions, and explore these rules in more detail.
Function return types
Using the very simple syntactic sugar that TypeScript uses, we can easily define the type of a variable that a function should return. In other words, when we call a function, and it returns a value, what type should the return value be treated as?
Consider the following TypeScript code:
function addNumbers(a: number, b: number) : string {
return a + b;
}
var addResult...Advanced types
TypeScript also has some advanced language features that can be used when working with basic types and objects. These features allow us to mix and match types a little more, as well as to create new types that are combinations of other types. In this section of the chapter, we will take a quick look at these advanced type features, including the following:
- Union types
- Type guards
- Type aliases
- Null and undefined
- Never and unknown
- Object rest and spread
- Tuples
- BigInt
Union types
TypeScript allows us to express a type as the combination of two or more other types. These types are known as union types, and their declaration uses the pipe symbol (|) to list all of the types that will make up the new type. Consider...
Summary
In this chapter, we took a look at TypeScript's basic types, variables, and function techniques. We saw how TypeScript introduces syntactic sugar on top of normal JavaScript code to ensure strongly typed variables and function signatures. We also saw how TypeScript uses duck typing and explicit casting, and then discussed TypeScript functions, function signatures, and overrides. We completed the chapter with a discussion on advanced type techniques, including type guards, object rest and spread, tuples, and bigint.
In the next chapter, we will build on this knowledge and see how TypeScript extends these strongly typed rules into object-oriented concepts, such as interfaces, classes, and inheritance.
