Check out a free preview of the full Production-Grade TypeScript course:
The "Introduction" Lesson is part of the full, Production-Grade TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Mike North introduces TypeScript as a programming language, compiler, and a langage server.TypeScript is a syntactic superset of JavaScript, built upon the existing JavaScript language. It allows for more robust linting, better IDE tooling, and compile-time error checking.

Get Unlimited Access Now

Transcript from the "Introduction" Lesson

>> Welcome, everybody to Professional TypeScript. I'm Mike North, I'm a senior staff engineer at LinkedIn, where I lead infrastructure product design. And I'm the company's TypeScript language expert. So today, we're going to be talking about the use of TypeScript in non-trivial projects. So we're calling this Professional TypeScript.

[00:00:22] And the idea here is we take you from knowing a little bit about the programming language. Such as having completed one of the earlier TypeScript courses in the Frontend Master catalog. To being able to be proficient with this language for your everyday use. One of the most important things I hope to leave you with at the end of this course is being able to speak about TypeScript in terms of the benefits it brings to your project.

[00:00:48] In addition to being aware of the limitations, and knowing how to de-risk some of those limitations, so to speak. So TypeScript is obviously a programming language, it's a compiler, right? We we run the TSC command in our command line, and it's also a language server. This is part of the magic behind Visual Studio Code, the thing that gives you those great autocompletes.

[00:01:15] The things that lets you control click, and go from file to file, and navigate through your code really effectively. It is a syntactic superset of JavaScript. So this does not mean that every piece of JavaScript is going to make the TypeScript compiler happy. In fact, the point is to encourage you to do certain things, right?

[00:01:39] To make sure you're keeping your types consistent, it's gonna object to a lot of JavaScript. It's a syntactic superset in that it builds upon the existing JavaScript syntax that you know. TypeScript provides the core of the best authoring environment available today for web development, and for no Node.js development.

[00:02:00] But I think of it almost as a fancy linter, right? In a modern tool chain TypeScript is just doing the type checking. And often we rely on tools like Babel to actually admit JavaScript modules. So really TypeScript role in the asset pipeline is to make sure that you're following through on the guarantees you intend to make.

[00:02:23] Like a function returns this kind of value, it'll make sure that you're actually doing them. As a product design person, so I like to think about these kinds of things as the types of problems that they aim to solve, right? What does TypeScript aim to solve? Well, first, in a JavaScript Code base without types.

[00:02:46] As you get more and more code as more contributors during the project, things become more difficult to manage, right? It starts to become harder to keep these contracts between modules under control. And when I say that informal contracts grow organically, I'm not talking about organic groceries or organic food.

[00:03:07] And we're talking about organic mold that's growing in someplace you don't want it, right? This is the idea of things just keep getting added, and added, and added as people tack on more features. And you want things to sort of, at any given state, you want them to look like they were designed, with intent, right?

[00:03:31] They were designed, like there was a purpose in mind, and we're keeping organized types make that much easier. TypeScript solves the problem of JavaScript editing environments being way behind some other programming languages, right? So if you look at a Java IDE, like IntelliJ, right? They have right click to refactor, and they can click to go in from an instance of a class to where that class is defined.

[00:04:00] The JavaScript ecosystem has largely been missing out on this. And TypeScript kind of allows this this ecosystem to catch up. And then finally, there's this issue of safety. Too many JavaScript errors are discovered at runtime by users. And TypeScript takes some subset of those, and brings them into compile time.

[00:04:23] So that they're caught as you're compiling your code before you even open a pull request, as opposed to being something that a user will report as a bug, right? Catching these things earlier is always a good thing. We're gonna learn about TypeScript today in the context of building a real world app, or a simplified version of one.

[00:04:44] And this of course, is Slack, right? Where you have several teams, each team has a channel or one or more channels, and the channel has messages here. So this is designed to be a non-trivial project. It's still small enough that we can get a feel for some of the real world challenges you're likely to face when using TypeScript every day as a professional and in production.

[00:05:12] The topics that we're going to talk about, begin with a little recap of recent advancements in the TypeScript programming language. So we're gonna talk about new language features that have been added. We'll touch a little bit on library versus app concerns, there are certain things that only libraries care about.

[00:05:31] We're going to go from an empty folder to my preferred set up for a TypeScript project. And this will include API documentation, it'll even help us understand for a given pull request. What are the ramifications on the API surface of my little library? So a lot of automation there with minimal tooling, just to keep things nice and simple.

[00:05:58] We're going to have a deep understanding by the end of this course around, how things build, how things are limited, and how to test them? And we're gonna really understand each one of these little config files that are in the project, so that you can take this back to your team.

[00:06:14] And you can apply what we've learned today. If you've looked at the previous course, TypeScript, three fundamentals, v2. I presented there a strategy for converting a code base from JavaScript to TypeScript. Now, if you tried to apply this on a large scale project, you probably found that step three, the third of the three steps, that entails 80% of the work, right?

[00:06:39] It's a lot of work, so we're gonna spend some time today breaking that down, and helping define a path for a larger project with a bigger team. How do we get from JavaScript to TypeScript successfully without it feeling like you're trying to scale a cliff on that third step?

[00:06:58] We'll talk about definitely typed, which is a community repository for ambient type information. This is where you would get types for something like react, or lodash. And dealing with these ambient type files, these declaration files is a bit tricky. There are things that you need to know about, how these work and what the limitations are?

[00:07:20] And I'll show you, how I debug these, and how I work with these? And set you up for success in the likely event that you find something wrong with one of these things. You will be able to go to GitHub and fix it, and keep your app moving.

[00:07:39] One of the biggest problems that we deal with in in the TypeScript world is runtime values, right? These are API responses we get from a JSON API. How do we deal with those when the TypeScript piece of your app, the type information it disappears after build time? How do we make sure that we're treating API responses in a way that keeps our type base guarantees strong?

[00:08:07] We'll talk about tests for types, tests for that pure type information, not just the test that you're writing for your JavaScript Code but in TypeScript, right? So we'll look at two tools, and I use both of these together that allow you to test your type information just like you test everything else.

[00:08:28] And then finally, towards the end of the day we'll talk about automated API change detection. Meaning, if you have a component and it makes certain, like functions available, how do you know when your contracts between things are changing? I'll introduce you to a tool called API Extractor that makes this process easier than you ever thought possible.

[00:08:51] And then finally, I'm gonna share some of the knowledge I have from LinkedIn about using TypeScript at scale, right? This is teams with 200 contributors and hundreds of code changes being merged every day. How does a project like that stay fast? And you can take some of these tips, and you can bring them into your own app.

[00:09:10] And if it makes a huge codebase fast, it'll make your app fast too. So with that, please click this link should be pretty easy to remember. Click this link, and it'll take you to a Git repo. And the next thing we're going to do is follow the instructions in the README.

[00:09:28] And be careful to read the README, there are some steps in there you may not have seen before. And we're gonna get set up with this workshop project, the Slack app.