
Lesson Description
The "Server TypeScript Files" Lesson is part of the full, TypeScript: From First Steps to Professional course featured in this preview video. Here's what you'd learn in this lesson:
Anjana walks through adding type declarations and enabling TypeScript compiler options, highlighting how TypeScript integrates with VS Code. She emphasizes fixing missing type annotations to prevent implicit any errors in function signatures during conversion.
Transcript from the "Server TypeScript Files" Lesson
[00:00:00]
>> Anjana Vakil: And now we have, uh, oh, this one's my problem I wrote a file API.js that doesn't have any type declarations Maybe we can fix that by making it a .ts file And so on for the others We're going to rename everything, and you could have done this before installing the types if you just love having lots of errors all at once so that then you can feel better about that count of errors going down, which is totally legit
[00:00:38]
Got to get that dopamine, girl OK, so now we're starting to TypeScriptify everything OK, we got .js files all over the place Let's fix that .ts Where were we We were getting, ah yes, OK, we have .js, we want .ts And it's still mad Oh right, OK There is a TypeScript compiler option, allow importing TS extensions that we have not enabled So we could enable it or we could, hopefully, oh, no, it's going to say it needs explicit, oh gosh, OK, we're going to enable it
[00:01:28]
Tsconfig.json, I get to do whatever, let's see if it's, uh, TS extensions No, it's not in here Let's go back to our file where we were seeing that No, it was up here And we want allow importing TS extensions needs to be enabled Fine, fine Compiler, we'll do it We'll do whatever you say Allow importing TS extensions There's even one called allow importing arbitrary extensions, which is fun
[00:02:05]
All right, now, where are we at OK, now we're no longer complaining about these .ts, we're just complaining about regular stuff like missing type annotations, and we know how to handle that Uh, oh, gotta miss, uh, one more .ts here, OK Now what else is going on Ah, we have one more dependency we didn't install types for This is, again, we're doing a very, very quick and dirty little database here pretending that we have a real database
[00:02:36]
So there's a library called better-sqlite3, and let us hope that if we run npm i -D @types/better-sqlite3 It worked, and now, hopefully, eventually, TypeScript gets the message OK, and this is, did you notice how it took it a minute for that squiggle to go away This is something that I've been kind of hand-waving away, but we've been running tsc at the command line a lot
[00:03:10]
Meanwhile, we've been getting a lot of squiggles and red file names and things like that in our editor without having to manually run tsc What is the deal, man The deal is that TypeScript and VS Code are BFFs and VS Code is running a whole bunch of TypeScript-related services for us in the background to be checking our types, our files, our whole codebase, using whatever tsconfig.json we have if we have one
[00:03:52]
And sometimes, like we said, that if you're running like tsc watch, sometimes it gets a bit slow It takes VS Code sometimes a minute to catch up with us And occasionally, sometimes you'll get into a state where like, I've installed the types, but the squiggle remains Why Gods of Microsoft, why And what we can do, sometimes if you're like, I really think that this type is here now
[00:04:22]
It used not to be, but it's here now, and TypeScript is still complaining Just FYI, in VS Code you can open with Command+Shift+P You can open this set of command, is it called the command palette perhaps And one of them, which you can see is my most recently used, is to restart the TS server that's running in the background And occasionally, if you're like losing your mind because code keeps saying you have a type-related error that you're pretty sure isn't supposed to be there because something changed in your tsconfig
[00:05:06]
If you restart the server, often it will help OK, so a little pro tip: Command+Shift+P and then start typing TypeScript, and it will show you a bunch of related TypeScript things You can explore what all those do later But this one sure can be handy, especially if you're working in big projects or like lots of different dependencies and things Often it can get a little laggy, but it's cool, it's got a lot on its plate
[00:05:35]
OK I think that was about 10 minutes So now, hopefully, we are in a state where the errors that we're getting are more useful for us and not just related to TypeScript having no idea what these dependencies are So if we run tsc again and just see how we're doing, we've got two files with problems, and they relate to type signatures not having information and therefore having these implicit any in our function signatures, excuse me
[00:06:11]
So we have our implicit any error message that we've seen like 8 billion times and we will see 8 billion 1,000 times more.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops