TypeScript Compiler

The TypeScript compiler is a program that processes TypeScript source code and produces JavaScript output.

TypeScript
     ↓
TypeScript Compiler
     ↓
JavaScript

The compiler also performs type checking based on the project's configuration.

tsc is the command-line TypeScript compiler. It is used to compile TypeScript programs.

tsc app.ts

The command tells the TypeScript compiler to process app.ts.

You can check whether the TypeScript compiler is available by running:

tsc --version

If TypeScript is installed globally and available in the system path, this command displays its version.

For a locally installed compiler, you can use:

npx tsc --version

Suppose you have a file named app.ts. You can compile it using:

npx tsc app.ts

The compiler processes the TypeScript file and can generate app.js.

Create a file named app.ts:

let message: string = "Hello TypeScript";

console.log(message);

This program contains a type annotation for the message variable.

Open the terminal in the project folder and run:

npx tsc app.ts

If compilation succeeds, JavaScript output can be generated.

After compilation, the TypeScript code is transformed into JavaScript. For a simple example, the generated file can look like:

let message = "Hello TypeScript";

console.log(message);

The type annotation is not needed in the generated JavaScript.

The compiler can detect type-related problems.

let age: number = 20;

age = "Hello";

The compiler reports an error because age is declared as a number.

Type annotations provide information to the compiler.

let studentName: string = "Amit";
let marks: number = 85;
let passed: boolean = true;

The compiler can use this information when checking the code.

You can compile multiple TypeScript files together.

npx tsc app.ts student.ts

The compiler processes the specified files.

For a project using tsconfig.json, you can compile the project by running:

npx tsc

The compiler reads the project configuration and processes the files according to that configuration.

tsconfig.json is the TypeScript configuration file. It allows you to define how the TypeScript compiler should process the project.

A configuration file can be created using:

npx tsc --init

A simple configuration can specify the JavaScript target. For example:

{
    "compilerOptions": {
        "target": "ES2020"
    }
}

The exact configuration used by a project depends on its requirements.

The target compiler option specifies the JavaScript language level that the compiler should generate.

{
    "compilerOptions": {
        "target": "ES2020"
    }
}

The target should be selected according to the environments supported by the application.

The module option controls the module system used by the generated JavaScript.

{
    "compilerOptions": {
        "module": "commonjs"
    }
}

Modern projects may use different module systems depending on the toolchain.

TypeScript provides strict checking options that can help identify potential problems in code.

{
    "compilerOptions": {
        "strict": true
    }
}

Strict checking can provide stronger compile-time checks.

The outDir option can specify where compiled JavaScript files should be placed.

{
    "compilerOptions": {
        "outDir": "./dist"
    }
}

This can keep generated files separate from the source files.

The rootDir option can specify the directory containing the TypeScript source files.

{
    "compilerOptions": {
        "rootDir": "./src"
    }
}

This is useful when organizing larger projects.

A project can keep TypeScript source code in one folder and generated JavaScript in another folder.

project/
│
├── src/
│   └── app.ts
│
├── dist/
│   └── app.js
│
└── tsconfig.json

This keeps source and generated files organized.

The noEmit option can be used when you want TypeScript to check the code without generating JavaScript output.

{
    "compilerOptions": {
        "noEmit": true
    }
}

This can be useful in workflows where another tool handles code generation.

The TypeScript compiler can watch files for changes and recompile when source files are modified.

npx tsc --watch

This can be useful during development because the compiler can respond to changes without manually running the compile command each time.

When TypeScript finds an error, the compiler displays information about the problem.

let age: number = 20;

age = "twenty";

The compiler can identify the incompatible assignment and show information that helps you locate the problem.

The compiler also checks function parameters and return types.

function add(
    a: number,
    b: number
): number {
    return a + b;
}

An incorrect function call can be detected during type checking.

add(10, "20");

The compiler can also check whether objects follow an interface.

interface Student {
    name: string;
    age: number;
}

let student: Student = {
    name: "Rahul",
    age: 20
};

The object is checked against the structure defined by the interface.

Compiler options can be passed directly on the command line. For example:

npx tsc app.ts --target ES2020

This tells the compiler to generate JavaScript targeting the specified JavaScript language level.

Write TypeScript
       ↓
Run TypeScript Compiler
       ↓
Check Types
       ↓
Generate JavaScript
       ↓
Run JavaScript

This is the basic idea behind TypeScript compilation.

React projects that use TypeScript normally include TypeScript configuration and tooling as part of the project setup.

Components can be written using .tsx files.

App.tsx
Home.tsx
Profile.tsx

The project's build tool handles the transformation required to run the application.

React Native applications can also use TypeScript. TypeScript files containing JSX commonly use the .tsx extension.

import { View, Text } from "react-native";

const App = () => {
    return (
        <View>
            <Text>Hello React Native</Text>
        </View>
    );
};

The React Native project tooling processes the TypeScript code as part of the application build process.

Create a project:

mkdir ts-demo
cd ts-demo

npm init -y
npm install --save-dev typescript

npx tsc --init

Create app.ts:

interface Student {
    name: string;
    marks: number;
}

const student: Student = {
    name: "Amit",
    marks: 90
};

console.log(student.name);
console.log(student.marks);

Compile the project:

npx tsc