Frontend Development 12 min read

A Comprehensive Guide to TypeScript: Basics, Types, Enums, Interfaces, and Functions

This guide introduces TypeScript, covering its definition, advantages, data types, enums, interfaces, classes, function definitions, parameter handling, overloads, and best practices, with code examples illustrating each concept for developers seeking to write safer, more maintainable JavaScript.

360 Tech Engineering
360 Tech Engineering
360 Tech Engineering
A Comprehensive Guide to TypeScript: Basics, Types, Enums, Interfaces, and Functions

TypeScript is a Microsoft‑defined superset of JavaScript that adds static typing and compiles back to plain JavaScript, enabling developers to catch errors at compile time.

Key reasons to adopt TypeScript include full ES6 support, powerful IDE assistance, and its role as the primary language for Angular 2 development.

TypeScript’s primitive and advanced data types encompass boolean, number, string, array, tuple, function, object, void, symbol, undefined, null, any, and never, providing a rich type system for robust code.

Enums allow named constants. Numeric enums generate a bidirectional mapping, string enums do not support reverse mapping, heterogeneous enums mix numbers and strings (generally discouraged), const enums are removed during compilation, and computed enums are evaluated at runtime.

Interfaces describe object shapes. Example:

interface List { id: number; name: string; }
interface Result { data: List[]; }
function getResult(result: Result) {
  result.data.forEach(item => console.log(item.id, item.name));
}
let myResult = { data: [{ id: 1, name: 'Bob', score: 98 }, { id: 2, name: 'Carl', score: 87 }] };
getResult(myResult);

The type checker validates required properties while allowing extra properties when the object is assigned to a variable, but it enforces strict checking for object literals passed directly to functions.

Techniques to bypass excess‑property checks include type assertions, optional properties (using ? ), and string index signatures.

Index signatures define how objects can be indexed, supporting numeric and string keys, with examples of StringArray and ScoreMap interfaces.

Readonly properties are declared with the readonly modifier, preventing reassignment after initialization, and ReadonlyArray<T> provides immutable array types.

Class types can implement interfaces, as shown by a Clock class implementing a ClockInterface , and hybrid interfaces can combine callable signatures, properties, and methods.

interface Counter { (start: number): string; interval: number; reset(): void; }
var c: Counter;
c(10);
c.reset();
c.interval = 5.0;

Interfaces can extend one or multiple other interfaces, enabling composition of reusable type contracts.

interface Shape { color: string; }
interface PenStroke { penWidth: number; }
interface Square extends Shape, PenStroke { sideLength: number; }
let square: Square = { color: 'red', penWidth: 6, sideLength: 15 };
console.log('square', square);

Function definitions in TypeScript can be expressed as named functions, anonymous functions, type aliases, or interface signatures. Parameter handling includes required, optional ( ? ), default values, and rest parameters.

function add(x: number, y?: number) { return y ? x + y : x; }
function add1(...restParams: number[]) { return restParams.reduce((p, c) => p + c); }
function overload(...restParams: number[]): number;
function overload(...restParams: string[]): string;
function overload(...restParams: any[]) {
  const first = restParams[0];
  if (typeof first === 'number') return restParams.reduce((p, c) => p + c);
  if (typeof first === 'string') return restParams.join('');
}
console.log('Numbers sum:', overload(1, 2, 3));
console.log('String concat:', overload('a', 'b', 'c'));

Overall, TypeScript improves code reliability by detecting many errors during compilation, encourages clearer architecture, and, when adopted by a team, can enhance collaboration and maintainability across front‑end projects.

TypeScriptFrontend DevelopmentProgrammingfunctionsenumsinterfaces
360 Tech Engineering
Written by

360 Tech Engineering

Official tech channel of 360, building the most professional technology aggregation platform for the brand.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.