TypeScript Tutorials

Table of Contents

1. Fundamental Concepts of TypeScript
   • Static Typing
   • Interfaces
   • Classes
   • Enums
2. Usage Methods
   • Installation
   • Compilation
   • Using TypeScript with Node.js
3. Common Practices
   • Type Annotations in Functions
   • Type Inference
   • Working with Arrays and Tuples
4. Best Practices
   • Use Interfaces for Complex Types
   • Keep Type Definitions Separate
   • Leverage Type Guards
5. Conclusion
6. References

Fundamental Concepts of TypeScript

Static Typing

In JavaScript, variables can hold values of any type at runtime. TypeScript introduces static typing, where you can specify the type of a variable.

// Variable with a specific type
let message: string = "Hello, TypeScript!";

Interfaces

Interfaces are used to define the structure of an object. They act as contracts that an object must adhere to.

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

let person: Person = {
    name: "John",
    age: 30
};

Classes

TypeScript supports object - oriented programming concepts like classes. Classes are used to create objects with properties and methods.

class Animal {
    constructor(public name: string) {}
    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

let dog = new Animal("Dog");
dog.speak();

Enums

Enums are a way to define a set of named constants.

enum Color {
    Red,
    Green,
    Blue
}

let myColor: Color = Color.Green;
console.log(myColor); 

Usage Methods

Installation

To install TypeScript globally, you can use npm (Node Package Manager).

npm install -g typescript

Compilation

TypeScript code needs to be compiled to JavaScript. You can compile a TypeScript file using the tsc command.

tsc myFile.ts

Using TypeScript with Node.js

To use TypeScript with Node.js, you first need to set up a project.

mkdir my-project
cd my-project
npm init -y
npm install typescript @types/node --save-dev

Create a tsconfig.json file to configure TypeScript compilation.

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

Create a src directory and add your TypeScript files. Then compile and run your code.

npx tsc
node dist/myFile.js

Common Practices

Type Annotations in Functions

You can specify the types of function parameters and return values.

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

let result = add(5, 3);

Type Inference

TypeScript can often infer the type of a variable based on its initial value.

let num = 10; 
// TypeScript infers the type of 'num' as number

Working with Arrays and Tuples

Arrays in TypeScript can have a specific type. Tuples are arrays with a fixed number of elements of different types.

// Array of numbers
let numbers: number[] = [1, 2, 3];

// Tuple
let personInfo: [string, number] = ["Alice", 25];

Best Practices

Use Interfaces for Complex Types

When dealing with complex object structures, use interfaces to make the code more readable and maintainable.

interface User {
    id: number;
    name: string;
    email: string;
    address: {
        street: string;
        city: string;
        zip: string;
    };
}

let user: User = {
    id: 1,
    name: "Jane",
    email: "[email protected]",
    address: {
        street: "123 Main St",
        city: "Anytown",
        zip: "12345"
    }
};

Keep Type Definitions Separate

For larger projects, keep type definitions in separate files. This makes the codebase more organized.

// types.ts
export interface Product {
    id: number;
    name: string;
    price: number;
}

// main.ts
import { Product } from './types';

let product: Product = {
    id: 1,
    name: "Widget",
    price: 9.99
};

Leverage Type Guards

Type guards are used to narrow down the type of a variable within a conditional block.

function printValue(value: string | number) {
    if (typeof value === 'string') {
        console.log(value.toUpperCase());
    } else {
        console.log(value.toFixed(2));
    }
}

Conclusion

TypeScript is a powerful tool that enhances JavaScript development by adding static typing and other object - oriented features. By understanding the fundamental concepts, following the usage methods, adopting common practices, and implementing best practices, you can write more reliable and maintainable code. Whether you are working on a small project or a large - scale application, TypeScript can significantly improve your development experience.

References

• TypeScript Official Documentation
• MDN Web Docs - TypeScript
• Node.js and TypeScript Tutorial