In this chapter, we will use the same technologies as in Chapter 1, TypeScript Basics:

• TypeScript playground: This is a website at https://www.typescriptlang.org/play/, which allows us to play around with and understand the features in TypeScript without installing it.
• Node.js and npm: TypeScript and React are dependent on these. You can install them from https://nodejs.org/en/download/. If you already have these installed, make sure npm is at least version 5.2.

• TypeScript: This can be installed via npm, entering the following command in a terminal:

npm install -g typescript

• It is important that we are using TypeScript 3 in this chapter. You can check your TypeScript version by using the following command in a terminal:

tsc -v

If you need to upgrade to the latest version, you can run the following command:

npm install -g typescript@latest

• Visual...

Tuples have had a few enhancements in TypeScript 3, so that they can be used with the popular rest and spread JavaScript syntax. Before we get into the specific enhancements, we'll go through what tuples are, along with what the rest and spread syntax is. A tuple is like an array but the number of elements are fixed. It's a simple way to structure data and use some type safety.

Let's have a play with tuples:

1. In the TypeScript playground, let's enter the following example of a tuple variable:

let product: [string, number];

We've initialized a product variable to a tuple type with two elements. The first element is a string and the second a number.

2. We can store a product name and its unit price in the product variable on the next line, as follows:

product = ["Table", 500];

3. Let's try to store the product name and unit price the...

unknown is a new type that has been added in TypeScript 3. Before TypeScript 3, we may have used the any type when we weren't sure of all the properties and methods in an object from a third-party library. However, when we declare a variable with the any type, the TypeScript compiler won't do any type checking on it. The unknown type can be used in these situations to make our code more type-safe. This is because unknown types are type-checked. So, unknown can often be used as an alternative to any.

In the TypeScript playground, let's go through an example of a function using any and an improved version using unknown:

1. First, let's create a logScores function that takes in a parameter of type any. It logs out the name and scores properties from the argument to the console:

function logScores(scores: any) {
  console.log(scores.firstName); 
...

TypeScript 3 allows TypeScript projects to depend on other TypeScript projects by allowing tsconfig.json to reference other tsconfig.json files.

This makes it easier to split our code up into smaller projects. Our frontend code might be in TypeScript, in addition to having our backend in TypeScript. With TypeScript 3, we can have a frontend TypeScript project, a backend TypeScript project, and a shared TypeScript project that contains code that is used in both the frontend and backend. Splitting our code up into smaller projects can also can give us faster builds, because they can work incrementally.

In order to explore this, we are going to work through an example of a TypeScript project...

TypeScript 3 has also improved how we can set default properties on React components with --strictNullChecks. Before TypeScript 3, we had to set properties that had default values as optional and perform null checks when referencing them. We haven't introduced React yet in this book, so we'll only touch on this briefly at this point.

Let's look through an example to get a feel for the improvement:

1. The following is a React component with some default properties in TypeScript 2.9. The component is called SplitText and it takes in some text, splits it, and renders the bits that have been split in a list:

interface IProps {
  text: string;
  delimiter?: string;
}

class SplitText extends Component<IProps> {
  static defaultProps = {
    delimiter: ","
  };
  render() {
    const bits = this.props.text.split(this.props.delimiter!); 
   ...

Using the rest and spread syntax is very common nowadays, particularly when building React apps. We've seen how TypeScript 3, with the enhancement of tuples, allows us to use rest and spread in a strongly-typed fashion.

We've also seen how we can use the unknown type to reduce our use of the any type. The unknown type does require us to write more code, but it also allows us to create a more strongly-typed, more maintainable code base.

TypeScript has always made working with large code bases easier. With the introduction of project references, we can now split our solution into smaller projects more easily. This approach makes large solutions even more maintainable and flexible, and also yields faster build times with the new --build flag.

We briefly went through how using defaultprops in a React component has improved. We'll be using this frequently as...

In order to cement what we have learned about TypeScript 3, have a go at the following questions:

1. We have the following function, which draws a point:

function drawPoint(x: number, y: number, z: number) {
  ...
}

We also have the following point variable:

const point: [number, number, number] = [100, 200, 300];

How can we call the drawPoint function in a terse manner?

2. We need to create another version of the drawPoint function, where we can call it by passing the x, y, and z point values as parameters:

drawPoint(1, 2, 3);

Internally, in the implementation of drawPoint, we draw the point from a tuple type [number, number, number]. How can we define the method parameter(s) with the required tuple?

3. In your implementation of drawPoint, how can you make z in the point optional?

4. We have a function called getData, which calls a web API to get some data. The number...

The following links are good resources for further information on TypeScript 3.0:

• The Microsoft blog post that announced the TypeScript 3.0 release is worth a read: https://blogs.msdn.microsoft.com/typescript/2018/07/30/announcing-typescript-3-0/

• The TypeScript documentation has got good information on project references, which is worth looking at: https://www.typescriptlang.org/docs/handbook/project-references.html