Typescript for better Javascript
Version usage: > 3.4.0
The Book: https://basarat.gitbooks.io/typescript/content/
Videos:
- Beginner: https://www.youtube.com/watch?v=WBPrJSw7yQA
- React + Typescript: https://www.youtube.com/watch?v=0_C2X1yRRac
Typescript REPL: https://repl.it/languages/typescript
Shortcuts:
All links are recommended at the time. With time they might become outdated.
Scope of Typescript:
- User Interface Development (with React)
- Server side api development (with Express)
- Tests (with Jest)
How to use Typescript for better
We want to use Typescript not only for typeschecks and auto-completions but for the bigger picture of scaling Javascript for readability, maintainability across teams. and reduce overall bug density.
It is essential that to think in typescript while writing typescript to leverage full capabilities of the language. For this we need to be fluent with the concepts of types, classes and interfaces in typescript. There are tens of best practices and guides but unless we organize our code in typescipt’s philosophy we won’t get the best out of it.
The types, classes and interfaces are the key elements and better we become at these, better typescript’s autosuggestion, bug detection becomes. It may not seem to be that much important the beginning, but once we get past a level of complexity we get stuck with typescript because of the nature of complex javascript object and complicated use cases, we just can’t go with what typescript expects, we fail to represent our data, behaviour and interactions and at that point we lose the benefit of typescript.
We should be able to use advanced types to proper represent our data structure, able to create our own type definitions, use available definitions for open source libraries and in some cases even write type declarations for external libraries which do not have type definitions.
Interfaces provide a great way to enforce consistency across objects. In addition to consistency, interfaces can also be used to ensure that proper data is passed to properties, constructors and functions. Classes with interfaces are powerful structures that facilitate not just object-oriented programming but also fantastic type-checking. \
One the of advanced patterns we need to learn is to use generics in interfaces and extend interfaces. This is also something we get into immediately after we past a medium level of complexity. In any project, after some time, we soon find ourselves writing behaviors based on the data types, passing complex objects as args, adding or extending available types. Without proper knowledge of these, we’ll end up making use of any, and the benefits of specifying a type.
Recommended Reading:
- Advance Types
- Advance Types with examples
- Declaration Files
- Generics
- Generics with examples
- Extending Interfaces: an example with Express Req/Resp
- Clean & Consistent Express.js Controllers
- SOLID Typescript
Some patterns in this repo
- Classes, Base classes and abstract classes => Controllers Section
- Interfaces for defining contracts within our code as well as contracts with code outside of our project => Cognito Section
- Make your own Error => Errors
- Fighting with Typescript in tests => Controller spec
The project might not be all complete and not all perfect, but there are also plently of good ideas. Also find some real world usage of advance concepts like abstract classes, generics, type assertion, typescript promises and some domain driven designs.
Truth about code auto-completion
As we get write better types, interfaces and follow patterns, we'll notice that the the editor's auto completion begins to get incredibly smart and things happens in real time (I have been using vscode). While this is good, on the flipside anything that is not on the auto correct, there is high chance typescript compiler will think the code is invalid and will fail to accept the code to build. This makes sense because typescript is not smart by itself, more we write better types, interfaces and classes, it knows our data structures and becomes smarter with it and if we fail to make typescript understand our code, it will simply fail to be effective. I guess our goal should write better typescript to get better auto-completion so that we make most of our code gets auto-completion which makes sure it has been analyzed by typescript compiler and passed all the early bugs and issues.
Some screens:
While typescript analysis and compiler wont be able to remove 100% of the javascript bugs most of which happens at the run time it surely catches a good percentage of it. While there is a developer time/effort tax that we have to pay, we hope to make it worth it; A postmortem analysis at Airbnb says 38% of bugs at Airbnb could have been prevented by TypeScript