Index › 3. Type Safety
Learn how to implement type safety in your Kitten apps.
Topics covered
- JSDoc.
- TypeScript
- TypeScript Language Server.
- The Kitten Types package (@small-web/kitten-types).
A little less magic, a little more type
A design goal of Kitten is to be easy to play with. Want to spin up a quick experiment or teach someone the basics of web development? Kitten should make that simple to do. Having magic globals like the kitten.html tagged template you saw earlier help with that.
However, for larger or longer-term projects where maintainability becomes an important consideration, you can easily add type safety.
Once you’ve enabled type-safety for Kitten, any modern development environment that supports language intelligence for JavaScript via the TypeScript Language Server (e.g., Helix Editor, VSCodium, etc.) will pick them up and use them to provide you with static type checking, auto-completion, etc.
From the directory you were working in during the previous tutorial, run the following command:
kitten add type-safety
This command installs the @small-web/kitten-types module that contains Kitten’s types and is automatically-generated from Kitten’s own source code. It also adds the files below to your project to configure TypeScript (you don’t need to use TypeScript for type-safety, you can also use JavaScript with JSDoc).
Next, in your favourite editor (I use Helix Editor with the TypeScript Language Server), show the type information for the html tagged template string as referenced on the kitten global.
In Helix Editor, you can show type information for an object by positioning your cursor over it and pressing space + k.
Also, either in your terminal (e.g., using ls) or in a graphical file system navigator, take a look at your project folder to see the files that Kitten has added:
The key files are tsconfig.json (which references tsconfig.server.json and tsconfig.client.json, as described in the reference), globals.d.ts and client-globals.d.ts. This enables Kitten type safety to work out of the box for both JavaScript and TypeScript projects, the latter of which needs globals.d.ts to re-export the kitten global, etc.
Technically, you don’t even need a tsconfig.json/jsconfig.json file (they’re the same schema) for JavaScript projects; just adding // @ts-check to the top of your JavaScript files is enough. But it’s good to have, not least of all because it makes the supported language features explicit and creates a seamless migration route should you decide to port your project to TypeScript in the future.
For a detailed look into how you can manually do everything that kitten add type-safety does, please see the Type Safety section in the Kitten reference.
Now that you know to use type safety and the @small-web/kitten-types module to create more maintainable Small Web apps, let’s take a little detour and look at Kitten’s Markdown support.
Next tutorial: Markdown