TypeScript Foundations The Big Picture

Level: Beginner / Overview Prerequisite: Basic knowledge of JavaScript

Table of Contents

1. This course in brief
2. What is TypeScript?

• 2.1 TypeScript is a JavaScript superset
• 2.2 The phases of an application: dev time, compile time, run time
• 2.3 The TypeScript Compiler (TSC)
• 2.4 The 5 main advantages of TypeScript
• 2.4.1 Type Safety
• 2.4.2 IDE integration
• 2.4.3 Self-documented Code
• 2.4.4 Adoption of modern JavaScript features
• 2.4.5 Incremental Adoption

3. Module 2 — Use TypeScript

• 3.1 Installation and setup
• 3.2 Demonstration: Type Safety with TSC
• 3.3 Interfaces and Enums
• 3.4 IDE integration with VS Code
• 3.5 TypeScript-assisted refactoring
• 3.6 Source Maps

4. Next Steps

• 4.1 typescriptlang.org — The official site
• 4.2 TypeScript Playground
• 4.3 Frameworks and Build Tools

5. Demo files

• 5.1 Module 1 — Example tax.js vs tax.ts
• 5.2 Module 2 — TodoList application

6. Summary of key concepts

1. This course in brief

This course is not intended to teach everything there is to know about TypeScript. It is not designed to show how to build a complete backend or React application, nor is it a deep dive into the nuances of the language’s features. There will be almost no code execution.

The goal is to provide a high-level overview of what TypeScript is and show some of the key features that set it apart.

At the end of this course, you should remember three essential things:

1. TypeScript is simply JavaScript with added features. If you hear or read that TypeScript is a superset of JavaScript, that’s what it means. This also implies that one can’t really learn TypeScript without already knowing some JavaScript.

2. TypeScript does not run directly in a browser or on a server. JavaScript runs instead. TypeScript is compiled into JavaScript before reaching the user.

3. TypeScript improves the developer experience. Its main value occurs during the development and compilation phase, long before the code reaches users.

2. What is TypeScript?

2.1 TypeScript is a JavaScript superset

TypeScript is referred to as a superset of JavaScript because it extends JavaScript with additional functionality, primarily a static type system. Any valid JavaScript code is also valid TypeScript. This means that JavaScript developers can start using TypeScript gradually, without rewriting everything.

2.2 The phases of an application: dev time, compile time, run time

To understand where TypeScript fits, it is useful to distinguish the three main phases of an application:

TypeScript is written during dev time. During compile time, it is converted to JavaScript. This JavaScript is what actually runs when a user interacts with the application.

2.3 The TypeScript Compiler (TSC)

The TypeScript Compiler, or TSC, is the program that transforms TypeScript code into JavaScript. During the compile time phase, TypeScript code is passed to TSC, which converts it to standard JavaScript. TSC is what makes TypeScript practical: it allows developers to write type-enriched code without browsers or servers needing to understand TypeScript directly.

This point is fundamental: TypeScript is a development tool. It does not exist at runtime. All that exists at run time is pure JavaScript.

2.4 Top 5 Benefits of TypeScript

TypeScript adds many things to JavaScript, but here are the five main benefits:

2.4.1 Type Safety

The first and most important advantage is the ability to add types to values. It’s so central that the language was named after this feature.

Concrete example:

Consider this simple JavaScript code, part of a payment system that calculates the tax to apply to a purchase:

// JavaScript — sans types
function calculateTax(amount, shouldApplyTax) {
  const taxRate = 0.06;
  if (shouldApplyTax) {
    return amount + amount * taxRate;
  }
  return amount;
}
console.log(calculateTax(3, true)); // Résultat : 3.18

// TypeScript — avec types
function calculateTax(amount: number, shouldApplyTax: boolean): number {
  const taxRate = 0.06;
  if (shouldApplyTax) {
    return amount + amount * taxRate;
  }
  return amount;
}
console.log(calculateTax(3, true)); // Résultat : 3.18

Type annotations (: number, : boolean, : number in return) specify:

• The amount parameter must be a number (e.g.: 5 or 12.9)
• Parameter shouldApplyTax must be a boolean (true or false)
• The function must return a value of type number

The problem with JavaScript:

In JavaScript, types are dynamic. If we accidentally pass a string instead of a number, JavaScript will still execute and produce an unexpected result — probably a string instead of a number — which may break another part of the payment code later in execution.

The TypeScript solution:

