CORE CONCEPTS

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.

Terminal

bashnpx 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 to follow the following steps:

[01]Install dependencies

First, install the following dependencies:

Terminal

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

[02]Configure TypeScript

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

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

[03]Add Typescript Types

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

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

[04]Rename files and launch the dev server

Finally, rename your files to .tsx and .ts extensions. Then run npm run dev to start the development server.

Terminal

bashnpm run dev

Static Assets

Environment Variables