Create a TypeScript Library using typescript-library-starter
Creating a library is always a cumbersome process with lots of setup and decisions to make. TypeScript library starter makes this process very easy and automated, using latest in tech configs and libraries such as Rollup, Jest, Prettier, TSLint, TypeDoc...
This lesson will walk you through creating a simple "tell-my-time" library from scratch, formatting and linting the code, generating optimized multiplatform bundles, unit-testing the library and showing up the important bits of the configuration.
[00:02] I'm going to open TypeScript library starter by cloning it from its repository. Open up a terminal, and run NPM install. That will show a prompt asking for the library name. This library will tell us the time, so call it TellMyTime.
[00:20] Writing a library needs to set up a lot of different things, like bundling or preparing the package.json. When it's asking us for the library name, it's actually setting up all of that for us like the rollout configuration.
[00:34] In package.json, it creates two bundles, some other bundles. We'll use the module if it's present, and if not, we will the main property with the UMD bundle. It sets the typings file as well as the author and the license based on your Git name and email.
[00:52] It also initiated the Git project, so we go to the console, and type git status. We see Git recognizes everything as new. It has configured as well in the entry point for the source code and for the test. Let's open the source file file.
[01:10] This starter uses Prettier and TSLint. TSLint will take care of non-formatting rules, like it can be the member ordering. Here, it's telling us that public members must go first. For the formatting rules, such as indentations, quote marks, semicolons, and so on, it will not lint any of those, because Prettier will already fix that.
[01:36] To see it in action, let's type git app., and then make a dummy commit. We'll see that Prettier just fixed everything. Now, delete all of this. We are going are going to write a function, tell, that will return the current time in a human-readable format.
[01:55] For that, we are going to use Moment. Let's install, NPM install Moment, so then we can import it here. Let's write this, which will return that human-readable time. Let's generate the bundles. For that, we have a build comment. Let's run NPM run build.
[02:14] It generates this folder with documentation, with the types, and with two bundles. ES5 [inaudible] bundle, and the UMD is universal, which will work in all environments. If we take a look at the bundle, we'll see that it is a bunch of code.
[02:28] That's because Moment has been bundled with it. We want to keep Moment as a pure dependency, and keep it out of the bundle. For that, we have to go to the rollout config, and add moment as a string to the standard property.
[02:41] Then if we run it again, we'll see now that Moment is not bundled with it, neither in the ES5 bundle nor in the UMD one. Now, let's talk about testing. This starter uses Yes. For any configuration or assertion functions, you can always check the documentation. Now, let's run a test that the tell function is returning the current time.
[03:14] Let's paste the Moment line here. Of course, we need to import it first. We have several handy scripts to use for this. For example, NPM run test. We can also run it in watch mode. For that, run test:watch. Then if we change something in the source code, we make it fail. Let's go back to that test and fix it, and it reruns automatically.
[03:45] Another handy one is NPM run test:prod, which will first check the linting, and then run the test in production mode with coverage. You cannot change any testing configuration. They all are in the package.json and the digest key.
[04:03] For example, you can change the coverage threshold, or for example, if you are testing for Node, you can change the test environment to Node, which by default, is JS DOM. Finally, let's going to test this library.
[04:17] We can do that locally by running NPM Link, which will create a relative link to this package with the name that we set in package.json. Here, I have an empty consumer project. Here, we can run NPM Link TellMyTime. This will install our library from the relative link that we have created.
[04:36] Then let's import tell from TellMyTime, and we will now put the time. Let's write a console log here. Now, we can run PSC to compile the TypeScript file, and now the index to execute it. We see it's logging the function declaration. That's because we are not calling the function. Let's call it and run it again. Then we see the current time.