TypeScript detects this error even before compilation. As a developer, the intention was for the price to always be a number, and TypeScript enforces this constraint. Errors are moved from run time to dev time and compile time, where they can be fixed before affecting users.

Summary — Type Safety:

• Static types move many errors to dev time and compile time
• They reduce the potential for errors at run time before they reach users

2.4.2 IDE integration

TypeScript significantly improves the developer experience in modern code editors. VS Code is a popular TypeScript editor that has built-in support.

What IDE integration brings:

• Real-time error detection: VS Code displays a red wavy line under problematic code as soon as you type it, without having to run the compilation. Hovering over this line displays a detailed message about what is wrong.

• Problems panel: Accessible from the View > Problems menu, it groups together all the identified errors, the same ones that TSC would display in the terminal. Errors disappear as soon as they are corrected.

• Immediate feedback: As soon as an error is introduced during entry, feedback is instantaneous, which is a huge time saver.

• Autocompletion: The editor offers autocompletion suggestions by analyzing type rules, only suggesting what does not break existing types.

• Safe Refactoring: As the code base grows, renaming functions or parameters requires updating all their references. In JavaScript, missing a reference can introduce an error at run time. With TypeScript, if functions and values ​​are precisely typed, the editor reports any missed references when renaming or changing signatures.

Important point: VS Code has its own bundled version of TypeScript. To use the compiler from the terminal (tsc command), TypeScript must be installed globally.

2.4.3 Self-documented Code

Another advantage of TypeScript is that it leads to self-documenting code. In pure JavaScript, it is often necessary to add numerous comments so that collaborators understand how to use the code. With TypeScript, types are the documentation.

JavaScript vs TypeScript Comparison:

// JavaScript — documentation par commentaires nécessaire
// Paramètre order : { customerId: string, items: Array<{ productId: string, quantity: number }>, total: number }
function processOrder(order) {
  // ...
}

// TypeScript — les types documentent eux-mêmes
interface OrderItem {
  productId: string;
  quantity: number;
}

interface OrderDetails {
  customerId: string;
  items: OrderItem[];
  total: number;
}

function processOrder(order: OrderDetails): void {
  // ...
}

Types indicate what a function expects and returns, without needing to read separate documentation or comments. If a developer tries to pass something that doesn’t match the declared types, the editor and compiler will catch it and prevent it.

Multiplied by thousands of lines in a code base shared by dozens of developers, this avoids many bugs and hours of miscommunication.

2.4.4 Adoption of modern JavaScript features

The fourth advantage is that TypeScript can be used to safely adopt modern JavaScript features.

The problem:

JavaScript is constantly evolving. Every year, the TC39 committee adopts new features, and browser engines and server runtimes integrate them — but not always at the same time. For example:

• One browser can support everything until 2024, but another is not up to date yet
• It is impossible to control when users update their browsers
• Sending JavaScript using new features to production can cause run-time errors on browsers that do not yet support them, even if it works in development

The traditional solution — polyfills:

Polyfills provide additional code that mimics new features to work in older environments. The downside: It’s more code to maintain, update, and ship to browsers, which makes JavaScript bundles heavier and can create performance issues.

The TypeScript solution:

With TypeScript, you can target a specific version of JavaScript that TSC will compile. This helps avoid the need for polyfills. If edge functionality is needed, it can still be polyfilled, but with more control over what happens. The best of both worlds: writing modern JavaScript today while ensuring it works reliably for all users.

2.4.5 Incremental Adoption

The fifth advantage is that TypeScript can be added incrementally to an existing project. Since TypeScript is simply JavaScript with additional features, there is no need to use these features until you are ready.

It is possible to have one function in a TypeScript file with full static types, and another that defines no types at all. The compiler simply transforms TypeScript into JavaScript — if given pure JavaScript, it passes it as is without modification.

Summary of the 5 advantages:

3. Using TypeScript

3.1 Installation and setup

In 2025, there are several options for compiling and running TypeScript code. Here is the recommended configuration to get started simply:

Prerequisites:

• VS Code (built-in TypeScript support)
• TypeScript Compiler (TSC) installed

Step 1 — Install Node.js:

Go to nodejs.org and choose the appropriate operating system, version manager, and package manager. The training was carried out with Node 22 on macOS.

Step 2 — Install TypeScript globally:

npm install -g typescript

Checking:

tsc --version
# TypeScript 5.9

Note: VS Code has its own bundled version of TypeScript for editor functionality. The global installation of TSC is required to use the compiler from the terminal.

