# xcatliu/typescript-tutorial

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/xcatliu-typescript-tutorial).**

10,725 stars · 1,348 forks · TypeScript

## Links

- GitHub: https://github.com/xcatliu/typescript-tutorial
- Homepage: https://ts.xcatliu.com
- awesome-repositories: https://awesome-repositories.com/repository/xcatliu-typescript-tutorial.md

## Topics

`javascript` `tutorial` `typescript`

## Description

This is a comprehensive tutorial for learning TypeScript, designed for JavaScript programmers who want to understand the language's type system and modern features. The resource covers TypeScript's core identity, including its structural type compatibility, compile-time type erasure, declaration file merging, and the discriminated union pattern for precise type narrowing.

The tutorial distinguishes itself by providing a progressive learning path from basic JavaScript concepts to advanced TypeScript patterns. It covers generic type parameter constraints, tuple types with fixed-length positions, and class-based inheritance with visibility modifiers. The material also explores decorator-based metaprogramming, including how to attach metadata to classes and wrap methods with cross-cutting concerns.

Beyond the core type system, the tutorial addresses object-oriented programming with abstract classes, static methods, and constructor parameter properties. It covers interface-based type abstraction, generic programming with constraints and default types, and advanced type patterns such as intersection types, type guards, and the never type. The resource also includes practical coverage of ES6 features like arrow functions, iterators, generators, and symbols as they integrate with TypeScript's type system.

The documentation serves as both a language reference and a learning resource, presenting TypeScript concepts from type system fundamentals through to decorators and mixins.

## Tags

### Education & Learning Resources

