Setup a TypeScript Project

Configure TypeScript for React and JSX

Understand the TypeScript Compiler AKA tsc

Explore TypeScript by Writing Functions

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

Work with DOM Elements in TypeScript using Type Assertions

Create Your First Generic in TypeScript

Use Type Definitions for Popular Projects on npm with @types

Up and Running with TypeScript

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.

https://app.egghead.io/api/v1/lessons/typescript-understand-the-typescript-compiler-aka-tsc/subtitles

Instructor: [00:00] When you npm install globally TypeScript, you'll get a tool called TSC. If you invoke that with help, you'll see the large number of options that comes with it. The main ones to look at are the first that come out or the examples.

[00:16] If you create a file called hello.ts and say that four is a number which is two plus two and then run TSC hello.ts, it will output a hello.js file which compiled everything from here down to here.

[00:38] You'll rarely if ever use TSC this way because TSC is included in bundlers and plugins like webpack and Parcel and the Angular CLI behind the scenes. If you do, you would even avoid invoking it manually like this. I'll delete these files.

[00:56] Instead, you would say TSC--init. This creates a file called TSC config.json. These are all the defaults which match. If you look at the output of TSC--help, you see there's a billion options here. Rather than defining all those options on the command line when you invoke it, you can define them in this TS config file and run TSC in the directory with that TS config file in it.

[01:24] For example, if I wanted to specify all my files should go to an outer of ./dist, then I can create a file called one.ts. Just export const of one, which is the number one. When I run TSC and just hit enter, it'll grab my TS config file and create my dist folder. Output that one.js and assign an exports.one to the number one because of how my TS config file said to use common JS and target ES5.

[01:59] If I change my module to ES2015, you'll see that this file supports a lot of autocomplete VS code. I'll run this again. Now our one.js will just have export bar of one because we changed the module system. We could update our target to ES20, we'll go, 18. Run TSC again. Now, this'll be export const of one because now we have const as a language feature.

[02:28] Everything defined in this file will specify which options the TypeScript compiler will use when it compiles. All of these options under strict type checking options. When TypeScript starts complaining that you're not using enough types, you can start disabling some of those warnings or errors and then some additional checks which you usually find in linters and stuff.

[02:48] Then these are based on how your project is configured, source maps for debugging TypeScript. This is a big one for Angular developers or MobX developers who want to use decorators.

Understand the TypeScript Compiler AKA tsc

Share this video with your friends

Course

Up and Running with TypeScript