TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

The first question you ask after installing TypeScript is "What do I do now?" In this course you'll learn about using the TypeScript compiler, configuring your project, definition files, and all the ins-and-outs of understanding how to use TypeScript in your project.

Getting started with TypeScript is easier than ever. You can setup a development environment right in your browser or even quickly put together a local environment in using the parcel bundler.

Setup a TypeScript Project

TypeScript and React go very well together, but it does require a little bit of configure on the TypeScript side due to the nature of JSX. The compiler option for JSX just needs to be set to "react" in the tsconfig.json and you're on your way.

react

Configure TypeScript for React and JSX

The TypeScript Compiler (also known as "tsc") is the backbone of many bundlers, plugins, and tools that work with TypeScript. While we don't often invoke tsc directly, we do configure how tsc behaves inside of the bundlers that we use. This lessons helps you understand the features of tsc and how to use it.

Understand the TypeScript Compiler AKA tsc

I've found the best way to learn TypeScript is by writing functions with input and outputs. Many of the types you use will be on the parameters of functions and the return type of the function itself. So writing functions, moving things around, breaking things, then fixing them based on the compiler suggestions is the quickest way to learn.

Explore TypeScript by Writing Functions

TypeScript can help you with your plain JavaScript files if you add a simple `//@ts-check` comment. Then you can enhance the experience by add proper JSDocs to describe your functions which will feed type information into TypeScript and give you a development experience near TypeScript itself.

Unlock TypeScript's Features in Vanilla JS with @ts-check and JSDoc

The DOM can be a bit tricky when it comes to typing. You never really know exactly what you're going to get, so you have to educate your codebase into what you know you're using. This is done using Type Assertion where TypeScript types know they're a certain type, but you give it additional information so you can access the properties and methods that you know will be available.

Work with DOM Elements in TypeScript using Type Assertions

Generics can be intimidating when you first come across them if you're unfamiliar with typed languages, but once you wrap your head around them, they're as simple as using a variable in JavaScript. This lesson walks through when and why to create a generic and how to use them in TypeScript.

Create Your First Generic in TypeScript

Not all projects on npm ship with their own Type definitions. For example, neither lodash or jquery include them. Thankfully, VS Code can automatically find and install type definitions for you or you can simply bring them in with `npm i -D @types/lodash` from the @types organization on npm.

Up and Running with TypeScript

John Lindquist

Free Community Resource

Free Community Resource

Course Content