TypeScript Tutorial

TypeScript Tutorial for Beginners

TypeScript is a programming language that extends JavaScript with static type checking and features such as interfaces, type aliases, generics, access modifiers, and enums. Valid JavaScript is generally valid TypeScript, so developers can introduce types gradually instead of rewriting an application at once.

The TypeScript compiler checks source files for type-related errors and converts .ts files into JavaScript that browsers and Node.js can execute. Type information is used during development and is removed from the emitted JavaScript.

TypeScript is used in front-end and server-side projects, including applications built with Angular and other JavaScript frameworks. This tutorial begins with installation and compilation, then introduces the language concepts needed to write TypeScript programs.

What TypeScript Adds to JavaScript

• Static type checking: Detects many incorrect assignments and function calls before the program runs.
• Type inference: Determines many variable and return types without requiring an explicit annotation.
• Object contracts: Interfaces and type aliases describe the expected structure of data.
• Editor assistance: Type information supports code completion, navigation, and safer refactoring.
• Configurable JavaScript output: The compiler can emit JavaScript for different runtime environments.

Types improve development-time checks, but they do not automatically validate data received at runtime from an API, form, file, or database. Untrusted external values still require runtime validation.

Set Up Node.js and the TypeScript Compiler

To follow the command-line examples, install Node.js and the TypeScript compiler. You may create .ts files in any text editor, although an editor such as Visual Studio Code can provide TypeScript-aware completion and diagnostics.

Install Node.js

Based on your OS version, you can download node from https://nodejs.org/en/ and run the installer that guides you through simple steps. To verify if node is installed, run node -v command in cmd prompt. node command should echo the version of node that is installed.

Install TypeScript

With node installed, we get npm installed inclusively. Open a command prompt as administrator and run the following command to install TypeScript compiler globally using npm :

 npm install -g typescript

To verify if typescript is installed successfully, run tsc -v in command prompt from any folder location. It should echo back the version of typescript being used as shown in the below screenshot.

A project can also keep its compiler version in local development dependencies. This makes builds more reproducible because each contributor uses the version declared by the project.

mkdir typescript-demo
cd typescript-demo
npm init -y
npm install --save-dev typescript
npx tsc --version

Compile and Run a TypeScript Program

Create a file named hello.ts. The example below declares parameter and return types, calls the function, and prints the returned string.

function createGreeting(name: string): string {
    return `Hello, ${name}!`;
}

const message: string = createGreeting("Sam");
console.log(message);

Compile the TypeScript file and run the generated JavaScript with Node.js:

npx tsc hello.ts
node hello.js

The program prints the following result:

Hello, Sam!

The compiler creates hello.js. That JavaScript file can run in Node.js or, when written for a browser environment, be loaded by an HTML page. Browsers do not normally execute a TypeScript source file directly.

Configure a TypeScript Project with tsconfig.json

For a project containing more than one source file, create a tsconfig.json file. It records the compiler settings and identifies the project root.

npx tsc --init

A small project configuration can place source files in src, emit JavaScript into dist, and enable strict type checking:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true
  },
  "include": ["src/**/*.ts"]
}

Run npx tsc without a filename to compile the project using this configuration. During development, npx tsc --watch recompiles affected files after saved changes.

TypeScript Language Topics to Learn

After the compiler is working, learn TypeScript in stages. Begin with primitive types, arrays, objects, functions, unions, and narrowing. Continue with interfaces, classes, modules, generics, utility types, and asynchronous code. Apply each concept in small programs so that compiler messages and generated JavaScript remain easy to inspect.

TypeScript Variables, Types, and Inference

A type annotation follows a variable or parameter name. TypeScript can also infer a type from an initial value. Explicit annotations are especially useful for function boundaries, public APIs, and values whose intended type is not obvious.

const courseName = "TypeScript"; // inferred as string
let lessonCount: number = 12;
const published: boolean = true;
const tags: string[] = ["types", "compiler", "javascript"];

function calculateTotal(price: number, quantity: number): number {
    return price * quantity;
}

TypeScript Object Types and Interfaces

