Take this
course

Software Development / Web Development

Mastering TypeScript

Explore TypeScript in depth with detailed examples and put it all into practice by building a project

Description

Writing large applications in JavaScript is a challenge. TypeScript brings JavaScript down to Earth by providing optional static typing and future JavaScript features today.


TypeScript gives the developer instant feedback on the code they are writing in order to catch mistakes earlier in the development process. Since it is transpiled to JavaScript, developers can take advantage of future JavaScript language features today.


Mastering TypeScript will take you on a journey from understanding and interacting with the type system to working efficiently with more advanced features of the language.


We’ll start by introducing a simple client/server application. Then use the application to demonstrate key components of the TypeScript language.


Once the sample application is set up, we’ll look in detail at TypeScript’s type system. Then we take a look at more advanced language features, learn to deal with JavaScript libraries, and finally use TypeScript to utilize static typing between parts of an application.


Mastering TypeScript will help you write better TypeScript code and gain a deeper understanding of the language.

Full details

Curriculum

  • Getting Started
    The Course Overview
    This video will offer the overview of the course.
    3:24
    Sample Application Overview
    What does the sample application look like? • Step through the sample application • Step through the technologies used
    4:14
    Compiling TypeScript in the Sample Application
    We need to add TypeScript to the sample application. This video will review some of the ways of compiling Typescript, and then show you how we are going to compile the sample application in this case. • Review the common methods for compiling • Look at the build script • Run the TypeScript build task
    4:32
  • Deploying the Type System
    Implicit or Explicit Types
    When should implicit types be used and when should explicit types be used? • Point out an example of an implicit and an explicit type in the application • Understand the case for using implicit types • Where we should implement explicit types
    6:54
    Avoiding the "any" Type
    The “any” type should be avoided. This video will explain why. • Avoid it to prevent mistakes • Use union types instead of using 'any', where applicable • Use type guards to separate the types out of a union type
    3:37
    Being Aware of Structural Typing
    Not many developers know that TypeScript uses a structural type of system instead of a nominal one. • Learn about structural typing and nominal typing • Get an overview of the benefits of structural typing • Understand the dangers of structural typing
    2:43
    Type System Troubles
    What are some troubles that people experience with the type system? • Realize the dangers with enum types • Examine changed and limited behavior in the type system • Avoid certain language aspects to help write readable code
    4:08
    Compiler Options for Added Support
    What compiler options can we use to make the compiler stricter? • Get an overview of "noImplicitAny" • Change tsconfig.json to add "noImplicitAny" • Relax the strictness with "suppressImplicitAnyIndexErrors"
    2:24
    Enforcing Rules and Coding Standards
    What is a linter and what benefit does it bring? • Download and install linter • Run the linter and understanding its benefits
    4:24
  • Moving to ES6 Classes
    Introduction – Before Moving
    This video will introduce the viewer to moving towards ES6 classes. • Talk about non-ES6 class patterns • Discuss what makes a good candidate for an ES6 class • Get an overview of steps for switching to ES6 classes
    3:55
    Class-like JavaScript Patterns to TypeScript (Part 1)
    How can we convert some JavaScript patterns to ES6 classes? • Identify what will change • Change it to an ES6 class • Talk about the benefits
    5:53
    Class-like JavaScript Patterns to TypeScript (Part 2)
    How can we convert some JavaScript patterns to ES6 classes? • Identify what will change • Change it to an ES6 class • Talk about the benefits
    4:25
    Static Class-like Patterns in TypeScript
    What do static class-like patterns look like in TypeScript? • Two JavaScript examples • One class example • Overview of what we are doing in these examples
    3:18
    Shortening a Class with Parameter Properties
    How do we reduce code written using parameter properties? • Identify what a parameter property is • Identify how to use the parameter property • Look at the generated JavaScript
    1:41
    When to Use Arrow Function Properties
    When should we use arrow methods on a class? • Identify what an arrow method is • Understand whether to use it or not, and where
    6:02
  • Interacting with the Type System
    Assert and Guard
    What is type assertion and type guarding and how can we use them appropriately? • Check a simple example showing type guarding and then type assertion • Look at the new syntax for type assertion • Discuss when we should use a type assertion and when we should use a type guard
    5:25
    Making the Most of Type Guarding
    How can we use type guarding in situations where type guarding doesn't work? • Look at an example where standard type doesn't work • Use duck typing and a type assertion to narrow down the type • Use the user-defined type guarding
    5:06
    Multiple Function Signatures
    When should we use function overloading, optional, and default parameters? • Get an overview for implementing function signatures • Add multiple function signatures • Use optional and default parameters
    6:05
    Rest and Spread
    What are some other features we can use with functions? • Using rest parameters and spread operators in your application • Using the spread operator on more than just functions
    2:20
    Extending Built-in Types
    How can we extend built-in types without modifying an object we don't own? • Add functions to existing types • Extend built-in types • Demonstrate an example on built-in types
    4:01
    Code Refactoring
    What is code refactoring and how do we use it in TypeScript? • Identify what code refactoring is • Understand what is automatic and manual code refactoring • How does TypeScript help us
    3:22
  • Representing JavaScript Libraries
    Definition Files
    What are definition files? • Outline the problem • Explain what a definition file is • Compile a file with the declaration argument in order to demonstrate a definition file
    4:36
    Writing a Definition File
    How can we write a definition file? • Take a look at a few resources – Definitely Typed and TypeScript Handbook • Go through a simple example on the basics of writing a definition file
    7:47
    Strong Typing JavaScript Libraries on the Run
    How can we use a JavaScript library when we don’t have time to write a full definition file? • Use an 'any' type in our application • Define only the functionality that is necessary for your application
    5:25
    Downloading and Managing Definition Files
    What’s the best way to manage definition files? • Looking at the DefinitelyTyped collection of definition files • Install and initialize TypeScript Definition Manager (TSD) • Download definitions via TSD
    5:44
    Included Definition Files
    What are some of the definition files included by default in TypeScript? • Identify where we find the definition files • Look at lib.d.ts • Modify lib.d.ts
    4:18
  • Language Features for Code Improvement
    Making the Most of let and const
    What is let and const? How do they differ from 'var'? • Problems with var • What is let • What is const
    5:19
    Working with Strings
    What’s a better way we can work with strings in TypeScript? • Use string interpolation • Work with multi-line strings • Tagged templates
    6:01
    enums
    How can we use enums to write better code? • Use const values in a separate module • Use an enum • Explicitly versus implicitly assigning values
    5:22
    const enums Versus enums
    What are const enums and how do they differ from enums? • Look a bit more on the nature of enums • Use a const enum • Differences between const enums and regular enums
    3:24
    Moving to ES6 Modules
    How can we use ES6 modules to write better code? • Importing/exporting • Bare importing • Re-exporting
    7:47
    Destructuring
    What is destructuring and how can it help us write better code? • Array destructuring • Object destructuring • Resources
    5:13
  • Advanced ES6 and ES7 Features
    Introduction to Generators
    What are generators? How do they work? • Introduce what a generator is • Show their execution path • More practical example
    6:28
    Improving Performance and Efficiency with Generators
    How do generators help improve performance and efficiency in our application? • Look at simple example's speed and memory usage • Increasing the number of items in the data • Increasing once again causes the array method to display an out of memory error. Then show how the generator way still uses practically no memory
    4:00
    Easier Asynchronous Code with async/await
    How does async and await work? • Use promises instead of callbacks • Use async and await
    3:54
    Harnessing the Power of Decorators
    How can decorators help us in our code? In this video, we’ll step through an example in our sample app. • Look at what a decorator is • Outline of requirements • Example with a "log" method decorator
    7:37
    Advanced Decorators
    How can we have a decorator with parameters? • Create a function that returns a function with a method decorator signature • Overview of additional resources
    3:35
  • Bridging Statically Typed Gaps
    Sharing Code Across Applications
    How can we share code across multiple applications? • Store code in one application and pushing/pulling it to/from the other application • Store the code separately and pushing/pulling it to/from the applications • Take a look at the slice-it pizza sample application
    5:24
    Bridging with Interfaces
    What’s one way that we can help bridge the type gap? • Look at the problem • Fix it with interfaces • Fix it with a shared configuration
    5:49
    Bridging with Code Generation
    How can we bridge the server/client strongly typed gap? • Show principles on how to use code generation • Explain how an example of this can be found in the sample application
    3:25
    Using TSX Files
    How can we bridge the gap between our View and client-side TypeScript code? • Identify what JSX files are • Identify what TSX files are • Additional resources
    5:12

Skills

  • JavaScript

Similar Courses

More Courses by this Instructor