Setting Up TypeScript

This lesson will guide you through setting up TypeScript in your development environment. There are multiple ways to get started with TypeScript, here are some common approaches.

📝 Note: Many of the code examples in this course compile to show the output. The following instructions are also provided if you want to run your own projects, or for the larger projects later in this course.

Prerequisites

Before installing TypeScript, make sure you have Node.js installed on your computer. You can download it from nodejs.org.

To verify Node.js is installed, open your terminal and run:

node --version
npm --version

You should see version numbers for both Node.js and npm (Node Package Manager) if installed successfully.

Installing TypeScript

There are two main ways to install TypeScript:

Option 1: Global install

Install TypeScript globally on your system:

npm install -g typescript

After installation, verify it's working:

tsc --version

You should see the TypeScript version number.

Option 2: Local install (recommended)

For most projects it's better to install TypeScript locally in your project. This makes sure everyone working on the project uses the same TypeScript version.

Create a new folder for your project and navigate to it:

mkdir my-ts-project
cd my-ts-project

Initialize a new npm project:

npm init -y

Install TypeScript as a development dependency:

npm install typescript --save-dev

Creating your first TypeScript file

Create a new file called hello.ts:

// hello.ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("TypeScript"));

// hello.ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("TypeScript"));

The console should log the string of "Hello, TypeScript!"

Compiling TypeScript

To compile your TypeScript file to JavaScript, run:

# If installed globally:
tsc hello.ts

# If installed locally:
npx tsc hello.ts

This creates a hello.js file that you can run with Node.js:

node hello.js

The above command will log the greet message to the console "Hello, TypeScript!"

TypeScript configuration file

For better control over how TypeScript compiles your code, create a tsconfig.json file:

# If installed globally:
tsc --init

# If installed locally:
npx tsc --init

This creates a tsconfig.json file with many configuration options, and some recommendations:

{
    // Visit https://aka.ms/tsconfig to read more about this file
    "compilerOptions": {
        // File Layout
        // "rootDir": "./src",
        // "outDir": "./dist",

        // Environment Settings
        // See also https://aka.ms/tsconfig/module
        "module": "nodenext",
        "target": "esnext",
        "types": [],
        // For nodejs:
        // "lib": ["esnext"],
        // "types": ["node"],
        // and npm install -D @types/node

        // Other Outputs
        "sourceMap": true,
        "declaration": true,
        "declarationMap": true,

        // Stricter Typechecking Options
        "noUncheckedIndexedAccess": true,
        "exactOptionalPropertyTypes": true,

        // Style Options
        // "noImplicitReturns": true,
        // "noImplicitOverride": true,
        // "noUnusedLocals": true,
        // "noUnusedParameters": true,
        // "noFallthroughCasesInSwitch": true,
        // "noPropertyAccessFromIndexSignature": true,

        // Recommended Options
        "strict": true,
        "jsx": "react-jsx",
        "verbatimModuleSyntax": true,
        "isolatedModules": true,
        "noUncheckedSideEffectImports": true,
        "moduleDetection": "force",
        "skipLibCheck": true
    }
}

Key configuration options

• target: The JavaScript version to compile to (ES5, ES2015, etc)
• module: The module system to use (commonjs, ES2015, etc)
• outDir: Where compiled JavaScript files go
• rootDir: Where your TypeScript source files are saved
• strict: Enables strict type checking (recommended)

Project structure

A typical TypeScript project structure looks like this:

my-typescript-project/
├── src/
│   └── index.ts
├── dist/
│   └── index.js (compiled output)
├── tsconfig.json
└── package.json

Using TypeScript in the browser

To use TypeScript in browser projects, you have a few options:

1. Compile to JavaScript: Compile TypeScript to JavaScript and include the .js file in your HTML
2. Use a bundler: Use tools like Webpack, Vite, or Parcel that handle TypeScript compilation
3. Use a CDN: Some online editors support TypeScript directly

Next steps

Now that you have TypeScript set up, you're ready to start learning! In the next section, we'll dive into TypeScript basics, starting with type annotations.