TypeScript

TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Any browser. Any host. Any OS. Open Source.

COURSES 3

WATCH Basarat Ali Syed's COURSE

Build Algorithms using Typescript

Build Algorithms using Typescript

Algorithms are the basic construction of the computer programs that you are writing every day. They take language syntax and th...

20 lessons

WATCH Ari Picker's COURSE

Use Types Effectively in TypeScript

Use Types Effectively in TypeScript

TypeScripts purpose, the reason it exists, is to add a solid type system on top of ECMAScript 6+. JavaScript is a dynamically t...

10 lessons

WATCH John Lindquist's COURSE

Up and Running with TypeScript

Up and Running with TypeScript

The first question you ask after installing TypeScript is "What do I do now?" In this course you'll learn about using the TypeS...

14 lessons

Refactor Services and Quick Fixes with Typescript 2.5

This lesson covers the Refactoring services and Quick fixes provided by Typescript 2.5

Akash Gutha
1:32

Type check JavaScript files using JSDoc and Typescript 2.5

Typescript 2.5 adds JSDoc type assertion support for javascript file via ts-check service.

Akash Gutha
1:31

Avoid Catching Errors with TypeScript 2.5 Optional Catch Clauses

Typescript 2.5 has brought a couple of interesting changes to the table. let's take a look at these new features and how to take advantage of these features. Optional catch clauses: TypeScript 2.5...

Akash Gutha
2:03

Create a TypeScript Library using typescript-library-starter

Creating a library is always a cumbersome process with lots of setup and decisions to make. TypeScript library starter makes this process very easy and automated, using latest in tech configs and l...

Alex Jover Morales
5:00

Use Prettier with TSLint without conflicts

Prettier is an amazing code formatting tool that has support for TypeScript. With Prettier, you don't need care about code formatting rules. TSLint is a static analysis tool that checks TypeScript ...

Alex Jover Morales
1:52

Understand lookup types in TypeScript

Lookup types, introduced in TypeScript 2.1, allow us to dynamically create types based on the property keys of an object. We'll use the function spyOn from Jest to illustrate how lookup types can t...

Alex Jover Morales
1:55

Deep Copy aka Clone objects using TypeScript

You can create copies of JavaScript objects by coping around properties e.g. const x = {foo: 123}; const y = { foo: x.foo }. However doing this manually for deep objects can be time consuming. In t...

Basarat Ali Syed
2:25

Create high quality npm packages using TypeScript

The TypeScript compiler makes it super easy to create high quality NodeJS packages that can be used with compile time safety in other TypeScript packages. Using JavaScript packages written in Type...

Basarat Ali Syed
3:54

Generics using TypeScript

In this lesson we cover the key reason why programming languages need generics. We then show how use them effectively with TypeScript. We show plenty of examples where generics prevent common progr...

Basarat Ali Syed
5:16

Getting started with Jest using TypeScript

Jest is a painless JavaScript unit testing framework from Facebook. It is designed to be super easy to setup and is packed full of powerful features. In this lesson we see how easy it is to add to ...

Basarat Ali Syed
3:17

Serialize objects to JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. Doing JSON serialization and de...

Basarat Ali Syed
4:32

Using ES6 and ESNext with TypeScript

TypeScript is very particular about what is and isn't allowed in a TS file to protect you from common developer errors. By default if you set the compile target to ES5 it only allows you to use glo...

Basarat Ali Syed
2:49

Browse all TypeScript lessons.

showing All 79 lessons...

Add options to a Vuex plugin using TypeScript

Write a Vuex Plugin using TypeScript

Call a Root Vuex Mutation or Action from within a Module in TypeScript

Use Namespaces in Vuex Stores using TypeScript

Access the Root State from a Vuex Module using TypeScript

Lazy Load a Vuex Module at Runtime using TypeScript

Find Max Items and Max Height of a Completely Balanced Binary Tree

Implement the heap data structure using JavaScript

Refactor Services and Quick Fixes with Typescript 2.5

