How to Build a Dynamic Design System With TypeScript

[00:00 - 00:25] Now let's continue with our TypeScript configuration and zap back to our terminal. Now to add TypeScript to the whole project we can run yarn add the development flag because we will only use TypeScript in the development environment. Then TypeScript and we can also specify the version we want to install in our case 4.7.2.

[00:26 - 01:32] And this is done and we can continue adding TypeScript to each packet because right now we can see we have TypeScript installed as a dev dependency to the root of our repository but we don't have TypeScript in our React packets for example. To do this is really easy we add TypeScript to the React packets and we are doing the same for our foundation and storybook packets. This step could be done easier with a command and applying in for workspaces which is called for eats and then we would execute yarn workspaces for eats and the command name in our case install the packets the TypeScript packets. So we have TypeScript installed in every single packets as a dev dependency and the next step is to add a TypeScript configuration.

[01:33 - 03:32] To do this we can create a new file and call it TypeScript config.json and in this configuration you can copy and paste the configuration options you will find in the text version of this lesson. And here you don't know to need every single setting you can search in the TypeScript website for yourself but some important settings is the path that you basically link everything that is hosted under the packages the wildcard and the folder lib so everything that will be hosted in the compiled version of our React and foundation packets to the new line ds / and the package name. So this is basically to help our TypeScript compiler find all the local packages that will link through the yarn workspaces and then we exclude the node modules and all the test files. So now that we have the TypeScript configuration in the root of our repository we can extend this inside our react packets so we can click and add a new file called TypeScript config.json and here we will paste a more minimal configuration which is basically saying that we extend our root TypeScript configuration then as a base URL we will look on a source folder we will compile everything to the library folder and those are React specific settings and then also our target will be ESnext and if we have to target low low entry JavaScript engines we can make this ES3 for example but let's give it to us next. So to make to see if this work we can create a source folder and then an index.

[03:33 - 04:59] ts file and paste the following code inside which is a really simple function called hello takes and name an optional parameter called the name which is a string and it returns either the name or the word as a string and how we can compile so we have our source folder and we want to combine everything to do this we will create a script here called build and it will use the Type Script compiler and to do this we can run here yarn workspace new line react and build and now we can see we have a new file a new folder called lib with everything inside so we have the index.ts our source map and then the TypeScript definitions and one thing to note here is that this is an esm module and if you are targeting libraries in your company that are more on the legacy part of things and they use common.ts there is a section in the text version of this course to help you find out how you can target common.ts versus esm consumers for your own company and that was a wrap and later on we will create our own eslint and preter configs.