On this page, I am bringing all the important TypeScript tutorials into one hub so you can learn in a structured path while still jumping straight to specific problems when needed. I have grouped the tutorials into categories like basics and data types, arrays and collections, strings and text, enums, dates and time, dictionaries and key‑value structures, and more advanced topics like promises and JSON handling.
What is TypeScript, and why use it?
TypeScript is a strongly‑typed superset of JavaScript that adds static types, interfaces, and modern language features on top of regular JavaScript. I like to think of TypeScript as “safer JavaScript” that helps you catch errors at compile time instead of at runtime in the browser or in production.
Developers use TypeScript to build large, maintainable applications—especially in frameworks like React, Angular, and SPFx—because types make code easier to understand, refactor, and document. If you are working in the Microsoft 365 and SPFx world, TypeScript is the default language for client‑side web parts and React components, so investing in it will pay off in your day‑to‑day projects.
Who is this TypeScript tutorials hub for?
This TypeScript tutorials hub is for beginners who are coming from JavaScript, as well as developers who already use TypeScript but want quick solutions for everyday tasks. If you are new, you can follow the sections in order to build a strong foundation in data types, arrays, strings, dates, dictionaries, and enums.
If you already write TypeScript, you can treat this hub as a reference when you need to quickly remember how to format dates, filter arrays, work with enums, or manipulate dictionaries and JSON. All tutorials are written using simple examples so you can apply the patterns to your own React, SPFx, or Node.js projects.
How to follow this TypeScript learning path
If you are just starting, begin with TypeScript basics and core concepts to understand types, data types, and identifiers. Then move into Arrays and collections in TypeScript and Strings and text manipulation to work with data in real applications.
After that, explore Enums and advanced type patterns, Dates and time, and Dictionaries, maps, and key‑value pairs.
Once you are comfortable with these fundamentals, you can learn Filtering, searching, and transforming data, then apply everything in JSON, objects, and real‑world utility patterns.
1. TypeScript basics and core concepts
This section gives you a solid starting point with TypeScript: basic syntax, data types, identifiers, keywords, and how TypeScript fits into frontend and backend development.
- Start from scratch with TypeScript Hello World program for beginners
- Understand the building blocks using Data types in TypeScript with examples
- Learn how TypeScript fits in your stack with Is TypeScript frontend or backend?
- Use types correctly with Type keyword in TypeScript
- Follow good naming rules using TypeScript identifiers and keywords
- Work with constants properly using Const keyword in TypeScript
- Use inheritance and classes with Super keyword in TypeScript
- Override methods correctly using Override keyword in TypeScript
- Declare ambient types using Declare keyword in TypeScript
- Narrow types with Is keyword in TypeScript
- Access instance context with This keyword in TypeScript
- Understand the non‑null assertion using TypeScript exclamation mark operator
- Use default branches correctly with Default keyword in TypeScript
2. Arrays and collections in TypeScript
Arrays and collections are everywhere in TypeScript apps. Use this section to create arrays, loop through them, merge, filter, and work with arrays of objects.
- Learn the fundamentals using TypeScript array tutorial
- Add items conditionally with TypeScript add to array if exists
- Append values cleanly using TypeScript append to array
- Remove items properly with TypeScript remove item from array
- Work with arrays of objects using TypeScript array of objects
- Add objects correctly with Push an object into an array in TypeScript
- Iterate over arrays using Loop through array in TypeScript
- Filter items using TypeScript array filter
- Apply multiple rules with TypeScript array filter with multiple conditions
- Filter specific values using TypeScript filter array examples
- Filter out duplicates using Filter duplicates from an array in TypeScript
- Remove nulls using Remove null values from an array in TypeScript
- Remove empties with Filter empty strings from an array in TypeScript
- Get unique values using Get distinct values from an array in TypeScript
- Join arrays together using TypeScript array concatenation
- Sort values with TypeScript sort array
- Sort alphabetically using Sort array alphabetically in TypeScript
- Sort complex objects with Sort array of objects in TypeScript
- Sort by dates using TypeScript sort array of objects by date descending
- Reverse elements with How to reverse an array in TypeScript
- Find elements using TypeScript array find
- Merge object arrays without duplicates using Merge object arrays without duplicates in TypeScript
- Get the last item easily with Get last element of an array in TypeScript
3. Strings and text manipulation in TypeScript
Strings are everywhere: in UI, APIs, logs, and more. This section helps you split, search, replace, compare, and transform strings in TypeScript.
- Replace all matches using TypeScript string replaces all occurrences
- Remove unwanted quotes using Removes quotes from string in TypeScript
- Split basic strings using TypeScript split string method
- Split using multiple separators with Split a string with multiple separators in TypeScript
- Split by dot using TypeScript split string by dot
- Split and retrieve last segment with Split string and get last element in TypeScript
- Split into arrays using TypeScript split string into array
- Split by regex using Split string by regex in TypeScript
- Split long strings by fixed length with Split string by length in TypeScript
- Split lines using Split string by new line in TypeScript
- Check substring presence with TypeScript check if a string contains a substring
- Check emptiness using Check if string is empty TypeScript
- Capitalize nicely using TypeScript string capitalize first letter
- Compare strings using TypeScript compare strings
- Extract content between delimiters with Get string between 2 characters in TypeScript
- Get trailing substring with Get string after character in TypeScript
- Check numeric‑only strings with Check if string contains only numbers in TypeScript
- Create multiline text using Create a multiline string in TypeScript
4. Enums and advanced type patterns
Enums are powerful for defining named values and state. This section helps you declare enums, convert between strings and enums, and work with enum arrays and mappings.
- Learn the basics using TypeScript enums tutorial
- Compare values correctly with TypeScript compare string to enum
- Understand alternatives using TypeScript enum vs const
- Use multiple values with TypeScript enum multiple values
- Sort data using TypeScript sort by enum
- Convert to numbers with TypeScript convert enum to number
- Handle duplicate values with TypeScript enum duplicate values
- Get enums by name using TypeScript get enum by name
- Convert to strings using TypeScript convert enum to string
- Reverse map string enums with TypeScript string enum reverse mapping
- Convert enums to arrays using Convert TypeScript enums to arrays
- Check membership using Check if a string is in an enum in TypeScript
- Validate enum values with TypeScript check if value is in enum
- Convert strings to enums using Convert string to enum in TypeScript
- Iterate cleanly using Iterate over enums in TypeScript
- Get keys by value using Get key by value from enum string in TypeScript
- Compare dates stored as strings using Compare two string dates in TypeScript
- Follow good naming rules using TypeScript enum naming conventions
- Understand alternatives with TypeScript string union vs enum
5. Dates and time in TypeScript
Working with dates and time zones is essential in any business app. This section helps you format, compare, and manipulate dates safely in TypeScript.
- Learn core concepts using TypeScript date tutorial
- Format dates with TypeScript date format examples
- Convert strings to dates using Convert string to date in TypeScript
- Format with time zones using Format date with timezone in TypeScript
- Convert to UTC using Convert date to UTC in TypeScript
- Validate inputs with Check if date is valid in TypeScript
- Add days correctly using TypeScript date add days
- Subtract days using Subtract days from current date in TypeScript
- Compare with today using Check date less than today in TypeScript
- Extract components using Get month, day, year from date in TypeScript
- Work with week ranges using Get first and last day of week in TypeScript
- Build dates from parts using Create date from year, month, day in TypeScript
- Format as dd‑mm‑yyyy using Convert date to string format dd‑mm‑yyyy in TypeScript
- Remove time components using Remove time from date in TypeScript
- Calculate gaps using Calculate date difference in days in TypeScript
- Get week index using Get week number from date in TypeScript
6. Dictionaries, maps, and key‑value structures
Dictionaries and maps are very common when you are caching data, working with lookups, or transforming arrays. Use this section to create, read, filter, and convert dictionaries and maps.
- Understand dictionary basics with TypeScript dictionary tutorial
- Compare two structures with TypeScript dictionary vs map
- Create empty dictionaries using Initialize empty dictionary in TypeScript
- Work with Map using TypeScript Map examples
- Represent key‑value pairs with TypeScript key value pair
- Loop through entries using Loop through dictionary in TypeScript
- Get first entry using Get first element from a TypeScript dictionary
- Convert to arrays using Convert a dictionary to an array in TypeScript
- Sort dictionaries by value with Sort a TypeScript dictionary by value
- Measure size using Dictionary length in TypeScript
- Check emptiness with Check if a dictionary is empty in TypeScript
- Remove keys using Remove key from a dictionary in TypeScript
- Convert to string using Convert TypeScript dictionary to string
- Convert arrays to dictionaries using Convert an array to a dictionary in TypeScript
- Map objects to new shapes with Map an array of objects to another array of objects in TypeScript
- Filter entries using Filter a dictionary in TypeScript
- Check keys using Check if a key exists in a dictionary in TypeScript
- Check values using Check if value exists in dictionary in TypeScript
- Get values cleanly with Get value from a dictionary in TypeScript
- Find keys by value using Find key by value in TypeScript dictionary
- Convert dictionaries to text with Convert TypeScript dictionary to string
7. Numbers, booleans, and conversions
This section focuses on numeric formatting, currency, decimals, and converting between strings, numbers, and booleans.
- Convert string to number using Convert string to number in TypeScript
- Convert strings to doubles using Convert string to double in TypeScript
- Convert to booleans with Convert a string to boolean in TypeScript
- Turn numbers into booleans using TypeScript convert number to boolean
- Format numbers to 2 digits using TypeScript number format 2 digits
- Extract decimal parts using TypeScript get decimal part of a number
- Add separators with TypeScript format number with commas
- Format currency with TypeScript format currency to 2 decimals
- Add leading zeros using TypeScript convert number to string with leading zero
- Round down decimals with TypeScript round down to 2 decimals
- Round to nearest using TypeScript round to 2 decimals
- Check number or float with TypeScript check if string is number or float
8. JSON, objects, control flow, and utility patterns
Use this section to work with objects, JSON, control flow, and other utility features that show up in everyday TypeScript work.
- Convert objects to JSON using TypeScript object to JSON
- Import JSON files correctly with TypeScript import JSON file
- Iterate over JSON data using Iterate over a JSON object in TypeScript
- Inspect variable types with TypeScript check type of variable
- Check object types using TypeScript check type of object
- Check undefined values with TypeScript check if undefined
- Validate empty objects using TypeScript check if object is empty
- Add properties dynamically with TypeScript add a property to object
- Use loops with TypeScript for loop examples
- Control logic using TypeScript switch case examples
- Work with enums in switch using TypeScript switch enum
- Handle optional values using TypeScript nullish coalescing operator
- Use return types correctly with TypeScript return type of function
- Work with keyof types using TypeScript convert string to keyof
- Handle promises correctly with TypeScript Promise tutorial
- Convert to key/value structures with Convert TypeScript enums to arrays
- Convert dictionary and structures using Convert an array to a dictionary in TypeScript
How to use this TypeScript tutorials hub
You can use this TypeScript hub as a complete learning path or as a quick reference while developing SPFx, React, or other JavaScript applications. If you are new, follow the order: basics → arrays → strings → enums → dates → dictionaries → numbers → JSON and utility patterns. If you are already building TypeScript apps, jump directly into the category that matches your current need—such as formatting dates, filtering arrays, or working with enums.
As TypeScript continues to evolve, this hub will keep getting updated with new tutorials and real‑world patterns so you always have a single place to sharpen your TypeScript skills.
Explore other tutorial hubs
If you are building solutions across Microsoft 365 and the web, TypeScript is just one piece of the puzzle. You can combine your TypeScript knowledge with SharePoint, SPFx, Power Apps, Power Automate, Power BI, Microsoft Teams, Copilot Studio, and PowerShell tutorials to build full solutions.
- Build modern client‑side solutions with all SharePoint Framework (SPFx) tutorials
- Learn SharePoint development, administration, and customization with all SharePoint tutorials
- Design low‑code apps with all Power Apps tutorials
- Automate workflows with all Power Automate tutorials
- Build reports and dashboards using all Power BI tutorials
- Build secure, data‑driven business websites using all Power Pages tutorials.
- Improve collaboration with all Microsoft Teams tutorials
- Build AI copilots and bots with all Microsoft Copilot Studio tutorials
- Automate admin tasks with all PowerShell tutorials
Join the premium SPGuides Academy
If you want to go beyond individual TypeScript snippets and see how TypeScript is used in real SPFx, React, and Microsoft 365 projects, you can join my premium SPGuides Academy. Inside the academy, you will find full training courses, real‑time project implementations, and digital products that combine TypeScript with SharePoint, SPFx, Power Apps, Power Automate, and more.
As a member, you can follow structured learning paths, download solution code, and watch how I build production‑ready components step by step. This is ideal if you want to become a stronger Microsoft 365 developer and use TypeScript confidently in client work.
Final thoughts
This TypeScript tutorials hub is designed to support you from your first “Hello World” to advanced topics like enums, dictionaries, date handling, and complex array transformations. You can bookmark this page and come back whenever you need a specific pattern or a refresher on a TypeScript feature.
As you apply these tutorials in real projects—especially SPFx and Microsoft 365 customizations—you will find your TypeScript code becoming more robust, readable, and easier to maintain.