Type check JavaScript files using JSDoc and Typescript 2.5

Avoid Catching Errors with TypeScript 2.5 Optional Catch Clauses

Shuffle an array

P

Parse a string to an integer

P

Implement a doubly linked list in TypeScript

P

Implement a singly linked list in TypeScript

P

Queue implementation using TypeScript

P

Stack implementation using TypeScript

P

Create a TypeScript Library using typescript-library-starter

P

Use Prettier with TSLint without conflicts

P

Understand lookup types in TypeScript

P

Binary Search Algorithm using TypeScript

P

Quicksort algorithm using TypeScript

P

Create random integers in a given range

P

Find the repeated item in an array using TypeScript

P

Merge sort algorithm using TypeScript

P

Insertion sort algorithm using TypeScript

P

Bubble sort using TypeScript

P

Determine if a string is a palindrome

P

Determine if two strings are an anagram

P

Deep Copy aka Clone objects using TypeScript

P

Case insensitive sorting for string arrays

P

Create high quality npm packages using TypeScript

P

Generics using TypeScript

P

Sort arrays in TypeScript

Getting started with Jest using TypeScript

P

Serialize objects to JSON

P

Understand the FizzBuzz coding problem and its solution

Using ES6 and ESNext with TypeScript

P

Create a fluent API using TypeScript classes

P

Using TypeScript for pure JavaScript

P

Create stateful React Components using TypeScript

P

Increase TypeScript's type safety with noImplicitAny

P

Create stateless React components using TypeScript

P

Bootstrap a TypeScript + React Project

P

Use the never type to avoid code with dead ends using TypeScript

P

Install TypeScript declarations from npm

P

Make usages of "this" safe in class methods

P

Catch unsafe use of "this" in TypeScript functions

P

Simplify asynchronous callback functions using async/await

P

Practical Generics in TypeScript

P
typescript tutorial about Add options to a Vuex plugin using TypeScript

Add options to a Vuex plugin using TypeScript

3:03 typescript

In some cases we may want to pass some options to a Vuex plugin, in order to make it more customizable. This lessons shows how can you make a Vuex plugin accept a persist parameter in order to save the state to the localStorage in TypeScript

typescript tutorial about Write a Vuex Plugin using TypeScript

Write a Vuex Plugin using TypeScript

4:22 typescript

Sometimes we need to apply common functionality to the store. Vuex plugins allow us to access the store which allows direct access to State and Mutation using hooks.

This lesson shows you how you can add a history Vuex plugin that keeps track of the called mutations using TypeScript.

typescript tutorial about Call a Root Vuex Mutation or Action from within a Module in TypeScript

Call a Root Vuex Mutation or Action from within a Module in TypeScript

2:19 typescript

Everything in a Vuex Module is local to itself: the State, Mutations, Actions, Getters. But sometimes you need to call something from the outside. This lesson shows how you can call an external Mutation and Action from within a module in TypeScript.

typescript tutorial about Use Namespaces in Vuex Stores using TypeScript

Use Namespaces in Vuex Stores using TypeScript

2:52 typescript

Even by using modules, they still share the same namespace. So you couldn’t have the same mutation name in different modules. Namespaces solve that by prepending the path of the module to the State, Getter, Action, and Mutation.

This lesson shows how to use namespaces in Vuex modules with TypeScript.

typescript tutorial about Access the Root State from a Vuex Module using TypeScript

Access the Root State from a Vuex Module using TypeScript

1:46 typescript

If you need to access another part of the state from within a module, you could do it by accessing the root state. This lesson shows you how to access the Vuex root state in getters and actions to perform cross-module operations in TypeScript.

typescript tutorial about Lazy Load a Vuex Module at Runtime using TypeScript

Lazy Load a Vuex Module at Runtime using TypeScript

2:43 typescript

Sometimes we need to create modules at runtime, for example depending on a condition. We could even want to lazy load that module by using Webpack’s code splitting feature.

This lesson shows how to lazy load a Vuex module under a determined condition using TypeScript.

