TypeScript: From Zero to Hero

Leer onderhoudbare JavaScript applicaties ontwikkelen met TypeScript.

Beschrijving

We ontwikkelen vandaag de dag steeds grotere JavaScript-applicaties. Helaas is deze taal hiervoor niet erg geschikt. Daarom gebruiken we TypeScript. TypeScript helpt door JavaScript uit te breiden met een typesysteem. Als gevolg hiervan kun je fouten eerder detecteren en profiteren van betere tooling. Dit alles leidt tot een hogere efficiëntie en codekwaliteit.

In deze training leer je de basis van TypeScript, inclusief primitive types en functions. Vervolgens maak je kennis met meer geavanceerde concepten, zoals literal types, interfaces en generics. Tot slot wordt je expert in je begrip van 'structural typing' door gebruik te maken van mapped types en conditional types.

Er is voldoende tijd om te oefenen, want je implementeert deze concepten in een applicatie die je vanaf de grond opbouwt.

Wist je dat:

• false === true een compile error is?
• interfaces niet bestaan in JavaScript?
• public en private een mythe zijn?
• een class een andere class kan implementeren (implements)?
• een interface een class kan uitbreiden (extends)?
• het definiëren van een class twee dingen doet?
• TypeScript geen type-safe taal is?
• er een type bestaat met de naam never?
• TypeScript support biedt voor exhaustiveness checking?
• je een for-loop kan schrijven in een type?
• je een ternary expressie kan gebruiken in een type definitie?
• je een type kan definiëren met behulp van een template literal?

Leerdoelen

• Contrast TypeScript with JavaScript and older versions of TypeScript [Analyze]
• Outline a modern TypeScript project setup [Remember]
• Implement type-safety for common types to improve maintainability in a JavaScript application [Apply]
• Apply interfaces to define the shape of objects and functions [Apply]
• Demonstrate functional programming techniques in TypeScript [Apply]
• Recognize object-oriented programming syntax in TypeScript [Remember]
• Use generic type arguments to create reusable code [Apply]
• Express an application architecture across multiple ECMAScript modules in a TypeScript project [Understand]
• Use advanced TypeScript features to improve code quality and maintainability [Apply]
• Apply utility types to improve type safety [Apply]
• Produce DRY and typesafe code by making use of utility types [Apply]
• Understand asynchronous programming in TypeScript [Understand]
• Recognize the use of template literal for advanced type safety [Remember]

Onderwerpen

• Introduction
• Getting started
• Types
• Variable declaration
• Functions
• Interfaces
• Classes
• Generics
• Structuring code
• JavaScript interop
• Compiler
• Advanced types
• Advanced use cases
• Async/await
• Mapped types
• Template literal types
• Decorators - if time permits
• JSX Support - if time permits

In this chapter, you will learn the context in which to place TypeScript. Goals:

• Learn how TypeScript relates to JavaScript.
• Know what "type-safety" means and how it relates to TypeScript
• Learn to use TypeScript in a regular JavaScript file.

In this chapter, you will learn how to create a plain TypeScript application. Goals:

• Learn the basics of a NodeJS project.
• Learn the basics of tsc (typescript compiler)
• Know how to run an application in nodejs
• Know how to debug a TypeScript application.
• Learn some basic compiler options.

In this chapter, you will learn how to declare and use primitive types in a TypeScript file. Goals:

• Know the primitive types.
• Understand what any does and why not to use it.
• Learn to use --noImplicitAny
• Learn to use --strictNullCheck
• Know the difference between null and undefined.
• Learn what literal types are.

In this chapter, you will learn the different ways to declare a variable in TypeScript. Goals:

• Know the difference between blocked scope and function scope.
• Learn to use const and let.

In this chapter, you will learn the different ways to define and use functions and some related ES features. Goals:

• Learn to use functions in TypeScript
• Learn to use some recent additions to JavaScript, like spread operator and destructuring.
• Understand what this points to inside a function.
• Know the difference between function expressions and arrow functions

This chapter will dive into the heart of the type system: define the shape of objects with interfaces. Goals:

• Learn what a 'shape' is and how to name one.
• Learn the different ways to modify properties.
• Know how to use index accessors.
• Learn what a method shape is.
• Learn to use overloading in interfaces.

In this chapter, you will learn all there is to know about classes in TypeScript. Goals:

• Learn to use classes.
• Know the difference between private, public, protected, and ES private.
• Learn how to use prototypal inheritance.
• Learn how to use properties and when (not) to use them.
• Know to associate types with classes and class instances.
• Learn to love --strictPropertyInitialization.
• Know how to use method overloading.
• Learn what this points to inside a class body.

This chapter dives into generic type argument. Goals:

• Learn what a generic type argument is and why they are usefull.
• Learn to use type constraints.
• Learn to prevent a death by a thousand overloads using spreading parameter types.

In this chapter, you will learn how to scale your TypeScript application across multiple files.

• Learn the two ways to structure code in TypeScript
• Learn what a "module" is.
• Know the different output modes for modules.
• Know how to consolidate multiple modules into one.
• Know how to avoid some pitfalls with ES modules.

In this chapter, you will learn how to use JavaScript code from TypeScript. Goals:

• Learn how to import and use JS code.
• Know what a declaration file is and how to use them.
• Understand how type-resolution works.

This chapter showcases useful compiler options, and introduces you to project references. Goals:

• Know how to include and exclude TypeScript files.
• Know all the essential options and strictness options.
• Understand when to use project references.
• Learn to split a program into multiple projects with project references.

This chapter showcases advanced type concepts. Goal:

• Understand the concept of "type compatibility"
• Learn to combine types with unions and intersections.
• Learn to name types with an alias
• Know the concept of a "type query".
• Learn to love the unknown type.
• Learn to perform type assertions and type guards

In this chapter, you will combine some advanced concepts of the previous chapter into use cases.

• Learn to create and use a discriminated union.
• Learn what the never type is and why it s usefull
• Learn to create an exhaustive check

In this chapter, you will learn the concept of "Promises" in JavaScript and what TypeScript adds to this. Goals:

• Know the concept of "delayed work."
• Learn to work with promises
• Understand what async and await do to your program.
• Learn to use promises in the wild.

In this chapter, you will learn to define for-loops and if-statements inside TypeScripts type system. Goals:

• Know what a "lookup type" is.
• Learn how to create a simple mapped type.
• Know the build-in mapped types.
• Know what a conditional type is.
• Learn where conditional types can be helpful.

We end with a grand finally: defining and using template literals inside the type system. Goals:

• Know what a template literal type is
• Understand how to create a 'stringly typed' yet type-safe API.
• Know some basic string manipulation in the type system.