3.2 Demonstration: Type Safety with TSC

Compiling a simple TypeScript file

With a tax.ts file containing the typed calculateTax function:

function calculateTax(amount: number, shouldApplyTax: boolean): number {
  const taxRate = 0.06;
  if (shouldApplyTax) {
    return amount + amount * taxRate;
  }
  return amount;
}
console.log(calculateTax(3, true));

Compilation:

tsc tax.ts

This generates a tax.js file — the result is the pure JavaScript equivalent, without type annotations.

Behavior in case of type error

If a type error is introduced (passing a string instead of a number):

console.log(calculateTax("3", true)); // Erreur : argument de type string

TSC displays:

error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

The message may contain jargon, but the problem is clear: the first parameter should be a number, but a string was provided.

Important note: By default, the compiler still generates a JavaScript file even in the presence of errors. To prevent this:

tsc tax.ts --noEmitOnError

With this flag, if the compiler encounters an error, no JavaScript will be generated.

Watch mode (incremental compilation)

tsc --watch

By adding --watch, TSC continues to run and listen for changes to TypeScript files, automatically restarting compilation whenever a change is detected. This is called incremental compilation, a considerable time saver in development.

3.3 Interfaces and Enums

Interfaces — Type structured data

One place where the power of static types particularly shines is when working with data that has a known structure, such as a database model or the response from an API.

Example — Interface for a Weather API response:

interface WeatherData {
  temperature: number;
  humidity: number;
  condition: string;
}

This interface acts as a more complex type than a simple number, string or boolean. It states that the API response data must have these three properties. If we attempt to access a property that is not in this list, TSC will report an error.

Enums — Named values ​​and constraints

enums are another feature of the TypeScript language that help prevent errors caused by unexpected or invalid values ​​at run time.

Example — Weather condition:

Without an enum, an API could return a string to represent sunny, cloudy or raining. There is nothing to prevent an incorrect value from being entered by mistake during development.

// Sans enum — fragile
if (weatherData.condition === "Sunny") { /* ... */ } // erreur de casse potentielle

// Avec enum — robuste
enum WeatherCondition {
  Sunny = "sunny",
  Rainy = "rainy",
  Cloudy = "cloudy"
}

interface WeatherData {
  temperature: number;
  humidity: number;
  condition: WeatherCondition;
}

if (weatherData.condition === WeatherCondition.Sunny) { /* ... */ }

With enums, you define a named set of allowed values, then use that enum as the type. If we try to access anything other than WeatherCondition.Sunny, WeatherCondition.Rainy or WeatherCondition.Cloudy, the compiler reports this immediately.

3.4 IDE integration with VS Code

Using TypeScript in an IDE brings the powers of TSC without having to run it manually every time.

TodoList application — multi-file project example

To demonstrate TypeScript in a larger project, here is a TodoList command line application. It’s a bit artificial, but it shows TypeScript in a way that isn’t too intimidating. The code is in different places and uses JavaScript modules to organize everything.

Project structure:

02/demos/
├── index.ts              # Point d'entrée
├── package.json          # Dépendances (@types/node)
├── tsconfig.json         # Configuration TypeScript
├── todos.json            # Données persistées
├── models/
│   └── todo.ts           # Interface Todo
├── services/
│   └── todoService.ts    # Logique métier (CRUD)
├── state/
│   └── todoStore.ts      # Couche d'accès à l'état
├── components/
│   ├── AddTodoForm.ts    # Gestion d'ajout
│   ├── TodoItem.ts       # Rendu d'un item
│   └── TodoList.ts       # Rendu de la liste
└── utils/
    ├── idGenerator.ts    # Générateur d'ID
    └── validateInput.ts  # Validation de saisie

Refactoring with type system — the case name → title

When there are many files, going through all the files to track references can take time. A common task in a codebase like this is refactoring, but it’s a complicated process in JavaScript applications because you change code in one place and have to find everywhere that code was called.

Concrete example: In the todo item object, we want to change the name key to title. This means we have to search everywhere name is accessed — but it can be accessed in many ways, so it’s not as simple as searching all files for name.

With TypeScript, we modify the Todo interface, and the type system is able to find everywhere where name has been used:

// models/todo.ts
export interface Todo {
  id: string;
  name: string; // changer en title
  completed: boolean;
  dueDate?: Date;
}

As soon as name is changed to title in the interface, all uses of todo.name in other files immediately generate errors, guiding the developer to each place to fix.

3.5 TypeScript-Assisted Refactoring

