Web Analytics
โ˜• Coffee ๐• Follow
0%

First TypeScript Program

Beginner ~25 min read

Welcome to your first TypeScript program! In this lesson, you'll set up your development environment, write the classic "Hello, World!" program, and learn how to compile and execute TypeScript code. You'll understand the TypeScript compiler (tsc) and see how TypeScript code transforms into JavaScript.

Environment Setup

Before writing TypeScript code, you need to install Node.js and TypeScript on your system.

Step 1: Install Node.js

TypeScript requires Node.js and npm (Node Package Manager). Download and install from nodejs.org.

  • Windows: Download the installer and run it
  • macOS: Use Homebrew: brew install node or download from nodejs.org
  • Linux: Use your package manager: sudo apt install nodejs npm

Verify the installation:

node --version
npm --version

Step 2: Install TypeScript

Install TypeScript globally using npm:

npm install -g typescript

Verify TypeScript installation:

tsc --version
Recommended Editor: Visual Studio Code has excellent built-in TypeScript support with IntelliSense, debugging, and refactoring. Download it from code.visualstudio.com.

Hello, World!

The traditional first program in any programming language is "Hello, World!" - a simple program that displays text. Let's write it in TypeScript!

Output 
Click Run to execute your code
Key Points:
  • TypeScript files use the .ts extension
  • console.log() prints output to the console
  • Strings are enclosed in quotes (single, double, or backticks)
  • Statements end with a semicolon (optional but recommended)

Compilation and Execution

TypeScript code must be compiled to JavaScript before it can run. Here's the process:

Step 1: Create a TypeScript File

Create a file named hello.ts:

console.log("Hello, TypeScript!");

Step 2: Compile with tsc

Use the TypeScript compiler to convert .ts to .js:

tsc hello.ts

This creates a hello.js file containing the compiled JavaScript:

console.log("Hello, TypeScript!");

Step 3: Execute with Node.js

Run the compiled JavaScript file:

node hello.js

Output:

Hello, TypeScript!
Quick Execution: Use ts-node to compile and run TypeScript files in one step: 
npm install -g ts-node
ts-node hello.ts

Adding Types

The real power of TypeScript comes from adding type annotations. Let's enhance our program:

Output 
Click Run to execute your code

Type Annotations Explained

Code Explanation
name: string Variable name must be a string
age: number Variable age must be a number
greet(person: string): void Function takes a string parameter and returns nothing
Type Safety in Action: Try changing age to a string like "25" in the editor above. TypeScript will show an error because we declared it as a number!

TypeScript Configuration (tsconfig.json)

For larger projects, use a tsconfig.json file to configure the TypeScript compiler:

tsc --init

This creates a tsconfig.json file with default settings. Here's a basic configuration:

{
  "compilerOptions": {
    "target": "ES2020",           // JavaScript version to compile to
    "module": "commonjs",          // Module system
    "outDir": "./dist",            // Output directory for .js files
    "rootDir": "./src",            // Input directory for .ts files
    "strict": true,                // Enable all strict type checking
    "esModuleInterop": true,       // Better CommonJS/ES module compatibility
    "skipLibCheck": true,          // Skip type checking of declaration files
    "forceConsistentCasingInFileNames": true
  }
}

Common Compiler Options

Option Description
target ECMAScript version for output (ES5, ES2015, ES2020, etc.)
module Module system (commonjs, es2015, esnext)
strict Enable all strict type-checking options
outDir Output directory for compiled files
rootDir Root directory of source files

With tsconfig.json, you can compile all files by simply running:

tsc

Common Mistakes

1. Forgetting to compile

# Wrong - trying to run .ts file directly with node
node hello.ts

# Correct - compile first, then run
tsc hello.ts
node hello.js

# Or use ts-node
ts-node hello.ts

Error: SyntaxError: Unexpected token ':'

2. Type mismatch

// Wrong
let age: number = "25";  // Error: Type 'string' is not assignable to type 'number'

// Correct
let age: number = 25;

3. TypeScript not installed globally

# Error: tsc: command not found

# Solution: Install TypeScript globally
npm install -g typescript

Exercise: Personalize Your Program

Task: Create a TypeScript program that introduces yourself with type safety!

Requirements:

  • Create variables for your name (string), age (number), and favorite language (string)
  • Create a function that takes these parameters and prints an introduction
  • Use proper type annotations
  • Call the function with your information
Output 
Click Run to execute your code
๐Ÿ’ก Hint

Start with a function signature like: function introduce(name: string, age: number, language: string): void

Summary

  • Install Node.js and TypeScript: npm install -g typescript
  • TypeScript files use the .ts extension
  • Compile with tsc filename.ts to create a .js file
  • Execute with node filename.js
  • Type annotations add type safety: let name: string = "Alice";
  • Use tsconfig.json to configure compiler options
  • Use ts-node for quick development without manual compilation

What's Next?

Congratulations! You've written your first TypeScript program and learned about the compilation process. Now that you understand the basics, let's dive into TypeScript's type system - starting with primitive types like strings, numbers, and booleans.

Previous โ† Introduction
Next Primitive Types โ†’