typescript tutorial about Find Max Items and Max Height of a Completely Balanced Binary Tree

Find Max Items and Max Height of a Completely Balanced Binary Tree

3:26 typescript

A balanced binary tree is something that is used very commonly in analysis of computer science algorithms. In this lesson we cover how to determine the maximum number of items it can accommodate.

We follow this with a discussion on the maximum height of a binary tree given we need to accommodate n items.

typescript tutorial about Implement the heap data structure using JavaScript

Implement the heap data structure using JavaScript

11:43 typescript

Heap is a data structure that can fundamentally change the performance of fairly common algorithms in Computer Science.

The heap data structure is called a heap because it satisfies the heap property. The heap property states, that if P is a parent node of C, then the value of node P is less than the value of node C.

In this lesson we discuss the key operations of the Heap data structure along with their performance. We then implement the data structure using TypeScript / JavaScript.

Refactor Services and Quick Fixes with Typescript 2.5

1:32 typescript

This lesson covers the Refactoring services and Quick fixes provided by Typescript 2.5

Type check JavaScript files using JSDoc and Typescript 2.5

1:31 typescript

Typescript 2.5 adds JSDoc type assertion support for javascript file via ts-check service.

Avoid Catching Errors with TypeScript 2.5 Optional Catch Clauses

2:03 typescript

Typescript 2.5 has brought a couple of interesting changes to the table. let's take a look at these new features and how to take advantage of these features.

Optional catch clauses: TypeScript 2.5 brings a new ECMAScript-bound feature for making catch clauses optional. Most of the time, you’ll find yourself writing a try/catch but not really caring about the thrown error. So Typescript provides you some syntactic sugar for omitting the error paramter.

typescript tutorial about Shuffle an array

Shuffle an array

3:58 typescript PRO

Shuffling is a common process used with randomizing the order for a deck of cards.
The key property for a perfect shuffle is that each item should have an equal probability to end up in any given index.

In this lesson we discuss the concept behind the simple modern fisher yates shuffle and implement it in JavaScript / TypeScript.

typescript tutorial about Parse a string to an integer

Parse a string to an integer

3:50 typescript PRO

A common interview question is to write
 a
function
that
converts
 a
 string
into
an
integer e.g. "123" => 123.
 This
 function 
is commonly
 called
 atoi because
 we
 are
 converting
 an
 ASCII
 string
 into 
an 
integer.

In this lesson we cover the proper way to do this in JavaScript which is parseInt along with implementing it using basic ascii math.

typescript tutorial about Implement a doubly linked list in TypeScript

Implement a doubly linked list in TypeScript

3:36 typescript PRO

In a doubly linked list each node in the list stores the contents of the node and a pointer or reference to the next and the previous nodes in the list. It is one of the simplest way to store a collection of items.

In this lesson we cover how to create a doubly linked list data structure and how to use its strengths to implement an O(1) FIFO queue + O(1) LIFO stack. We also demonstrate why one would use it over a singly linked list. We also cover how to approach authoring such data structures.

typescript tutorial about Implement a singly linked list in TypeScript

Implement a singly linked list in TypeScript

4:15 typescript PRO

In a singly linked list each node in the list stores the contents of the node and a reference (or pointer in some languages) to the next node in the list. It is one of the simplest way to store a collection of items.

In this lesson we cover how to create a linked list data structure and how to use its strengths to implement an O(1) FIFO queue.

typescript tutorial about Queue implementation using TypeScript

Queue implementation using TypeScript

3:34 typescript PRO

A queue is an abstract data type that serves as a collection of elements, with two principal operations: enqueue, which adds an element to the collection, and dequeue, which removes the earliest added element. The order in which elements are dequeued is First In First Out aka. FIFO. The term queue takes it name from the real world queues e.g. "a queue at the ticket counter".

A good target is to implement these operations with a time complexity of O(1). In this lesson we discuss how to implement it using JavaScript / TypeScript.

typescript tutorial about Stack implementation using TypeScript

Stack implementation using TypeScript

2:08 typescript PRO