VS Code also maintains types during refactoring.

Example — Extract to Interface:

This is code that could be part of a sales order processing system. Function parameters are typed, but the structure of nested objects can be extracted into interfaces for clarity:

// Avant refactoring — types inline
function placeOrder(order: {
  customerId: string;
  items: { productId: string; quantity: number }[];
  total: number;
}): void { /* ... */ }

Using VS Code’s built-in refactoring tools:

1. Select the object with its types
2. Choose Extract to interface and name the interface OrderItem
3. Repeat for order object → interface OrderDetails

Since the types were all declared, VS Code’s TypeScript parser understands how to correctly perform this interface refactoring.

Jump to Definition:

Another useful feature is Jump to definition, accessible when examining a function call and wanting to see its source code. This functionality exists in pure JavaScript, but there are situations where JavaScript doesn’t have enough context.

Comparison:

// JavaScript pur
const data = getWeatherData();
data.humidity; // VS Code ne sait pas trouver la définition de cette propriété
               // car l'objet est retourné par une fonction sans informations de type

// TypeScript
const data: WeatherData = getWeatherData();
data.humidity; // Jump to definition → affiche exactement la définition de WeatherData

In TypeScript, Jump to definition on this property correctly displays the definition of the WeatherData type.

3.6 Source Maps

The last important feature to know about is source maps. These are files that can be generated to create a link between compiled JavaScript code and the original source TypeScript code.

The problem without source maps

Without source maps, when debugging in a browser with DevTools, you only see the generated JavaScript code — not the original TypeScript. This is problematic because we don’t want to work in generated JavaScript; we want to work in our source TypeScript code.

Generate source maps

tsc --sourceMap

This generates a .js.map file alongside the compiled JavaScript. This file establishes relationships between the TypeScript and JavaScript versions that a browser understands.

In DevTools: With generated source maps, DevTools displays the source TypeScript code instead of the compiled JavaScript.

Advantages of source maps

• Browser: DevTools displays source TypeScript code
• VS Code: Breakpoints in TypeScript code align perfectly during debugging
• The .js.map file itself is not readable directly (strange symbols), but its presence establishes the necessary relationships

Note: The source map file is not intended to be read directly. Its value lies in being there for the browser and VS Code to interpret.

4. Next Steps

4.1 typescriptlang.org — The official website

The immediate first step is to consult the official TypeScript documentation at typescriptlang.org.

Important sections:

Recommended use of the Reference section:

1. Identify the type of functionality used (e.g.: enums, interfaces)
2. Get an overview of its usefulness and real-world examples of writing and execution

Practical tips for continuing learning:

• Building something real — this is where things really start to make sense. You have to find ideas for applications to practice. It doesn’t need to be complicated at first. A good approach: spend one or two weeks thinking about small tools that could help in your work or personal life, and make it a practice project.

• Convert an existing JavaScript project — Start converting parts to TypeScript. Remember that it is not necessary to add all types at once. You can add interfaces one at a time and keep them alongside pure JavaScript.

• Rely on type inference — The compiler guesses the probable type without having to write it explicitly.

// Type inference — TypeScript infère que message est de type string
const message = "Hello, TypeScript!";
// Pas besoin d'écrire : const message: string = "Hello, TypeScript!";

Here, message is not directly typed, but since a string has been assigned to it, TypeScript infers that message is of type string without the need to add an explicit annotation.

4.2 TypeScript Playground

typescriptlang.org also hosts a web tool called the TypeScript Playground.

Operation:

The Playground offers two work panels:

• Left panel: We write our TypeScript code
• Right panel: Shows different types of outputs based on the code on the left

Right panel display modes:

Usefulness: The Playground is not intended for writing a complete application, but it can be useful for quick checks and for trying things out while learning.

4.3 Frameworks and Build Tools

In all examples shown in the training, only pure TypeScript was used, but TypeScript integrates very well with:

Frontend and backend frameworks

Some frameworks like Angular use TypeScript by default, and their out-of-the-box configurations already include TypeScript configuration files. If you already know which framework will be used, it makes sense to learn TypeScript in this context.

Build Tools

Build tools commonly used with TypeScript include Vite and Webpack. Their role is to take all the files of an application and bundle them for deployment.

Important point: Build tools do not necessarily use TSC to transpile TypeScript, but they rely on the type system and configuration files to integrate it correctly. If you’re building something with a build tool while learning TypeScript, you need to take the time to understand the different role each plays.

5. Demo files

