Setting Up Your TypeScript Development Environment

Setting Up Your TypeScript Development Environment#

Setting up your development environment#

Code editor#

In order to take advantage of all the benefits that TypeScript has to offer, you need an IDE that supports TypeScript. We recommend Visual Studio Code (which is itself written in TypeScript), but any IDE that offers TypeScript support will work.

Node.js and npm#

All the projects in this book require a working Node.js development environment along with npm.

There are a few different ways you can install Node.js, so please refer to the Node.js website for detailed information: https://nodejs.org/download/

If you're on a Mac, your best bet is to install Node.js directly from the Node.js website instead of through another package manager (like Homebrew). Installing Node.js via Homebrew is known to cause issues.

npm (a package manager for JavaScript) is installed automatically when installing Node.js. To check if npm is available in your development environment, open a terminal window and type:

If a version number is not printed out or you receive an error, make sure to download a Node.js installer that includes npm.

Getting Started#

From this point on, we're going to be adding files to our project directory. Open a terminal and navigate to a folder that will contain the project's files. In the examples that follow we'll be using FinanceMe as the name of our project's root folder.

Run the following commands in your terminal to create and navigate to a directory called FinanceMe in your home directory:$ mkdir ~/FinanceMe && cd ~/FinanceMe

Initialize package.json#

Our package.json contains important information about our project, including the list of dependencies that we need to install.

To initialize our package.json, we run the following command:

--yes flag#

The --yes flag creates a package.json file with default values. If we exclude this flag, we will be asked to answer several questions about the project, including the project name and repository URL.

Install TypeScript#

To install the latest version of TypeScript, run the following command:

--save-dev#

The --save-dev flag ensures that the package we are installing is installed in our current directory (as opposed to installing the package globally) and it ensures that our package is listed under the devDependencies list in our package.json.

The latest stable version of TypeScript is 3.7.5 at time of writing.

If the installation was successful, the following command will print the tsc (TypeScript compiler) version number:

npx#

npx facilitates running executables from our local node_modules folder. Take the example of printing the tsc version number. Without npx, we would need to run the following command:

$ ./node_modules/.bin/tsc -v

With npx, the command can be shortened to:

$ npx tsc -v

Install ts-node#

ts-node is a utility for running TypeScript programs directly from the terminal without having to go through the process of compiling .ts files to .js files and running the generated files.

To install the latest version of ts-node, run the command below:

If the installation was successful, the following command will print the ts-node version number:

The ts-node command works similarly to the node command: if we pass a file name to the command, that file will run and the program will exit when the file is finished executing. If we don't pass a file name to the command, we will be placed in interactive mode, where we can import modules and run TypeScript commands on the fly. Interactive mode is especially useful for testing short snippets of code.

To start interactive mode, run the following command:

Now that we are in interactive mode, we can run code in real-time. In the example below, we run a simple calculation and print today's year:

Notice that we can declare variables and use them throughout the session, and we do not have to explicitly log items using console.log() as the return value of the executed statement will be printed automatically.

For code that spans multiple lines (or to copy and paste a block of code), you can enter editor mode, which will suspend execution until you press CTRL+D:

To exit interactive mode, either press CTRL+C or simply type .exit and press enter.

Initialize tsconfig.json#

The tsconfig.json file contains important compiler information that will be used by our IDE and ts-node.

Create a tsconfig.json file in the project directory containing the following settings:

We'll dive deeper into each compiler setting in the Compiler Options chapter, but below is a short description of what each setting above does:

  • target: this option specifies the version of ECMAScript that the compiler will output when generating JavaScript files. By setting this to es6, we can make use of all the features introduced in ES6/ES2015.

  • module: this option specifiees the module system that we are using in the generated code. By setting this to commonjs, we've ensured that our code can run in Node.js.

  • typeRoots: this option specifies the directory where TypeScript should search for global types. We set it here to our local node_modules/@types to prevent accidentally inheriting types from parent directories (which is the default behavior).

  • esModuleInterop: this option ensures that we have compatibility between CommonJS and ES Modules (more on this in the Compiler Options chapter).

  • forceConsistentCasingInFileNames: this option ensures that we don't introduce bugs by accidentally importing a module using incorrect casing (i.e. importing MyProduct.ts as myproduct.ts).

No changes are needed in VSCode or in ts-node as they will automatically detect a tsconfig.json if it exists.

Please select a discussion on the left.