A stack is an abstract data type that stores a collection of elements, with two principal operations:
* push: adds an element to the collection
* pop: removes the most recently added element that was not yet removed.

The order in which elements are poped is Last In First Out aka. LIFO. In this lesson we discuss how to implement it using JavaScript / TypeScript.

typescript tutorial about Create a TypeScript Library using typescript-library-starter

Create a TypeScript Library using typescript-library-starter

5:00 typescript PRO

Creating a library is always a cumbersome process with lots of setup and decisions to make. TypeScript library starter makes this process very easy and automated, using latest in tech configs and libraries such as Rollup, Jest, Prettier, TSLint, TypeDoc...

This lesson will walk you through creating a simple "tell-my-time" library from scratch, formatting and linting the code, generating optimized multiplatform bundles, unit-testing the library and showing up the important bits of the configuration.

typescript tutorial about Use Prettier with TSLint without conflicts

Use Prettier with TSLint without conflicts

1:52 typescript PRO

Prettier is an amazing code formatting tool that has support for TypeScript. With Prettier, you don't need care about code formatting rules. TSLint is a static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.

This lesson shows you how can use tslint-config-prettier in order to combine both seamlessly.

typescript tutorial about Understand lookup types in TypeScript

Understand lookup types in TypeScript

1:55 typescript PRO

Lookup types, introduced in TypeScript 2.1, allow us to dynamically create types based on the property keys of an object. We'll use the function spyOn from Jest to illustrate how lookup types can type-safe function parameters.

typescript tutorial about Binary Search Algorithm using TypeScript

Binary Search Algorithm using TypeScript

3:05 typescript PRO

Binary search is a very fundamental algorithm in Computer Science. It powers BSTs (binary search trees) which form the basis of modern databases and immutable data structures. Binary search works very much the way humans intuitively search for a name in a yellow pages directory (if you have ever seen one) or the dictionary.

In this lesson we learn how to implement a Binary Search Algorithm using TypeScript / Javascript, and we describe the problem that it solves.

typescript tutorial about Quicksort algorithm using TypeScript

Quicksort algorithm using TypeScript

5:49 typescript PRO

Quicksort (also called partition sort and pivot sort) is arguably the most used sorting algorithm. It is the one commonly implemented internally in language runtimes.

We’ll be covering step by step a recursive approach to solving the quick sort algorithm with TypeScript / Javascript and why exactly it’s called quick sort.

typescript tutorial about Create random integers in a given range

Create random integers in a given range

1:53 typescript PRO

In this lesson, using TypeScript / Javascript, we learn how to solve a common problem given to new developers in interviews, generate a random number between two integers.

typescript tutorial about Find the repeated item in an array using TypeScript

Find the repeated item in an array using TypeScript

1:44 typescript PRO

Say you have an array that has at least one item repeated. How would you find the repeated item. This is a question commonly presented to beginner developers. Here we discuss the elegant solution to this problem.

typescript tutorial about Merge sort algorithm using TypeScript

Merge sort algorithm using TypeScript

5:39 typescript PRO

MergeSort is a famous example of a divide and conquer algorithm.

In this lesson we cover the merge sort algorithm, how it gets its name, and how to implement it using TypeScript / JavaScript.

typescript tutorial about Insertion sort algorithm using TypeScript

Insertion sort algorithm using TypeScript

3:43 typescript PRO

Insertion sort is a very intuitive algorithm as humans use this pattern naturally when sorting cards in our hands.

In this lesson, using TypeScript / Javascript, we’ll cover how to implement this algorithm, why this algorithm gets its name, and the complexity of our implementation of the insertion algorithm.

typescript tutorial about Bubble sort using TypeScript

Bubble sort using TypeScript

3:25 typescript PRO

Bubble sort is considered the simplest sorting algorithm to implement. We’ll approach the problem in two ways. Once using a set number of iterations, and next using an idiomatic approach.

We’ll be covering this problem using TypeScript / Javascript

typescript tutorial about Determine if a string is a palindrome

