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 ↓
When you start your web development journey, deciding between TypeScript and JavaScript can make a big difference. In this article, we’ll talk about the differences between JavaScript vs TypeScript, which are …
What is ReturnType in TypeScript? The ReturnType<Type>utility type retrieves the return type of a function. It allows you to extract the return type of a function. This can be particularly …
What is Required Utility Type in TypeScript? The Required utility type is the opposite of Partial. It makes all optional properties in a type to be required. In a simple …
What is TypeScript Set? A “TypeScript Set” is a data structure that lets you store unique values of any type, whether they are primitive values or object references. It’s similar …
What is “void” in TypeScript? A void in TypeScript is a type that represents the absence of a return value. It’s used as the return type for functions that do …
What is TypeScript readonly? The Readonly utility type in TypeScript makes all properties of a type read-only, it simply means we cannot be reassigned after creation. Syntax: Let’s check out the example …
What is Partial in TypeScript? The partial utility type in TypeScript allows you to create a new type with all properties of the original type set as optional. It’s handy when you …
What is TypeScript Exclude? The Exclude utility type in TypeScript is used to create a type by excluding certain types from another type. It’s like filtering out some types from …
What is a TypeScript Record? The Record utility type in TypeScript allows you to create a new type with specified properties and their types. It’s useful when you want to …
TypeScript Dictionary A dictionary in TypeScript is a common data structure that lets you store data in key-value pairs. Unlike arrays that use numbers for indexing, dictionaries use keys which …
What is the TypeScript Switch Statement The switch statement in TypeScript is a type of control flow statement that can be used to perform different actions based on different conditions. …
Understanding the Utility Types in TypeScript TypeScript Utility Types represent a collection of generic types that TypeScript offers, enabling the transformation of one type into another. They form the backbone …
What is TypeScript Pick? The Pick keyword in TypeScript is a utility type that allows you to create a new type by picking specific properties from an existing type. Syntax: …
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.