TypeScript

Rasengan.js provides a TypeScript-first development experience for building your React application.

It comes with built-in TypeScript support for automatically installing the necessary packages and configuring the proper settings.

New Project

create-rasengan CLI can be used to create a new TypeScript project.

npx create-rasengan@latest my-app

During the project creation, you will be prompted to choose the language for your project. Select TypeScript to create a TypeScript project.

Existing Project

If you have an existing project and want to add TypeScript support, you have first to rename your files to .tsx and .ts extensions.

Then, you can run the following command to install the necessary packages and configure the TypeScript settings.

npm install --save-dev typescript @types/react @types/react-dom

Then add the following tsconfig.json file to the root of your project.

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ES2020",
 
    /* Bundler mode */
    "moduleResolution": "bundler",
    "module": "ESNext",
    "jsx": "react-jsx",
 
    /* Aliases for intellisence */
    "paths": {
      "@/*": ["src/*"],
      "@app/*": ["src/app/*"],
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"],
      "@styles/*": ["src/styles/*"]
    }
  },
  "include": ["src", "rasengan-env.d.ts"],
 
  "extends": "./node_modules/rasengan/tsconfig.base.json"
}

Finally, add the following rasengan-env.d.ts file to the root of your project.

/// <reference types="rasengan/types/client" />

Run npm run dev to start the development server.

Next steps