Determine if a string is a palindrome

3:35 typescript PRO

A palindrome is a string that reads the same forward and backward, for example, radar, toot, and madam. In this lesson we discuss how to approach the palindrome problem using TypeScript / JavaScript.

We also discuss a more complex algorithmic challenge of writing a function to check if any permutation of a given string is a palindrome.

typescript tutorial about Determine if two strings are an anagram

Determine if two strings are an anagram

3:52 typescript PRO

The anagram test is commonly used to demonstrate how an naive implementation can perform significant order of magnitudes slower than an efficient one. We’ll also briefly go over why each implementation is not as efficient as you could make it.

A word is an anagram of another if you can rearrange its characters to produce the second word. Here we’ll write multiple increasingly more efficient functions that given two strings determines if they are anagrams of each other.

typescript tutorial about Deep Copy aka Clone objects using TypeScript

Deep Copy aka Clone objects using TypeScript

2:25 typescript PRO

You can create copies of JavaScript objects by coping around properties e.g. const x = {foo: 123}; const y = { foo: x.foo }. However doing this manually for deep objects can be time consuming. In this lesson we cover one way of deep copying simple objects in TypeScript.

typescript tutorial about Case insensitive sorting for string arrays

Case insensitive sorting for string arrays

1:33 typescript PRO

We look at the default Array.prototype.sort behavior and discuss how you can do case insensitive string sorting. This isn’t as straightforward as it seems, Javascript by default sorts capitalized words before lowercase. In this lesson we’ll learn exactly how to deal with this behavior using TypeScript.

typescript tutorial about Create high quality npm packages using TypeScript

Create high quality npm packages using TypeScript

3:54 typescript PRO

The TypeScript compiler makes it super easy to create high quality NodeJS packages that can be used with compile time safety in other TypeScript packages.

Using JavaScript packages written in TypeScript can save you a lot of time digging around docs and then having to memorize the docs, in order to call the functions with the right spellings. This frees you up for a higher level of thinking and reasoning about logic and business requirements.

typescript tutorial about Generics using TypeScript

Generics using TypeScript

5:16 typescript PRO

In this lesson we cover the key reason why programming languages need generics. We then show how use them effectively with TypeScript. We show plenty of examples where generics prevent common programming mistakes.

typescript tutorial about Sort arrays in TypeScript

Sort arrays in TypeScript

3:54 typescript

In this lesson we cover all the details of how to sort a list of items using TypeScript. There are a few things that will catch beginner developers off guard, such as the .sort method mutating your array, and how the .sort method doesn’t sort numbers how you’d expect. In this lesson we’ll be going over these gotcha’s and how to work around them.

We’ll also present a few tricks to make your sort logic more readable and maintainable using TypeScript.

typescript tutorial about Getting started with Jest using TypeScript

Getting started with Jest using TypeScript

3:17 typescript PRO

Jest is a painless JavaScript unit testing framework from Facebook. It is designed to be super easy to setup and is packed full of powerful features. In this lesson we see how easy it is to add to your TypeScript project. This will be followed by a quick example application.

typescript tutorial about Serialize objects to JSON

Serialize objects to JSON

4:32 typescript PRO

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

Doing JSON serialization and deserialization in JavaScript and TypeScript is super easy as it is a format essentially designed for this language. This lesson covers the JSON.stringify primitive provided by JavaScript runtimes.

typescript tutorial about Understand the FizzBuzz coding problem and its solution

Understand the FizzBuzz coding problem and its solution

4:19 typescript

The FizzBuzz problem is commonly presented as the lowest level of comprehension required to illustrate adequacy in computer programming.

In this lesson you learn about the problem as well as its solution in TypeScript. We will also cover some tricks on approaching the problem and coding interview questions in general.

typescript tutorial about Using ES6 and ESNext with TypeScript

Using ES6 and ESNext with TypeScript

2:49 typescript PRO

