TypeScript is JavaScript with optional static typing, it catches bugs at compile time, gives better autocomplete in editors, and is the modern standard for large React/Vue/Angular projects. This hub collects free TypeScript tutorials from “what is a type” through advanced generics, decorators, and full-stack TypeScript with Node.js back-ends.
What you’ll learn in the TypeScript tutorial series
Type basics: fundamental types, arrays, tuples, enums, union types
Interfaces: defining object shapes, extending interfaces, optional properties
Classes: access modifiers (public/private/protected), abstract classes, decorators
Generics: generic functions, generic classes, constraints
Type narrowing: type guards, discriminated unions, in operator
Utility types: Partial, Required, Pick, Omit, Record, ReturnType
Modules: import/export, declaration files (.d.ts), namespaces
Integration: TypeScript with React, Node.js, Express, Next.js
Why TypeScript matters for modern capstones
For BSIT capstones using React, Vue, Angular, or any modern JavaScript framework, TypeScript is now the default, it makes code more maintainable, catches errors before runtime, and signals professionalism to your panel. The learning curve from JavaScript is small (~1-2 weeks for the basics), and the payoff in code quality is significant. If your capstone is a pure PHP + MySQL system, TypeScript is optional. For anything React/Node.js-based, learn it.
TypeScript prerequisites
Before starting TypeScript, you should be comfortable with: (1) JavaScript fundamentals: variables, functions, arrays, objects (see our JavaScript Tutorial); (2) ES6+ features: arrow functions, destructuring, spread/rest; (3) npm basics: installing packages, package.json. TypeScript adds types on top of these, it doesn’t replace JavaScript knowledge.
Related TypeScript resources
JavaScript Tutorial, prerequisite foundation
React Projects, React + TypeScript is the modern combo
Node.js Projects, server-side TypeScript
Vue.js Projects, Vue 3 supports TypeScript natively
TypeScript Tutorials (full list), all individual tutorials
Scroll down to browse the full TypeScript tutorial catalog ↓
Understanding TypeScript Generics So, what are Generics in TypeScript? TypeScript Generics is a tool that helps you write flexible code. It can handle many different data types while still keeping …
Understanding TypeScript forEach loop The forEach() loop in TypeScript is a method that is used to execute a certain function for each item in an array. The forEach method is …
What is TypeScript for loop? A for loop in TypeScript is a type of definite loop that has a control structure that lets you repeat a block of code a certain …
What is typeof in TypeScript? The typeof in TypeScript is a keyword that serves to distinguish among various types. It enables us to discern differences among types such as numbers, …
Understanding TypeScript Map A TypeScript map is an object that stores pairs of keys and values, and it keeps track of the order in which the keys were added. You …
What is a list in TypeScript? A list is typically represented using arrays in TypeScript that are capable of storing multiple elements. Since TypeScript doesn’t support the List data type …
What are Typescript Constants (Const) Typescript Constants are like regular variables, but once you set their value, you can’t change it. We create them using the word ‘const’. Just like …
Understanding null and Undefined in TypeScript The null and undefined in TypeScript are two distinct types that have their own unique values. Null It is a special value that represents …
What are the classes in TypeScript? TypeScript classes are a key part of object-oriented programming. It usually includes type annotations for its elements and, if needed, their parameters. Here’s a …
What is casting in TypeScript? Casting in TypeScript is the process of converting a variable from one type to another. This is often necessary when you’re certain about the type …
TypeScript Interface An Interface in TypeScript can be seen as a syntactical agreement that an entity is expected to abide by. To put it simply, an interface lays out the …
What is enum in TypeScript? Enumerations, also known as enums, are a new kind of data type that TypeScript supports. Many object-oriented programming languages, such as Java and C#, utilize …
What is union in TypeScript? A union type in TypesScript represents a value of multiple types. It is like a TypeScript tuple. However, in union type, we must use the …
tsc or a bundler like Vite/webpack.string, number, boolean, arrays (string[]), tuples. Interfaces — describing object shapes. Type aliases — naming complex types. Union types — string | number. Generics — type parameters for reusable functions like Array<T>. Utility types — Partial, Pick, Omit, Record. Type narrowing — using typeof and in guards. Master these and you cover ~80% of real-world TS usage.npm init -y, then npm install -D typescript @types/node, then npx tsc --init to generate tsconfig.json. Compile with npx tsc. For React: use npm create vite@latest myapp -- --template react-ts — Vite sets up everything. For Next.js: npx create-next-app@latest --typescript. Modern frameworks include TypeScript templates by default — you almost never need to set it up manually.interface for object shapes, use type for unions, intersections, primitives, or anything that's not a simple object. In practice they're often interchangeable.