Object types describe the properties a value must provide. An interface gives a reusable name to an object shape and can mark a property as optional with ?.

interface Tutorial {
    title: string;
    lessons: number;
    description?: string;
}

const tutorial: Tutorial = {
    title: "TypeScript Basics",
    lessons: 8
};

TypeScript Union Types and Type Narrowing

A union allows a value to have one of several types. Before using operations that belong to only one member of the union, narrow the value with a check such as typeof.

function formatId(id: number | string): string {
    if (typeof id === "number") {
        return id.toFixed(0);
    }

    return id.trim().toUpperCase();
}

TypeScript Conditional Statements

A conditional statement selects a block of code according to the value of an expression. TypeScript supports the JavaScript if, if...else, and switch statements while checking the types used in conditions and case logic.

• Tutorial – TypeScript IF
• Tutorial – TypeScript IF-ELSE
• Tutorial – TypeScript SWITCH

TypeScript Looping Statements

Loops repeat a task while a condition holds or for each value in a collection. TypeScript supports JavaScript loop forms such as for, while, and do...while. It also checks the variables and expressions used inside each loop.

• Tutorial – TypeScript FOR
• Tutorial – TypeScript WHILE
• Tutorial – TypeScript DO WHILE

Common TypeScript Setup and Compilation Problems

• tsc is not recognized: Confirm that TypeScript is installed globally, or use the project-local command npx tsc.
• Node.js cannot run a .ts file: Compile it to JavaScript first, then run the emitted .js file.
• The compiler ignores project settings: Compile the project with npx tsc. Passing source filenames directly can change how project configuration is applied.
• Unexpected errors appear after enabling strict mode: Add precise parameter, return, and object types instead of suppressing checks with any.
• Browser APIs or modern methods are missing from types: Review the project’s target and lib compiler options for the intended runtime.

TypeScript Tutorial Learning Path

1. Install Node.js and TypeScript, then compile one .ts file.
2. Learn primitive types, arrays, object types, functions, and type inference.
3. Practice unions, literal types, narrowing, and handling nullable values.
4. Use interfaces, type aliases, classes, and modules to organize application code.
5. Learn generics and utility types after ordinary function and object typing is comfortable.
6. Enable strict checking and apply TypeScript to a small JavaScript project.

TypeScript Tutorial FAQs

Is TypeScript difficult to learn?

TypeScript fundamentals are usually manageable for someone who understands JavaScript variables, functions, arrays, objects, and modules. Advanced generic and conditional types require more practice, but they are not prerequisites for building ordinary applications.

Should I learn JavaScript before TypeScript?

Yes. TypeScript uses JavaScript syntax and runtime behavior, so knowledge of JavaScript makes compiler errors and generated code easier to understand. TypeScript adds development-time types; it does not replace the need to learn how JavaScript executes.

Can a browser run TypeScript directly?

Standard browser workflows execute JavaScript rather than TypeScript source. Compile or bundle the TypeScript files into JavaScript before loading them in a web page.

What is the difference between TypeScript and JavaScript?

JavaScript is the language executed by browsers and Node.js. TypeScript extends JavaScript syntax with a type system and compiler checks, then emits JavaScript for the selected runtime environment.

Do TypeScript types exist at runtime?

Most TypeScript type annotations are erased during compilation. They help the compiler and development tools but do not validate runtime input by themselves.

TypeScript Tutorial Editorial QA Checklist

• Verify that every TypeScript example compiles with the current project configuration.
• Confirm that command examples distinguish TypeScript compilation from JavaScript execution.
• Check that TypeScript is described as extending JavaScript, not as a runtime replacement for it.
• Ensure that new compiler options are explained in relation to the intended Node.js or browser environment.
• Confirm that examples do not imply static types validate untrusted runtime data.

TypeScript Tutorial Summary

This TypeScript Tutorial introduced TypeScript as a typed extension of JavaScript, explained how to install and verify the compiler, and demonstrated how to compile and run a program. It also covered project configuration, core type-system concepts, conditional statements, loops, common compilation problems, and a practical learning path.