Egghead Instructor Basarat Ali Syed

Basarat Ali Syed

That #TypeScript guy. Helping #JavaScript - TS upgrades. YouTuber, Book Author, Presenter, OSS Dev .



Support Basarat's Free Lessons
become a member today

Browse Basarat Ali Syed's lessons.

showing 15 lessons...

Getting started with Jest using TypeScript

Serialize objects to JSON

Coding interview: FizzBuzz problem and its solution

Using ES6 and ESNext with TypeScript

Create a fluent API using TypeScript classes

Using TypeScript for pure JavaScript

Create stateful React Components using TypeScript

Increase TypeScript's type safety with noImplicitAny

Create stateless React components using TypeScript

Bootstrap a TypeScript + React Project

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

Make usages of "this" safe in class methods

Catch unsafe use of "this" in TypeScript functions

Simplify asynchronous callback functions using async/await

Render Basic SVG Components in React

typescript tutorial about Getting started with Jest using TypeScript

Getting started with Jest using TypeScript

3:17 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 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

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 Coding interview: FizzBuzz problem and its solution

Coding interview: FizzBuzz 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

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

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

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

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

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

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

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

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 Make usages of "this" safe in class methods

Make usages of "this" safe in class methods

0:59 typescript

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

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

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

react tutorial about Render Basic SVG Components in React

Render Basic SVG Components in React

1:35 react

React loves svg just as much as it loves html. In this lesson we cover how simple it is to make SVG components in ReactJS.

Creating SVG components with React allows you to inline SVG. Inline SVG has an advantage that it can be styled with CSS just like the rest of your webpage and doesn't need a separate web request to load.

An additional advantage is of-course that you can use component props to customize the contents of the SVG.

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