TypeScript

Introduction

Introduction to TypeScript

What is TypeScript?

  • TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
  • Developed by Microsoft, it adds static types to JavaScript to improve developer productivity and code quality.
  • Enhances code readability and maintainability.

Benefits of Using TypeScript

  • Static Typing: Catches errors at compile time instead of runtime.
  • Improved IDE Support: Better autocompletion, navigation, and refactoring.
  • Large Ecosystem: Integrates seamlessly with JavaScript libraries.

How to go from JS to TS

Setting Up the Development Environment

  • Required Software:
    • Node.js
    • npm

Basic TypeScript Syntax

  • Types and Type Annotations
let name: string = 'John';
let age: number = 30;
let isStudent: boolean = true;
  • Interfaces and Type Aliases
interface Person {
  name: string;
  age: number;
}

type Student = {
  name: string;
  grade: string;
};

When to Use Type vs Interface

Type

type ID = string | number;
type Coordinates = [number, number];
  • Use for creating union types.
  • Use for creating tuples.

When to Use Type vs Interface

Interface

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}
  • Use for defining object shapes.
  • Preferred for extending (inheritance).

Advanced TypeScript Features

Enums

enum Color {
  Red,
  Green,
  Blue,
}

let myColor: Color = Color.Green;

Generics

function identity<T>(arg: T): T {
  return arg;
}

let output = identity<string>('myString');

Union and Intersection Types

type Union = string | number;
type Intersection = { id: number } & { name: string };

Utility Types

Partial

interface User {
  id: number;
  name: string;
  age: number;
}

type PartialUser = Partial<User>;
// PartialUser is { id?: number; name?: string; age?: number; }

Omit

type UserWithoutAge = Omit<User, 'age'>;
// UserWithoutAge is { id: number; name: string; }

Pick

type UserName = Pick<User, 'name'>;
// UserName is { name: string; }
  • Makes all properties in a type optional.
  • Removes specific properties from a type.
  • Picks specific properties from a type.

TypeScript configuration

How to configure TS

  • tsconfig.json is a configuration file for TypeScript projects.

  • It specifies the root files and the compiler options required to compile the project.

  • Basic Structure of 'tsconfig.json' 
{
  "compilerOptions": {
    // Compiler options go here
  },
  "include": [
    // List of files to include
  ],
  "exclude": [
    // List of files to exclude
  ]
}

 Key Compiler Options

  • module: Specifies the module system to use
"module": "commonjs"
  • strict: Enables all strict type-checking options
"strict": true
  • jsx: Specifies how JSX should be compiled.
"jsx": "react"
  • target: Specifies the ECMAScript target version
"target": "es5"

Important Compiler Options

  • moduleResolution: Specifies the module resolution strategy
"moduleResolution": "node"
  • esModuleInterop: Enables compatibility with CommonJS modules.
"esModuleInterop": true
  • skipLibCheck: Skips type checking of declaration files.
"skipLibCheck": true
  • forceConsistentCasingInFileNames: Ensures consistent casing in file names. 
     
"forceConsistentCasingInFileNames": true

Example tsconfig.json 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "jsx": "react",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

TypeScript with React

Typing Props and State

Props

interface Props {
  title: string;
}

const Header: React.FC<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

State

const [count,setCount]= useState<number>(2)
Made with Slides.com