React
Academy

Course outline

TypeScript

TypeScript is a better JavaScript. As a language, it is a superset of JavaScript that adds types and other features to the language. It also allows transpiling modern JavaScript into older JavaScript (so it can run on older devices).

Here are a few popular projects that are using Typescript: Office Online, Visual Studio Code, AirBnb, Angular (Google), Lyft, Vue, Aurelia, Ubisoft, Slack and much more.

Day 1

Learn all about TypeScript
1. Using TypeScript 
  • Why is TypeScript a better JavaScript
  • Installing TypeScript (and dependencies: Node, npm, WebPack, etc.)
  • Transpiling your code using the command line
  • Creating your first TypeScript project
2. Declaring Variables Syntax 
  • let
  • const
  • var
  • Block scoping vs function scoping
  • Destructuring (arrays and objects)
  • Spread operator
3. Type Inference 
  • Basics of type inference
  • Best common type
  • Contextual typing
4. Using Types 
  • Basic types: Boolean, Number, String, Array, Tuple, Enum, Object
  • Other types: Any, Void, Null, Undefined, Never
  • Type assertions
  • Intersection types
  • Union types
  • Type guards
  • Option --strictNullChecks with Nullable types
  • Type Aliases
5. Interfaces 
  • Declaring and using interfaces
  • Optional properties
  • Readonly properties
  • Excess property checks
  • Function types
  • Indexable types
  • Class types
  • Extending interfaces
  • Hybrid types
  • Interfaces extending classes
6. Classes 
  • Class syntax
  • Class inheritance
  • Public, private and protected modifiers
  • Readonly modifier
  • Getters and setters (Accessors)
  • Static properties
  • Abstract classes
  • Constructor function
  • Base class access (super)
7. Functions and objects 
  • Function syntax
  • Function types
  • Optional and Default parameters
  • Rest parameters
  • 'this' value
  • Static properties
  • Arrow functions
  • Arrow functions and the 'this' scope
  • Overloads
8. Type Compatibility 
  • Structural subtypes instead of nominal subtypes
  • Comparing types
  • Comparing functions
  • Function parameter bivariance
  • Optional parameters and Rest parameters
  • Enums
  • Classes
  • Generics

Day 2

Deep dive into the type system
9. Modules 
  • Module syntax
  • Export
  • Import
  • Default and wildcard
  • HTML elements to declare modules
  • Code generation for modules
  • Working with other JavaScript libraries (Ambient modules, UMD Modules)
  • Module best-practices
10. Namespace 
  • Namespace syntax
  • Splitting across files
  • Aliases
  • Working with other JavaScript libraries (Ambient namespaces, no implementation)
11. Advanced types 
  • Literal types (string and numeric)
  • Discriminated unions
  • Polymorphic 'this' type (for method chaining)
  • Index types
  • Mapped types
  • Conditional types
12. Generics 
  • Generics syntax
  • Working with generic type variables
  • Generic types
  • Generic classes
  • Generic constraints
13. Enums 
  • Numeric enums
  • Working with generic type variables
  • Heterogeneous enums (mixed enums)
  • Computed and constant members
  • Union enums and enum member types
  • Enums at runtime
  • Reverse mappings
  • Ambient enums
14. Declaration Merging 
  • TypeScript entities
  • Merging interfaces
  • Merging namespaces
  • Merging namespaces with classes, functions, and enums
  • Module augmentation
15. Mixins 
  • Mixin syntax
  • Combining classes
16. Moving code from JavaScript to TypeScript 
  • JSDoc section
  • Compile js with typescript (allowJs flag in config)
  • Rename js to ts, start adding types to file
  • Using dts-gen