- [TypeScript Learning Paths](https://awesome-repositories.com/f/education-learning-resources/javascript-learning-resources/typescript-learning-paths.md) — Provides a progressive learning path from JavaScript to TypeScript's type system. ([source](https://cdn.jsdelivr.net/gh/xcatliu/typescript-tutorial@master/README.md))
- [Comprehensive TypeScript References](https://awesome-repositories.com/f/education-learning-resources/typescript-fundamentals/comprehensive-typescript-references.md) — Provides a comprehensive reference for TypeScript syntax, types, classes, and advanced patterns.

### Programming Languages & Runtimes

- [Class-Based Architecture](https://awesome-repositories.com/f/programming-languages-runtimes/class-based-architecture.md) — Teaches class-based programming with inheritance, visibility modifiers, abstract methods, and constructor parameter properties.
- [Visibility Modifiers](https://awesome-repositories.com/f/programming-languages-runtimes/class-inheritance/visibility-modifiers.md) — Teaches TypeScript's class inheritance with public, private, and protected member visibility modifiers.
- [Compile-Time Type Inspection](https://awesome-repositories.com/f/programming-languages-runtimes/compile-time-type-inspection.md) — Explains how TypeScript removes type annotations during compilation to produce clean JavaScript.
- [Generic Programming](https://awesome-repositories.com/f/programming-languages-runtimes/generic-programming.md) — Teaches generic programming with type parameters and constraints for reusable functions, interfaces, and classes.
- [Type Parameter Constraints](https://awesome-repositories.com/f/programming-languages-runtimes/generic-types/type-constraint-mapping/type-parameter-constraints.md) — Teaches generic type parameter constraints for ensuring type safety in reusable functions and classes.
- [Discriminated Unions](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/language-features/language-extensions/union-types/discriminated-unions.md) — Teaches discriminated unions with shared literal properties for precise type narrowing. ([source](https://ts.xcatliu.com/advanced/further-reading.html))
- [Type Narrowing](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/type-system-tools/type-definitions/variable-type-declarations/type-narrowing.md) — Teaches narrowing union types within conditional blocks using type guards. ([source](https://ts.xcatliu.com/advanced/further-reading.html))
- [TypeScript Syntax References](https://awesome-repositories.com/f/programming-languages-runtimes/language-syntax-references/typescript-syntax-references.md) — Provides a comprehensive reference for TypeScript syntax and type system features.
- [Read-Only Properties](https://awesome-repositories.com/f/programming-languages-runtimes/primary-constructors/constructor-parameter-properties/read-only-properties.md) — TypeScript allows preventing a property from being reassigned after it is set in the constructor or declaration. ([source](https://ts.xcatliu.com/advanced/class.html))
- [TypeScript Resources](https://awesome-repositories.com/f/programming-languages-runtimes/programming-language-varieties/programming-languages/language-specific-resources/web-and-scripting-environments/typescript-resources.md) — Serves as an educational resource for developers learning the TypeScript programming language.
- [Structural Type Equivalences](https://awesome-repositories.com/f/programming-languages-runtimes/programming-utilities/data-structure-type-helpers/structural-type-equivalences.md) — Explains TypeScript's structural type compatibility where types match by internal structure, not explicit declaration.
- [Access Modifiers](https://awesome-repositories.com/f/programming-languages-runtimes/access-modifiers.md) — Documents TypeScript's public, private, and protected keywords for controlling member visibility. ([source](https://ts.xcatliu.com/advanced/class.html))
- [Class Inheritance](https://awesome-repositories.com/f/programming-languages-runtimes/class-inheritance.md) — Documents how to create subclasses that inherit parent behavior in TypeScript. ([source](https://ts.xcatliu.com/advanced/class.html))
- [Interface Inheritance from Classes](https://awesome-repositories.com/f/programming-languages-runtimes/class-inheritance/interface-inheritance-from-classes.md) — Documents how to create interfaces that inherit from class types in TypeScript. ([source](https://ts.xcatliu.com/advanced/class-and-interfaces.html))
- [Interface Extensions](https://awesome-repositories.com/f/programming-languages-runtimes/class-inheritance/multiple-inheritance/interface-based-type-inheritance/interface-extensions.md) — Documents how to create new interfaces by inheriting from existing interfaces in TypeScript. ([source](https://ts.xcatliu.com/advanced/class-and-interfaces.html))
- [Class Definitions with Constructors](https://awesome-repositories.com/f/programming-languages-runtimes/class-method-definitions/class-definitions-with-constructors.md) — Documents how to define class blueprints with constructors and instance methods in TypeScript. ([source](https://ts.xcatliu.com/advanced/class.html))
- [Static Methods](https://awesome-repositories.com/f/programming-languages-runtimes/class-method-definitions/static-methods.md) — Documents how to attach methods directly to a class constructor in TypeScript. ([source](https://ts.xcatliu.com/advanced/class.html))
- [Multiple Interface Implementations](https://awesome-repositories.com/f/programming-languages-runtimes/class-system-implementations/multiple-interface-implementations.md) — Documents how to implement multiple interfaces on a single class in TypeScript. ([source](https://ts.xcatliu.com/advanced/class-and-interfaces.html))
- [Generic Interface Definitions](https://awesome-repositories.com/f/programming-languages-runtimes/generic-types/generic-interface-definitions.md) — Documents how to define generic interfaces in TypeScript. ([source](https://ts.xcatliu.com/advanced/generics.html))
- [Generic Type Constraints](https://awesome-repositories.com/f/programming-languages-runtimes/generic-types/generic-type-constraints.md) — Documents how to constrain generic type parameters in TypeScript. ([source](https://ts.xcatliu.com/advanced/generics.html))
- [Decorators](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/language-features/language-extensions/decorators.md) — Teaches decorators for modifying class, method, property, and accessor behavior. ([source](https://ts.xcatliu.com/advanced/decorator.html))
- [Type Aliases](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/type-system-tools/type-definitions/type-aliases.md) — Teaches creating shorthand names for complex types to improve readability. ([source](https://ts.xcatliu.com/advanced/type-aliases.html))
- [Positional Tuple Definitions](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/type-system-tools/type-definitions/variable-type-declarations/array-declaration-styles/fixed-length-declarations/positional-tuple-definitions.md) — Teaches tuple types with fixed-length positions and distinct types for each index.
- [Tuple Return Types](https://awesome-repositories.com/f/programming-languages-runtimes/multiple-return-values/tuple-return-types.md) — Teaches defining typed tuples with fixed-length positions and distinct types for mixed-type collections. ([source](https://ts.xcatliu.com/advanced/tuple.html))
- [Constructor Parameter Properties](https://awesome-repositories.com/f/programming-languages-runtimes/primary-constructors/constructor-parameter-properties.md) — Documents TypeScript's syntax for declaring class properties directly from constructor parameters. ([source](https://ts.xcatliu.com/advanced/class.html))
- [Generic Function Definitions](https://awesome-repositories.com/f/programming-languages-runtimes/programming-utilities/functional/generic-function-definitions.md) — Documents how to define functions with type parameters in TypeScript. ([source](https://ts.xcatliu.com/advanced/generics.html))
- [Abstract Classes](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-execution-environments/runtime-environments/runtimes/type-definition-systems/abstract-classes.md) — Documents how to define base classes that require subclasses to implement abstract methods. ([source](https://ts.xcatliu.com/advanced/class.html))
- [Interface Contracts for Classes](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-execution-environments/runtime-environments/runtimes/type-definition-systems/abstract-classes/interface-contracts-for-classes.md) — Documents how to define interface contracts that classes must implement in TypeScript. ([source](https://ts.xcatliu.com/advanced/class-and-interfaces.html))
- [Declaration Merging](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-execution-environments/runtime-environments/runtimes/type-definition-systems/declaration-files/declaration-merging.md) — Covers TypeScript's declaration merging feature for incremental type definitions across files.
- [String Literal Union Type Definitions](https://awesome-repositories.com/f/programming-languages-runtimes/string-literal-type-manipulations/string-literal-union-type-definitions.md) — Teaches defining union types from string literals for compile-time validation. ([source](https://ts.xcatliu.com/advanced/string-literal-types.html))

### Software Engineering & Architecture

- [Discriminated Unions and Guards](https://awesome-repositories.com/f/software-engineering-architecture/advanced-type-systems/discriminated-unions-and-guards.md) — Teaches advanced type patterns including discriminated unions, intersection types, and type guards.
- [Structural Typing and Inference](https://awesome-repositories.com/f/software-engineering-architecture/type-systems/structural-typing-and-inference.md) — Teaches TypeScript's structural type system fundamentals including type inference and compatibility rules.
- [Structural Type Compatibility Rules](https://awesome-repositories.com/f/software-engineering-architecture/typescript-type-definitions/static-type-checking/typescript-type-checking-instruction/structural-type-compatibility-rules.md) — Teaches TypeScript's structural type system where types match by shape, not name. ([source](https://ts.xcatliu.com/advanced/further-reading.html))
- [Function Decorators](https://awesome-repositories.com/f/software-engineering-architecture/higher-order-function-wrapping/function-decorators.md) — Teaches wrapping methods with decorators to add orthogonal behavior like logging or timing. ([source](https://ts.xcatliu.com/advanced/decorator.html))
- [Dependency Injection](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/dependency-injection.md) — Teaches dependency injection via decorators for decoupling modules from concrete implementations. ([source](https://ts.xcatliu.com/advanced/decorator.html))
- [Type Intersection and Merging](https://awesome-repositories.com/f/software-engineering-architecture/type-intersection-and-merging.md) — Teaches combining multiple type definitions into one using intersection types. ([source](https://ts.xcatliu.com/advanced/further-reading.html))
- [Never Type](https://awesome-repositories.com/f/software-engineering-architecture/typescript-type-definitions/return-type-annotations/never-type.md) — Teaches the never type for functions that never return or terminate control flow. ([source](https://ts.xcatliu.com/advanced/further-reading.html))

### Web Development

- [TypeScript](https://awesome-repositories.com/f/web-development/typescript.md) — Provides a comprehensive tutorial for learning TypeScript's type system and modern features.

### Part of an Awesome List

- [Reflection and Metadata](https://awesome-repositories.com/f/awesome-lists/devtools/reflection-and-metadata.md) — Teaches decorator-based metadata reflection for attaching and retrieving compile-time metadata at runtime.
- [TypeScript Resources](https://awesome-repositories.com/f/awesome-lists/devtools/typescript-resources.md) — Step-by-step tutorial for learning TypeScript.

### Development Tools & Productivity

- [Generic Type Defaults](https://awesome-repositories.com/f/development-tools-productivity/configuration-defaults/generic-type-defaults.md) — Teaches setting default types for generic parameters to reduce boilerplate in TypeScript. ([source](https://ts.xcatliu.com/advanced/generics.html))

### User Interface & Experience

- [Class Decorators](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/rendering-models/composition-rendering-patterns/component-patterns/class-components/class-decorators.md) — Teaches decorator-based metaprogramming for attaching metadata and modifying class behavior at compile time.
- [Interface Declaration Merging](https://awesome-repositories.com/f/user-interface-experience/interactive-interface-builders/declarative-builder-interfaces/interface-declaration-merging.md) — Teaches combining multiple interface declarations into one merged type. ([source](https://ts.xcatliu.com/advanced/declaration-merging.html))