# TypeScript components
🎉 Calling all TypeScript developers 🎉
During the beta, the
@pipedream/types package and other TypeScript configuration in the
pipedream repo is subject to change.
# Why TypeScript?
Most Pipedream components in the registry (opens new window) are written in Node.js. Writing components in TypeScript can reduce bugs and speed up development, with very few changes to your code.
If you haven't written TypeScript, start with this tutorial (opens new window).
If you've never developed Pipedream components before, start here.
# Developing TypeScript components in the
pnpm installto install dependencies.
See the RSS sources and actions (opens new window) for example
tsconfig.jsonconfiguration and TypeScript components. If the app you're working with doesn't yet have a
tsconfig.jsonfile, copy the file from the RSS component directory and modify accordingly.
In the RSS examples, you'll see how we use the
defineSourcemethods from the
@pipedream/typespackage. This lets us strictly-type
thisin apps and components. See the TypeScript docs on
ThisType(opens new window) for more detail on this pattern.
npm run build
The build process should print the compiled JS files to your console.
Use the Pipedream CLI to
If it doesn't exist in the app directory, add a
.gitignorefile that ignores the following files. Commit only
tsfiles to Git, not compiled
*.js *.mjs dist
# Developing TypeScript components in your own application
First, install the
# npm npm i --save-dev @pipedream/types # yarn yarn add --dev @pipedream/types
You'll need a minimal configuration to compile TypeScript components in your application. In the Pipedream registry, we use this setup:
tsconfig.jsonin the root of the repo contains references (opens new window) to component app directories. For example, the root config provides a reference to the
components/rssdirectory, which contains its own
npm run buildcompiles the TypeScript in all directories in
tsconfig.jsonin each component app directory contains the app-specific TypeScript configuration.
- The GitHub actions in
.github/workflowscompile and publish our components.
See the RSS sources and actions (opens new window) for an example app configuration.
# Known issues
We welcome PRs in the
PipedreamHQ/pipedream repo (opens new window), where we store all sources and actions, the
@pipedream/types package, these docs, and other Pipedream code. Here are a few known issues durin the beta:
thisis strictly-typed within
hooks, and everywhere you have access to
thisin the component API. But this typing can be improved. For example, we don't yet map props to their appropriate TypeScript type (everything is typed with
- The compile -> publish lifecycle hasn't been fully-automated when you're developing in the
pipedreamrepo. Currently, you have to run
npm run buildfrom the repo root, then use the
pdCLI to publish components after compilation. It would be nice to run
tsc-watchand have that compile and publish the new version of the component using the
--onSuccessflag, publishing any sources or actions accordingly.
- We should add a linter (like
dtslint) to all TypeScript components). Currently,
dtslintis configured only for the
types directory of the
PipedreamHQ/pipedream repo (opens new window) for Pipedream types. We welcome PRs!
# Giving feedback during the beta
We welcome any feedback, bug reports, or improvements. Please reach out or submit PRs in our Slack, Discourse and GitHub communities (opens new window).