Typescript ⌨📜 — Proof of Concept

TS = JS + Type Checking. This repository is created for my own reference/revision for the language Typescript. The repository contains code and concepts related to typescript and the various design patterns it uses. Please feel free to go through this repository and learn typescript.

Resources

1. Typescript: The Complete Developer's Guide [2020] by Stephen Grider
2. Understanding TypeScript - 2020 Edition by Maximilian Schwarzuller
3. Typescript Language Official Docs

Required Dependencies

• Node Package Manager (npm) for Package Management. Check if npm was installed or not by opening the cmd/terminal and type in npm --version, you should see the version of npm you installed.
• After installing npm, we will install typescript and ts-node with the command npm i -g typescript ts-node in cmd/terminal. To check if the typescript was successfully installed, in the cmd/terminal, type in the command tsc --help, and you should see some output regarding typescript help. NOTE: tsc stands for typescript compiler.
• Download Visual Studio Code as the editor as it has extensive typescript support.

Useful Tools/Commands

• Typescript Playground - Online Editor To Play Around With Typescript

Typescript Compiler Details (and its Configuration)

• Help from Official Docs

  • What is tsconfig.json?
  • tscCLI options
  • TSConfig Reference Manual

• Additional Details on Important Options in TSConfig

  1. Compiling Typescript Files
  2. Compiling the Entire Project / Multiple Files
  3. Including & Excluding Files
  4. Setting a Compilation Target
  5. Understanding Typescript Core Libs
  6. Working with Source Maps
  7. rootDir and outDir
  8. Emitting Options
  9. strict Option

Contents

I. Why Write Code In Typescript?

API Used: https://jsonplaceholder.typicode.com Endpoints Used: /todos Dependencies Used: npm i --save axios

1. Basic Setup: Commit Details
2. Executing TS Code Using tsc, node & ts-node: Commit Details
3. Introducing a Bug: Commit Details
4. Catching Errors with Typescript using interface: Commit Details
5. Introducing Another Bug using a Function: Commit Details
6. Catching Errors related to a Function: Commit Details

II. The Type System

1. What are Types? More on Types. Where do we use Types? ← READ THIS BEFORE MOVING AHEAD ⭐⭐⭐
2. Examples of Types: Commit Details

III. Type Annotations In Action

1. What is Type Annotation & Type Inference?
2. Type Annotations with Variables: Commit Details
3. Basic Type Annotations with Arrays, Classes & Object Literals: Commit Details
4. Basic Type Annotation with Functions: Commit Details
5. Understanding Type Inference In-Depth: Commit Detail #1 & Commit Detail #2 ← VERY IMPORTANT ⭐⭐⭐

IV. Type Annotations with Functions & Objects

1. More on Annotations Around Functions: Commit Details
2. Inference Around Functions: Commit Details
3. Annotations for Anonymous Functions: Commit Details
4. Functions returning void and never typed values: Commit Details
5. Destructuring Objects with Type Annotations: Commit Details
6. Complex Example of Destructuring Objects with Type Annotations: Commit Details

V. Mastering Typed Arrays

1. Arrays in Typescript: Commit Details
2. Why Typed Arrays?: Commit Details
3. Multiple Types in Arrays: Commit Details

VI. Tuples in Typescript

1. Tuples in Action && Intro to Type Aliasing: Commit Details
2. Why Tuples & Why Not Tuples? Commit Details

VII. Miscellaneous Types (Lesser Usage)

1. Working with enums: Commit Details
   • Enums are enumerated global constant identifiers that automatically start with 0.
2. Literal Types & Union Types: Commit Details
3. The unknown type: Commit Details

VIII. Classes & Interfaces ⭐⭐⭐

1. What are Classes? — A class is a blueprint to create an object with some fields (values) and methods (functions) to represent an entity/thing/real-world-object
2. Classes in Action: Commit Details
3. Class with constructor(): Commit Details
4. constructor() function and the this keyword: Commit #1 & Commit #2
5. private & public Access Modifiers: Commit #1 & Commit #2
6. Shorthand Initialization of Properties in a class: Commit #1 & Commit #2
7. readonly Properties: Commit Details
8. Inheritance: Commit Details
9. Overriding Properties & The protected Access Modifier: Commit Details
10. Getters & Setters using get & set: Commit Details
11. static Methods & Properties: Commit Details
12. abstract Classes: Commit Details
13. Singleton Pattern & private constructors: Commit Details
14. What are Interfaces?
    • interface creates a new type, describing the property names and value types of an object.
    • interfaces is a pure TS feature and so, it is not available in JS. If we look into a JS file which is converted from a TS file (which had interface related code), we will see that none of the interfaces are compiled to its respective JS version because interfaces are native to TS, and not JS.
15. Long Type Annotations: Commit Details
16. Fixing Long Annotations with interfaces: Commit Details
17. Syntax Around Interfaces: Commit Details
18. Using interfaces with classes: Commit Details
19. readonly Interface Properties: Commit Details
20. extending Interfaces: Commit Details
21. Functions in Interfaces: Commit Details
22. Code Reuse with Interfaces: Commit Details
23. interfaces as Function Types: Commit Details
24. Optional Parameters & Properties for an interface: Commit Details

IX. Advanced Typing Concepts ⭐⭐

1. Intersection Types: Commit Details
2. More on Type Guards: Commit Details
3. Discriminated Unions: Commit Details
4. Type Casting - Not much of casting, but informing: Commit Details
5. Index Properties ⭐⭐: Commit Details
6. Function Overloads: Commit Details
7. Optional Chaining: Commit Details
8. Nullish Coalescing: Commit Details

X. Generics ⭐⭐⭐

1. Built-in Generics & What are Generics? Commit Details
2. Creating a Generic Function: Commit Details
3. Working with Constraints: Commit Details
4. Generic Function w. Custom Interface: Commit Details
5. The keyof Constraint: Commit Details
6. Generic Classes: Commit Details
7. Generic Utility Types like Partial<> & Readonly<>: Commit Details
8. Generic Types vs Union Types: Commit Details

XI. Decorators ⭐⭐

Open tsconfig.json and set "target": "es6" & "experimentalDecorators": true before moving ahead with the content below.

Note: For more info on tsconfig.json related to this section, check this file here

1. A First Class Decorator: Commit Details
2. Working with Decorator Factories: Commit Details
3. Using Decorator(s) to Manipulate the DOM: Commit Details
4. Adding Multiple Decorators to a single Class: Commit Details
5. Property Decorators: Commit Details
6. Accessor, Method & Parameter Decorators: Commit Details
7. When Do Decorators Execute? Commit Details
8. Returning (& Modifying) a Class in Class Decorator: Commit Details
9. Decorator Return Types for Method & Accessor Decorators (Read about Object.defineProperty() before going ahead): Commit Details
10. Returning Descriptor From A Method Decorator (Ex: Creating an @Autobind Decorator): Commit Details
11. Validation with Decorators
    1. Why to Validate Using Decorators? Commit Details
    2. Implementation of Validation Using Decorators: Commit #1, Commit #2 [Shortening the code using DRY] & Commit #3 [Bug Fixes]
12. Libraries that use/rely heavily on Decorators are the following
    1. typestack/class-validator — Decorator based property validation for classes.
    2. Angular — Frontend JS/TS Framework that relies heavily on decorator implementations.
    3. NestJS — A progressive Node.js framework for building efficient, reliable and scalable server-side applications, which also uses a lot of decorator based meta programming constructs for making a GET, POST, etc routes.