Why TypeScript Is Essential for Modern Frontend Development – A Complete Guide

According to the 2022 Frontend Development Market Survey, TypeScript usage has reached 84%, a 7‑point increase over 2021, showing a clear upward trend.

Why learn TypeScript?

Stay current and look professional.

Intelligent code suggestions improve developer experience and efficiency.

Immediate error highlighting helps catch mistakes early.

Type constraints enforce correct usage of APIs and components.

Quick start – basic types (5 minutes)

let isDone: boolean = false;
let myFavoriteNumber: number = 6;
let myName: string = 'Kagol';
function alertName(name: string): void {
  console.log(`My name is ${name}`);
}

TypeScript can infer types; assigning a wrong type triggers an error:

let name = 'Kagol';
name = 6; // error

Using any disables checking:

let name: any = 'Kagol';
name = 6; // no error

Functions

const sum = (x: number, y: number): number => {
  return x + y;
};

Optional parameters and default values:

const sum = (x: number, y = 0): number => {
  return x + y;
};

Arrays and tuples

let fibonacci: number[] = [1, 1, 2, 3, 5];
let fibonacciGen: Array<number> = [1, 1, 2, 3, 5];
let tuple: [string, number] = ['Tom', 25];

Interfaces and inheritance

interface IResourceItem {
  name: string;
  value?: string | number;
  total?: number;
  checked?: boolean;
}
interface IClosableResourceItem extends IResourceItem {
  closable?: boolean;
}

Union types and type aliases

type FavoriteNumber = string | number;
let fav: FavoriteNumber = 'six';
fav = 6;

Type assertions

const animal: Cat | Fish = new Animal();
(animal as Fish).swim();

Enums

enum Days { Sun, Mon, Tue, Wed, Thu, Fri, Sat }
console.log(Days.Sun === 0); // true

Classes

class Animal {
  name: string;
  constructor(name: string) { this.name = name; }
  sayHi(welcome: string): string {
    return `${welcome} My name is ${this.name}`;
  }
}

Generics

function print<T>(arg: T): T { return arg; }
const num = print<number>(123);

Vue 3 integration

export default defineComponent({
  props: {
    items: { type: Object as PropType<IResourceItem[]> , default: () => [] },
    span: { type: Number, default: 4 },
    gap: { type: [String, Number] as PropType<string | number>, default: '12px' }
  }
});

Define emits, refs, reactive objects, computed values, and provide/inject with proper typing using PropType, Ref, ComputedRef, etc.

JS → TS migration guide

Install TypeScript and ts‑loader.

Add a tsconfig.json file.

Rename .js files to .ts.

Add lang="ts" to Vue script blocks.

Update Vite/Webpack config to resolve .ts/.tsx and use ts-loader.

Upgrade dependencies and scripts.

Add necessary loaders/plugins.

Gradually add type declarations.

After confirming the project builds, continue adding type annotations throughout the codebase.

Join TinyVue

Contributors can learn Monorepo, Vite, Vue 3 and TypeScript, gain open‑source experience, improve their resume, and receive community recognition and gifts.