TypeScript is very particular about what is and isn't allowed in a TS file to protect you from common developer errors. By default if you set the compile target to ES5 it only allows you to use globally defined variables that were available in the ES5 time-frame. That said it is super easy to configure TypeScript to use ES6 or ESNext using the lib option.

We also cover how to make sure that these features work across the widest range of browsers using a simple polyfill.

typescript tutorial about  Create a fluent API using TypeScript classes

Create a fluent API using TypeScript classes

3:09 typescript PRO

You can create an easy to chain API using TypeScript classes. Learn about the this return type annotation and how it plays with function chaining and class inheritance.

typescript tutorial about Using TypeScript for pure JavaScript

Using TypeScript for pure JavaScript

2:15 typescript PRO

TypeScript can actually be used just as a JavaScript -> JavaScript Transpiler e.g. ES6 -> ES5. This allows you to easily maintain your old JavaScript code base along with potentially uplifting to a TypeSafe version using a single compiler.

typescript tutorial about Create stateful React Components using TypeScript

Create stateful React Components using TypeScript

2:56 typescript PRO

You can create stateful React Components in TypeScript by extending from the React.Component class. This parent class takes two generic parameters, Props and State.

This lessons shows these generic parameters and React.Component in action

typescript tutorial about Increase TypeScript's type safety with noImplicitAny

Increase TypeScript's type safety with noImplicitAny

2:24 typescript PRO

TypeScript tries to infer as much about your code as it can.

But sometimes there really is not enough context for it to infer reliably. If it tried to do such inference it would potentially result in more nuisance than help. So instead it infers the type any. This type can catch people off guard as it provides very little type safety. Fortunately TypeScript has a flag to make it easier to catch such unsafe code at development time.

typescript tutorial about Create stateless React components using TypeScript

Create stateless React components using TypeScript

1:13 typescript PRO

You can create a stateless React component in TypeScript by just creating a function.

But if you want to create high quality idiomatic React + TypeScript components you should use the React.StatelessComponent interface. This is demonstrated in the video.

typescript tutorial about Bootstrap a TypeScript + React Project

Bootstrap a TypeScript + React Project

5:54 typescript PRO

Setup a TypeScript + React project from scratch using webpack. Learn the reason behind every line that you need to type and become an expert.

typescript tutorial about Use the never type to avoid code with dead ends using TypeScript

Use the never type to avoid code with dead ends using TypeScript

1:24 typescript PRO

Programming language design does have a concept of bottom type that is a natural outcome as soon as you do code flow analysis. TypeScript does code flow analysis (😎) and so it needs to reliably represent stuff that might never happen. This is what the never type is all about.

typescript tutorial about Install TypeScript declarations from npm

Install TypeScript declarations from npm

1:31 typescript PRO

This lesson shows you how to acquire type declaration files for your TypeScript projects directly from npm.

typescript tutorial about Make usages of "this" safe in class methods

Make usages of "this" safe in class methods

0:59 typescript PRO

this is determined by how you call a function. To write class methods that can always safely use this you can use the TypeScript property initializer syntax along with arrow functions.

typescript tutorial about Catch unsafe use of "this" in TypeScript functions

Catch unsafe use of "this" in TypeScript functions

1:04 typescript PRO

this is probably the most tricky thing to use in JavaScript and therefore TypeScript. Fortunately there is a TypeScript compiler flag noImplicit this that can help catch unsafe usages so beginners don't get caught off guard.

typescript tutorial about Simplify asynchronous callback functions using async/await

Simplify asynchronous callback functions using async/await

1:48 typescript PRO

Learn how to write a promise based delay function and then use it in async await to see how much it simplifies code over setTimeout.

Lets say you want to call a function after 1s, 2s, 3s. You can use setTimeout, or you can wrap it up into a simple delay function that works with async/await

typescript tutorial about Practical Generics in TypeScript

Practical Generics in TypeScript

2:52 typescript PRO

Typescript generics are great for writing code that accepts any type. How do we write code that doesn’t accept any type, but instead accepts a range of types? In this lesson we learn how to use generic classes, interfaces and constraints to be more specific with our Typescript generics.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?