Essential TypeScript Concepts for Developers
TypeScript extends JavaScript by introducing optional static typing and class-based object-oriented features, designed for building scalable applications that compile to standard JavaScript for execution in browsers or other enviroments.
Type Annotations Type annotations specify expected types for variables, function parameters, and return values, enabling compile-time error detection.
let userName: string = "Alice Smith";
let userAge: number = 28;
let isLoggedIn: boolean = false;
function welcomeUser(user: string): string {
return "Welcome, " + user;
}
Interfaces Interfaces define object structures with properteis and method signatures.
interface UserProfile {
fullName: string;
yearsOld: number;
sayHello(): void;
}
let currentUser: UserProfile = {
fullName: "Bob Johnson",
yearsOld: 35,
sayHello() {
console.log("Hi, " + this.fullName);
}
};
Classes Classes support object-oriented principles like inheritance and encapsulation, and can implement interfaces.
class StaffMember {
private memberName: string;
protected memberAge: number;
constructor(name: string, age: number) {
this.memberName = name;
this.memberAge = age;
}
introduce() {
console.log("I am " + this.memberName);
}
}
class Supervisor extends StaffMember {
constructor(name: string, age: number) {
super(name, age);
}
assignTasks() {
console.log("Assigning work");
}
}
Generics Generics enable reusable components that work with various types while preserving type safety.
function getValue<T>(input: T): T {
return input;
}
let textResult = getValue<string>("sample text");
let numericResult = getValue<number>(42);
Enums Enums define named constant sets, focusing on values rather than types.
enum Status {
Pending,
Approved,
Rejected
}
let currentStatus: Status = Status.Approved;
Modules Modules organize code into reusable units with export and import capabilities.
// file: calculations.ts
export function multiply(a: number, b: number): number {
return a * b;
}
// file: main.ts
import { multiply } from "./calculations";
console.log(multiply(4, 6));
Decorators
Decorators are special declarations attached to classes or members, invoked at runtime with @expression syntax.
function freezeClass(target: Function) {
Object.freeze(target);
Object.freeze(target.prototype);
}
@freezeClass
class Messenger {
messageText: string;
constructor(text: string) {
this.messageText = text;
}
display() {
return "Message: " + this.messageText;
}
}
Union and Intersection Types Union types allow values of multilpe types, while intersection types combine multiple types into one.
type TextOrNum = string | number;
type CombinedRole = Student & Worker;
function showIdentifier(id: TextOrNum) {
console.log("Identifier: " + id);
}
Type Guards and Assersions Type guards verify variable types at runtime, and type assertions inform the compiler of known types.
function checkIfString(value: any): value is string {
return typeof value === "string";
}
function processInput(input: any) {
if (checkIfString(input)) {
console.log("String detected: " + input);
}
let lengthValue: number = (<string>input).length;
let lengthAlt: number = (input as string).length;
}