Configuring TypeScript 16 exercises

TypeScript Project References

Consider this package.json file:

"name": "exercise",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "run-p dev:*",
"dev:client": "tsc --project ./src/client/tsconfig.json --watch",
"dev:server": "tsc --project ./src/server/tsconfig.json --watch"

Loading exercise


00:00 The way that we had our previous exercises set up with these multiple TS configs is actually not that great for TypeScript to work with. Now, the reason for that is that inside our package.json, we're having to do a little bit of extra dancing really in order to make it work where we can run a single command

00:18 and check the types in the entire repo. So what we have here is a dev client script that runs TSC project, which means you basically run TSC targeting a specific TypeScript config file and then running watch on it. This runs on the client TS config file

00:36 and basically just checks all of the stuff in there. So it's just literally checking that folder. Then we do the same thing on the server too. So we do project source server TS config.json and that runs inside the server stuff. Then we need to run dev, which is runp, which is we get from, I think the package.json in the root

00:56 has npm run all installed, which is a way of running several things either in sequence or in parallel. And that exposes the runp command that we can then say dev asterisk, which means that we run all of the dev scripts here. So what that means is that we have to do a lot of plumbing in order just to get this to work.

01:16 And we'd have to do this for build scripts as well and for any other scripts that involve TypeScript. So we want to find a way to better organize this. And there is a way to do it by using TypeScript project references. I have given you a checklist here because there's quite a lot here to set up and I want you to do it on your own.

01:35 First of all, you're going to add a tsconfig.json file to the root of the exercise file. So inside this project references. Then you're going to add files empty array to this tsconfig.json that you create. I'm going to explain this step afterwards. This is hard to find actually in the proper documentation, but this is very important.

01:53 Then you add a references field to that tsconfig.json which references the client and the server. You're then going to investigate two fields. You're going to investigate, first of all, composite true. I want you just to look up that property and see if you need it. Because if you do need it, you're going to need it inside the client

02:11 and server tsconfig.jsons. Finally, you're going to investigate what tsc-b does and work out where in this package.json you need to add it or where indeed you need to add it at all. And finally, you can look inside this package.json and clean up these dev scripts to actually work.

02:30 So you only need to run a single TypeScript configuration in order to get this working. Good luck.