Woodshop for old agent generation
Try the new agent generation
  • What is woodshop
  • How to's
    • Smart Relationship
      • GetIdsFromRequest
    • Smart views
      • Display a calendar view
      • Create a custom tinder-like validation view
      • Create a custom moderation view
      • Create a dynamic calendar view for an event-booking use case
    • Configure environment variables
      • NodeJS/Express projects
    • Elasticsearch Integration
      • Interact with your Elasticsearch data
      • Elasticsearch service/utils
      • Another example
    • Zendesk Integration
      • Authentication, Filtering & Sorting
      • Display Zendesk tickets
      • Display Zendesk users
      • View tickets related to a user
      • Bonus: Direct link to Zendesk + change priority of a ticket
    • Dwolla integration
      • Display Dwolla customers
      • Display Dwolla funding sources
      • Display Dwolla transfers
      • Link users and Dwolla customers
      • Dwolla service
    • Make filters case insensitive
    • Use Azure Table Storage
    • Create multiple line charts
    • Create Charts with AWS Redshift
    • View soft-deleted records
    • Send Smart Action notifications to Slack
    • Authenticate a Forest Admin API against an OAuth protected API Backend
    • Translate your project into TypeScript
      • V8
        • Migrate Mongoose files
        • Migrate Sequelize files
      • v7
        • Migrate Mongoose files
        • Migrate Sequelize files
      • v6
    • Geocode an address with Algolia
    • Display/edit a nested document
    • Send an SMS with Zapier
    • Hash a password with bcrypt
    • Display a customized response
    • Search on a smart field with two joints
    • Override the count route
    • Make a field readOnly with Sequelize
    • Hubspot integration
      • Create a Hubspot company
      • Display Hubspot companies
    • Impersonate a user
    • Import data from a CSV file
    • Import data from a JSON file
    • Load smart fields using hook
    • Pre-fill a form with data from a relationship
    • Re-use a smart field logic
    • Link to record info in a smart view
    • Display data in html format
    • Upload files to AWS S3
    • Display AWS S3 files from signed URLs
    • Prevent record update
    • Display, search and update attributes from a JSON field
    • Add many existing records at the same time (hasMany-belongsTo relationship)
    • Track users’ logs with morgan
    • Search on relationship fields by default
    • Export related data as CSV
    • Run automated tests
  • Forest Admin Documentation
Powered by GitBook
On this page
  • Requirements
  • Configuration

Was this helpful?

  1. How to's
  2. Translate your project into TypeScript

V8

In this example, we will guide you through the steps to turn your project into a TypeScript project. After the guide has been completed, you will benefit from strong type checking and code completion.

Use this example only for version 8

Requirements

In this example, we will assume that you are familiar with TypeScript and that you have it installed. If this is not the case, simply run the following to get packages you will need in this Woodshop: npm install --save-dev typescript tsc-watch

To make it easy for you, we created our own typings to help you using our exposed tools using TypeScript. Until version 6 they were located in the DefintelyTyped GitHub repository. Starting from version 7, they are now directly integrated into our forest-express-sequelize and forest-express-mongoose packages. That being said, no additional package needs to be installed.

Configuration

As for every TypeScript project, we need to create a configuration file. It helps the transpiler to know where to take the files from, and where to transpile them. To have a smooth migration into TypeScript, we will use the following configuration:

Add this file at the root of your project.

tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "pretty": true,
    "sourceMap": false,
    "target": "es2017",
    "outDir": "./dist",
    "baseUrl": "./",
    "types" : ["node", "express", "forest-express-sequelize", "sequelize"],
    "allowJs": true
  },
  "include": ["./**/*", ".env"],
  "exclude": ["node_modules", "dist"]
}
tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "pretty": true,
    "sourceMap": false,
    "target": "es2017",
    "outDir": "./dist",
    "baseUrl": "./",
    "types" : ["node", "express", "forest-express-mongoose", "mongoose"],
    "allowJs": true
  },
  "include": ["./**/*", ".env"],
  "exclude": ["node_modules", "dist"]
}

This tells the transpiler to take every file using .ts or .js (see allowJs option) as an extension, and to transpile them into a ./dist folder. This is where your transpiled files will be. This type of configuration allows you to translate your app into TypeScript in dribs and drabs. No need to translate every file at once, change only the files you are interested in. Now that your TypeScript transpiler is set, we need to update our package.json with new scripts to fit with the new structure of our project.

package.json
"scripts": {
  "start": "node ./dist/server.js",
  "build": "rm -rf ./dist && npm run compile && npm run cp-config",
  "dev": "tsc-watch --onSuccess \"node ./dist/server.js\"",
  "compile": "tsc",
  "lint": "eslint . -c .eslintrc.json --ext .ts",
  "cp-config": "cp .env ./dist/"
},

Note that the script dev is the script to use while developing. It will transpile your sources every time you perform a change, and it will refresh your server. Finally, let's install the mandatory typings for a newly generated project, run this from a command prompt:

npm install --save-dev @types/node @types/express @types/sequelize
npm install --save-dev @types/node @types/express @types/mongoose

And that's it! You are now able to code using TypeScript in your app. Simply change the extension from .js to .ts , change some code, and your file will be automatically handled.

PreviousTranslate your project into TypeScriptNextMigrate Mongoose files

Last updated 3 years ago

Was this helpful?

The following section of this documentation will guide you through the migration of your files from .js to .ts. If you are using Mongoose, please refer to the section, otherwise, you are using Sequelize, and then please refer to the section.

Migrate Mongoose files
Migrate Sequelize files