No history yet

TypeScript Environment Setup

From JavaScript to TypeScript

You already write JavaScript. The good news is that you already know how to write TypeScript. Since TypeScript is a superset of JavaScript, any valid JavaScript code is also valid TypeScript code. Think of it as JavaScript with an extra layer of features built on top.

TypeScript is a language that is a superset of JavaScript: JS syntax is therefore legal TS.

So, what's the catch? Browsers don't understand TypeScript. They only understand JavaScript. This means we need a special step in our development process: compilation. We need to take our TypeScript files (ending in .ts or .tsx) and convert them into plain JavaScript files (.js) that a browser can execute. This process is often called transpilation because it's a source-to-source compilation.

Setting Up the Compiler

The tool that performs this transpilation is the TypeScript compiler, called tsc. You can install it globally on your system using the Node Package Manager (npm), which comes with Node.js.

# Install TypeScript globally
npm install -g typescript

Once installed, you can verify it by checking its version.

# Check the installed version
tsc --version

With the compiler ready, how do we tell it how to compile our code? We use a configuration file named tsconfig.json. This file lives in the root of your project and gives you fine-grained control over the compilation process. To generate a default tsconfig.json file, you can run a simple command in your project's root directory.

# Initialize a tsconfig.json file
tsc --init

This will create a tsconfig.json file with many commented-out options. Don't be overwhelmed. Most of the time, you only need to care about a few key settings inside the compilerOptions object.

OptionDescription
targetSpecifies the JavaScript version to compile to (e.g., "ES2016", "ESNext").
moduleDefines the module system for the output (e.g., "commonjs", "ES2020").
outDirSets the output directory for compiled .js files (e.g., "./dist").
rootDirSpecifies the root directory of your .ts source files (e.g., "./src").
strictA master switch that enables a wide range of type-checking behaviors. It's highly recommended to set this to true.

Here’s what a basic tsconfig.json might look like for a simple project that takes TypeScript files from a src folder and outputs JavaScript files into a dist folder.

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  }
}

The esModuleInterop option is another useful one. It smooths out the differences between CommonJS and ES modules, making imports work more predictably.

Your First Compilation

Let's put it all together. Imagine you have a file src/index.ts:

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

greet('World');

To compile this file based on your tsconfig.json settings, you simply run tsc in your project's root directory.

tsc

This command will read your tsconfig.json, find all .ts files in the rootDir, and generate corresponding .js files in the outDir. In this case, it would create dist/index.js.

Running tsc every time you make a change is tedious. A better workflow is to use watch mode. This tells the compiler to watch your files for changes and automatically re-compile them whenever you save.

# Run the compiler in watch mode
tsc --watch

# Or the shorthand version
tsc -w

Now, the compiler runs in the background. If you were to introduce a type error, like passing a number to the greet function, your terminal would immediately show an error, giving you real-time feedback without ever leaving your editor. This tight feedback loop is where TypeScript truly shines, catching errors before they ever make it to the browser.

Ready to test your knowledge?

Quiz Questions 1/4

What is the primary role of the TypeScript compiler, tsc?

Quiz Questions 2/4

True or False: Any valid JavaScript code is also valid TypeScript code.

With your environment set up, you're ready to start leveraging the power of types in your code.