We are trialing or using TypeScript in a number of projects. In order of adoption, these include:
- Clay. Clay is a well-isolated dependency that liferay-portal consumes in the form of built npm packages. This means that the language choice inside Clay is somewhat of an implementation detail, and moving to TypeScript in version 3 (mid-2019) didn't require any TypeScript-specific tooling inside DXP in order work with it.
- Liferay JS Toolkit. Both version 2 and the current version are (at least partially) ported to TypeScript.
- Liferay DXP. We added our first TypeScript project in August 2020 (
remote-app-client-js), following that withfrontend-js-state-webin March 2021, and portingfrontend-js-react-webto TypeScript in April. With those pieces in place, we have the ability to create new projects in TypeScript, port existing projects (either partially or completely) to TypeScript, and have cross-project type features (eg. type-checking and editor features such as auto-completion, inline diagnostics, "go-to-definition" and so on).
For other projects, we should weigh up the relative costs and benefits of using TypeScript. For example, in projects that don't have build processes — examples include js-themes-toolkit and npm-tools — we've found that the ability to iterate and debug in-place (even inside the "node_modules") has been a useful debugging workflow that would be made more difficult if we switched to TypeScript, so we've stayed with untranspiled vanilla JavaScript so far.
For information about how TypeScript projects are configured and how the build works in Liferay DXP, see the documentation inside the @liferay/npm-scripts package.
To learn about TypeScript in general, the following resources may be useful:
- The official TypeScript documentation.
- Also on the official site, the playground can be useful for quick experimentation without having to set-up a development environment.
- Tackling TypeScript by Dr. Axel Rauschmayer.
- TypeScript Deep Dive by Basarat Ali Syed.
- When using TypeScript and React, check out the react-typescript-cheatsheet for helpful tips.
Finally, exploring the bundled type definitions (example: DOM APIs) included with TypeScript itself can be a useful way to discover existing types that you can use in your own type annotations. In many cases, you can jump straight to these definitions by hitting the "go-to-definition" key-binding in your IDE or editor. Once configured, this "go-to-definition" trick will work for any type definitions that may be available from DefinitelyTyped; for example, if you look under modules/node_modules/@types in a liferay-portal checkout, you will see that we already have @types/react, @types/react-dom, and many others.
We anticipate building up a set of lints and recommendations over time, as our usage of TypeScript grows. For now, we simply refer you to the TypeScript "Do's and Don'ts" page on the official TypeScript website. It contains some obvious best practices, such as strenuously avoiding the use of the any type and so on.
Additionally, we recommend the use of strict compiler settings wherever possible, to eliminate common sources of errors. As you can see, we have "strict": true set by default in the base TS configuration file that we use in Liferay DXP.