Project references allow you to safely and reliably work on multiple TypeScript projects at the same time. So in this lesson, we will look at the use case for project references along with the features that enable them, such as the composite property, the references property, and the compiler bill flag. So let's go to demonstrate project references. We have two simple projects, an example Lib, which is going to be our referenced project. And then we have the Consumer Example app, which is going to be referencing the Lib project. Within our example Lib, we have a very simple function called Hello

that simply returns the string. And the use case is to use this or any other utility library functions within our app. For example, Hey, we have a very simple main function that logs out the value that will be returned from this Hello Utility. Now of course, right now type sheet is complaining that this Hello function does not exist within the example app. And one potential bad fix would be to start importing example a Lib source code into our example app. Now you probably don't want to do this intuitively either. And Touch Script is also going to complain in this particular case.

And the error is that the source code from example Lib, does not exist within the root directory that is specified for the example app project. Now you can try to fix this by modifying the include of your app project to include the source code of the lip project, but that results in more issues. For example, now your app code is also a part of the lip code within a particular TS config. So you can actually end up importing your app code into your lip code projects. So the better solution is to actually use project references with project references.

App and Lib are still going to be in their own self-contained projects. And the only dependency that we will create is that the lib code can be imported into the app code. The first modification that we will need to make is within the Ts config of the project that we want to reference. That is the project that we want to use like a library. So within our example Lib, we need to modify the TS config compiler options and set composite to true. This option makes sure that this project is now ready to be referenced by other projects and ensures that there are certain options

that are enabled within this particular TS config, such as declarations being generated and a decent root TIR for this particular project. Congratulations. And now our example, lib is ready for consumption. So we jump into our example app. And now in order to add a reference to any other project that we want to use with an example app, we add a references section to the TS config and add the path to as many projects as we want to reference. And we are only referencing example lib over here. With this change in place, we can now import the example lib into our example app

as if it was an NPM package. We have to use a relative path because we haven't published it to NPM, but notice that we are including the route directory that contains the package of Jason, for example, lib. And now because of that project reference text script is able to resolve the hello function from that Route directory. And that's it for the Ts config changes. Basically add composite to anything that you want to reference and add references to anything that does the consumption. Now there is one more neat trick within TypeScript for the projects that are doing the consuming and that is the build flag.

Instead of using the minus P or project flag, use the build flag. And this will not only compile this particular project, but any of the projects that it depends upon. So it'll compile in type check example app as well as example lib. And we can see this in action by opening up the terminal and executing in PM run Built. And we can see that the output is not only generated for example app, but also for the example the project. And this automatic building of any of the dependencies not only works for static bills, but also for the incremental watch flag.

So within the example app package of Jason, we have another script called Start, which executes build with an additional minus minus watch flag. And when we execute that, if you modify the source code for the example, lib the project build, for example, app will automatically pick up that a dependent project has been modified and actually recompile that. And if you open up another terminal and execute our example app, you can see that it is now using the updated example, lib generated JavaScript.