Writing High-Quality Maintainable Code: Awesome TypeScript

Introduction

High‑quality maintainable code should be readable, well‑structured, loosely coupled and easy to extend. Native JavaScript lacks static typing and a built‑in module system, which makes large‑scale development difficult, so TypeScript was created to fill these gaps.

TypeScript is a superset of JavaScript that adds static types, interfaces, classes, generics, overloads and more, while still allowing developers to write ordinary JavaScript syntax. If you already know JavaScript, picking up TypeScript is straightforward.

The article shares important TypeScript features and practical usage techniques to help you write more efficient, maintainable code.

TypeScript vs JavaScript

JavaScript

Dynamic typing; no compile‑time type checking, leading to potential runtime bugs.

No native namespace/module system; duplicate function names can overwrite each other.

TypeScript

Static typing with compile‑time checks.

Clear type annotations improve readability and IDE assistance (autocomplete, go‑to‑definition, etc.).

Built‑in module and namespace support for large‑scale modular development.

Object‑oriented features (classes, interfaces, modules) make code organization clearer.

Key Features

Data Types

Basic types: Boolean, Number, String, Array, Enum, Any, Unknown, Tuple, Void, Null, Undefined, Never.

Enum example (numeric enum):

enum STATUS {
  PENDING,
  PROCESS,
  COMPLETED,
}
let status: STATUS = STATUS.PENDING; // 0

any is discouraged because it disables type checking.

unknown is safer; after the first assignment its type is fixed.

Tuple allows mixed‑type arrays, e.g. let tuple: [string, boolean] = ["momo", true];

void is used for functions that do not return a value.

Type Annotations

Declare a variable’s type with a colon after the name:

const str: string = 'abc';

Interfaces

Interfaces define the shape of objects without implementation, enabling decoupling and easier extension. Example for an order‑related interface:

interface Animal {
  name: string;
  getName(): string;
}
class Monkey implements Padder {
  constructor(private name: string) {}
  getName() { return 'Monkey: ' + this.name; }
}

Classes

Classes support static and instance properties, constructors, methods, getters/setters, inheritance, and private fields (prefixed with # ).

class Person {
  static name: string = "momo"; // static property
  gender: string; // instance property
  constructor(str: string) { this.gender = str; }
  static getName() { return this.name; }
  getGender() { return 'Gender: ' + this.gender; }
}

class PersonWithPrivate {
  #name: string;
  constructor(name: string) { this.#name = name; }
  greet() { console.log(`Hello, ${this.#name}!`); }
}

Generics

Generics enable reusable components that work with multiple data types while preserving type information.

interface IdentityFn
{
  (arg: T): T;
}

class GenericNumber
{
  zeroValue: T;
  add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber
();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = (x, y) => x + y;

Union and Intersection Types

Union ( | ) combines multiple possible types; intersection ( & ) merges them into one.

type Staff = Person & Company;
const staff: Staff = { name: 'momo', gender: 'female', companyName: 'ZCY' };

type UnknownStaff = Person | Employee;
function getInfo(staff: UnknownStaff) {
  if ('gender' in staff) console.log('Person info');
  if ('company' in staff) console.log('Employee info');
}

Type Guards

Type guards narrow a variable’s type at runtime using in , typeof , instanceof or custom predicates.

function processData(param: string | number) {
  if (typeof param === 'string') return param.toUpperCase();
  return param;
}

function isReqParams(request: unknown): request is ReqParams {
  return !!request && typeof (request as any).url === 'string';
}

Best‑Practice Tips

Use optional chaining ( ?. ) for deep property checks.

Use nullish coalescing ( ?? ) for default values.

Write defensive code; type errors do not prevent runtime execution.

Prefer unknown over any for safer type handling.

Mark parameters as readonly when they should not be mutated.

Use const enum for compile‑time constant tables.

Enable strict compiler options (strict, noImplicitAny, strictNullChecks, etc.) to catch bugs early.

Recommended VSCode Extensions

TSLint – automatic linting and fixing.

TypeScript Hero – import sorting, unused import removal (Ctrl+Opt+O / Ctrl+Alt+O).

json2ts – convert JSON to TypeScript interfaces (Ctrl+Opt+V / Ctrl+Alt+V).

Move TS – updates import paths when moving files.

Path Intellisense – file‑path auto‑completion.

TypeScript Importer – auto‑suggests imports from workspace.

Prettier – code formatting.