5.1 Module 1 — Example tax.js vs tax.ts

These files illustrate the difference between pure JavaScript and TypeScript for the same function.

01/demos/README.md — Installation instructions

# Installing Node
Visit https://nodejs.org/en/download and choose your operating system,
version manager, and package manager.

# Installing TypeScript/tsc
After Node is installed: npm install -g typescript

# Use tsc to Compile TypeScript to JavaScript
tsc <FILENAME.ts>
# Example: tsc tax.ts

01/demos/tax.js — JavaScript version

function calculateTax(amount, shouldApplyTax) {
  const taxRate = 0.06;
  if (shouldApplyTax) {
    return amount + amount * taxRate;
  }
  return amount;
}
console.log(calculateTax(3, true));

01/demos/tax.ts — TypeScript version

function calculateTax(amount: number, shouldApplyTax: boolean): number {
  const taxRate = 0.06;
  if (shouldApplyTax) {
    return amount + amount * taxRate;
  }
  return amount;
}
console.log(calculateTax(3, true));

Key Differences:

• Parameters amount and shouldApplyTax have type annotations (:number, :boolean)
• Function return value is annotated (:number)
• Function body is identical — TypeScript is a superset!

5.2 Module 2 — TodoList app

The TodoList application is a command-line project that demonstrates TypeScript in a structured project context with multiple files and modules.

02/demos/README.md — Setup instructions

1. Installer Node et TypeScript sur votre machine locale.
2. Exécuter npm install pour installer les dépendances.
3. Exécuter tsc pour compiler TypeScript en JavaScript dans le dossier dist.
4. Exécuter node dist/index.js pour voir l'invite d'entrée d'un nouvel item Todo,
   ou ajouter le flag --show pour afficher les items Todo actuels.

02/demos/tsconfig.json — TypeScript compiler configuration

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "lib": ["es2017", "dom"],
    "outDir": "dist",
    "rootDir": ".",
    "strict": true,
    "esModuleInterop": true
  }
}

Important options:

• target: "es2017" — TypeScript will compile to ES2017 (JavaScript targeting ES2017 compatible environment)
• module: "commonjs" — Uses the CommonJS module system (Node.js standard)
• outDir: "dist" — Generated JavaScript files will be placed in the dist folder
• rootDir: "." — The root directory of TypeScript source files
• strict: true — Enables all strict type checks
• esModuleInterop: true — Allows easier interoperability with CommonJS modules

02/demos/package.json — Dependencies

{
  "devDependencies": {
    "@types/node": "^24.1.0"
  }
}

@types/node is a package of type definitions for Node.js. It provides type information for Node.js APIs (like process, fs, etc.) used in TypeScript code.

02/demos/models/todo.ts — Model interface

export interface Todo {
  id: string;
  name: string; // change to title
  completed: boolean;
  dueDate?: Date;
}

Important points:

• Todo interface defines the structure that a todo object must have
• dueDate?: Date — the ? indicates that this property is optional
• The comment //change to title illustrates exactly the refactoring scenario described in module 2

02/demos/services/todoService.ts — CRUD Service

import { Todo } from "../models/todo";
import { generateId } from "../utils/idGenerator";
import { readFileSync, writeFileSync, existsSync } from "fs";
import { join } from "path";

const FILE_PATH = join(__dirname, "../../todos.json");

const todos: Todo[] = existsSync(FILE_PATH)
  ? JSON.parse(readFileSync(FILE_PATH, "utf-8")).map((todo: any) => ({
      ...todo,
      dueDate: todo.dueDate ? new Date(todo.dueDate) : undefined
    }))
  : [];

function saveTodos() {
  writeFileSync(FILE_PATH, JSON.stringify(todos, null, 2), "utf-8");
}

export function addTodo(name: string, dueDate?: Date): Todo {
  const newTodo: Todo = {
    id: generateId(),
    name,
    completed: false,
    dueDate
  };
  todos.push(newTodo);
  saveTodos();
  return newTodo;
}

export function deleteTodo(id: string): void {
  const index = todos.findIndex(todo => todo.id === id);
  if (index !== -1) {
    todos.splice(index, 1);
    saveTodos();
  }
}

export function toggleTodo(id: string): void {
  const todo = todos.find(todo => todo.id === id);
  if (todo) {
    todo.completed = !todo.completed;
    saveTodos();
  }
}

export function listTodos(): Todo[] {
  return todos;
}

What this file illustrates:

