This command should create a folder named node_modules inside the application’s root folder. The node_modules should contain 3 folders named: director, react and todomvc-app-css.

├── node_modules
│ ├── director
│ ├── react
│ └── todomvc-app-css

We will now install some TypeScript type definitions files.

Type definitions files are used to declare the interfaces of the public API of third party libraries like React. These interfaces can be used by the IDEs to help us during the development of TypeScript applications with features like IntelliSense.

The type definitions files are also used by the TypeScript compiler to ensure that we are using the third party libraries correctly.

We are going to need the React type definitions. We can install them using the following command:

You may have noticed that some of the JavaScript files referenced by our index.html file are missing. We will now proceed to solve that problem.

3. The basics about React components

Components are he main building block of a React application. A component represents a self-contained piece of UI. A component will usually display some data and be able handle some kind of user interaction.

A component can contain child components. The application that we are about to develop is really small, so we will only develop one top-level component named TodoApp.

The TodoApp component will be composed of multiple components, including one TodoFooter component and a list of TodoItem components.

Components differentiate two different sets of data: properties and state.

Properties

Props (short for properties) are a Component’s configuration, its options if you may. They are received from above and immutable as far as the Component receiving them is concerned.

A Component cannot change its props, but it is responsible for putting together the props of its child Components.

State

The state starts with a default value when a Component mounts and then suffers from mutations in time (mostly generated from user events). It’s a serialisable representation of one point in time—a snapshot.

A Component manages its own state internally, but—besides setting an initial state—has no business fiddling with the state of its children. You could say the state is private.

When we declare a new React component using TypeScript we must declare the interface of its properties and state as follows:

Feel free to create them now or do it as we implement each one of them.

interfaces.d.ts

We will use this file to define all the interfaces in our application. We use the extension .d.ts (which is also used by the type definition files) instead of .ts because this file will not be transpiled into a JavaScript file. The file is not transpiled because TypeScript interfaces are not transformed into JavaScript code during the compilation process.

todoModel.ts

TodoModel is a generic “model” object. Since this application is really small it may not even be worth separating this logic out, but we do this to demonstrate one way to separate out parts of your application.

footer.tsx

This file uses the .tsx extension instead of the .ts extension because it contains some TSX code.

TSX is a typed superset of JSX. We will use TSX instead of HTML of client-side templates like Handlebars because TSX and JSX are used to generate an in-memory representation of the DOM. When the components state or properties change Reacts calculates the most efficient way to update the in-memory representation of the DOM and then proceeds to apply those changes to the real DOM. This process makes React highly efficient when it comes to DOM manipulation.

Note: We need use some extra compiler options to compile .tsx. We will learn more about this topic towards the end of this post.

The footer component allows users to filter the lists of tasks by their status and displays the count of tasks. This component has no state (Note how {} is passed to React.Component as the interface of its state) but it has some properties (ITodoFooterProps) that are set by its parent component (the TodoApp component).

todoItem.tsx

The TodoItem component represents one of the tasks in the list of tasks.

This component has both properties (ITodoItemProps) and state (ITodoItemState).

The component initial’s state is set in the component’s constructor by itself while the properties are passed as constructor arguments and are set by the component’s parent component (the TodoApp component).

6. Running the application

To run the application, we need a web server. We will use the npm module http-server.

We can install this package using the following commmand:

$ npm install -g http-server

Note: use sudo if you are using OSX

Use the following command to run the application:

# from the application's root folder
$ http-server

If you open a browser and navigate to http://127.0.0.1:8080/ you should be able to see the application running:

Remember to open the chrome developer tools to take a look to the React developer tools extension for chrome and how the value of the properties and state of the components change as you interact with the application.

7. Conclusions

In this post we have learned how to set up a development environment and create a new project to work with TypeScript and React.