• Using Todo interface as type for array and function returns
• Optional parameter dueDate?: Date
• Return type void for functions that return nothing
• Persistent loading from a JSON file with type conversion handling (todo: any)

02/demos/state/todoStore.ts — State layer

import { listTodos } from "../services/todoService";

export function getTodosForDisplay() {
  return listTodos();
}

02/demos/components/AddTodoForm.ts — Form component

import { addTodo } from "../services/todoService";

export function handleAddTodo(name: string, dueDate?: Date): void {
  addTodo(name, dueDate);
}

02/demos/components/TodoItem.ts — Rendering an item

import { Todo } from "../models/todo";

export function renderTodoItem(todo: Todo): void {
  console.log(`${todo.name} - ${todo.completed ? "done" : "not done yet"}`);
}

02/demos/components/TodoList.ts — Rendering the list

import { Todo } from "../models/todo";

export function renderTodoList(todos: Todo[]): void {
  todos.forEach(todo => {
    console.log(`${todo.name} [${todo.completed ? "x" : " "}]`);
  });
}

02/demos/utils/idGenerator.ts — ID generator

let counter = 0;

export function generateId(): string {
  return `todo-${++counter}`;
}

02/demos/utils/validateInput.ts — Validation

export function isValidTitle(title: string): boolean {
  return title.trim().length > 0;
}

02/demos/index.ts — Entry point

import { getTodosForDisplay } from "./state/todoStore";
import { renderTodoList } from "./components/TodoList";
import { handleAddTodo } from "./components/AddTodoForm";

const args = process.argv.slice(2);

if (args.includes("--show")) {
  const todos = getTodosForDisplay();
  renderTodoList(todos);
  process.exit(0);
}

process.stdout.write("Enter a new todo: ");

process.stdin.once("data", (data) => {
  const input = data.toString().trim();
  handleAddTodo(input);

  const todos = getTodosForDisplay();
  renderTodoList(todos);

  process.stdin.pause();
});

What this file illustrates:

• Importing TypeScript modules with import
• Using Node.js types (process.argv, process.stdout, process.stdin) using @types/node
• Composition of several typed modules in an entry point

02/demos/todos.json — Persisted data

[
  {
    "id": "todo-1",
    "title": "Don't forget to pay bills.",
    "completed": false
  },
  {
    "id": "todo-1",
    "name": "Testing",
    "completed": false
  },
  {
    "id": "todo-1",
    "name": "Boom",
    "completed": false
  }
]

Note: This file illustrates the inconsistency of real data — the first item uses title (wrong key according to the interface which expects name), while the others use name. This is precisely the kind of inconsistency that TypeScript helps detect and prevent.

6. Summary of key concepts

Essential Terminology

Essential TSC Commands

# Vérifier la version installée
tsc --version

# Compiler un fichier TypeScript
tsc monFichier.ts

# Compiler sans générer de fichier en cas d'erreur
tsc monFichier.ts --noEmitOnError

# Compiler avec génération de source maps
tsc --sourceMap

# Compiler en mode watch (compilation automatique)
tsc --watch

# Compiler tout le projet (en utilisant tsconfig.json)
tsc

# Installer TypeScript globalement
npm install -g typescript

Typical architecture of a TypeScript project

mon-projet/
├── tsconfig.json          # Configuration du compilateur
├── package.json           # Dépendances (@types/...)
├── src/                   # Code TypeScript source
│   ├── index.ts           # Point d'entrée
│   ├── models/            # Interfaces et types
│   ├── services/          # Logique métier
│   ├── components/        # Composants UI ou CLI
│   └── utils/             # Utilitaires
└── dist/                  # JavaScript compilé (généré par tsc)

TypeScript development flow

Code TypeScript (.ts)
        ↓
  TypeScript Compiler (TSC)
        ↓
  [Vérification des types]
        ↓
    Erreurs ? ──── Oui ──→ Feedback éditeur/terminal
        │
       Non
        ↓
  JavaScript (.js) + Source Maps (.js.map)
        ↓
  Navigateur / Node.js

What TypeScript is NOT

• TypeScript is not a language that runs in browsers or on servers
• TypeScript is not required to adopt modern JavaScript practices
• TypeScript is not incompatible with existing JavaScript code
• TypeScript does not need to be adopted all at once into an existing project

Recommended Resources

Search Terms

typescript · foundations · react · frontend · development · type · maps · source · components · javascript · tsc · adoption · application · case · compiler · data · enums · essential · frameworks · ide · incremental · installation · instructions · integration