https://github.com/nimacsoft/razzle-plugin-babel-ts

📜 Using TypeScript as Babel Plugin with Razzle
https://github.com/nimacsoft/razzle-plugin-babel-ts

babel plugin razzle typescript

Last synced: 8 months ago
JSON representation

📜 Using TypeScript as Babel Plugin with Razzle

• Host: GitHub
• URL: https://github.com/nimacsoft/razzle-plugin-babel-ts
• Owner: nimacsoft
• License: mit
• Created: 2019-06-13T13:04:41.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-06-13T21:59:56.000Z (about 7 years ago)
• Last Synced: 2025-10-14T03:46:59.674Z (8 months ago)
• Topics: babel, plugin, razzle, typescript
• Language: JavaScript
• Homepage:
• Size: 3.91 KB
• Stars: 8
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![npm version](https://badge.fury.io/js/razzle-plugin-babel-ts.svg)](https://badge.fury.io/js/razzle-plugin-babel-ts)

# razzle-plugin-babel-ts

This package contains a plugin for using TypeScript as Babel Plugin with Razzle

Usage in Razzle Projects

```sh

yarn add razzle-plugin-babel-ts --dev

```

create a **razzle.config.js** file in root directory of project (next to the *package.json*) and put this content inside it

```javascript

module.exports = {

  plugins: ['babel-ts'],

};

```

create a **.babelrc** file in next to the razzle.config.js with this content

```

{

  "presets": ["razzle/babel", "@babel/typescript"]

}

```

## Configure TypeScript

config typescript compiler by creating a **.tsconfig** file next to the razzle.config.js

```typescript

{

  "compilerOptions": {

    "allowSyntheticDefaultImports": true,

    "noFallthroughCasesInSwitch": true,

    "noUnusedParameters": true,

    "noImplicitReturns": true,

    "moduleResolution": "node",

    "esModuleInterop": true,

    "noUnusedLocals": true,

    "noImplicitAny": true,

    "target": "es5",

    "module": "esnext",

    "strict": true,

    "jsx": "react",

    "noResolve": false,

    "noEmit": true,

    "baseUrl": "./src",

    "lib": ["dom", "dom.iterable", "esnext"],

    "skipLibCheck": true,

    "resolveJsonModule": true,

    "isolatedModules": true,

    "allowJs": true,

    "allowUnreachableCode": false,

    "downlevelIteration": true,

    "forceConsistentCasingInFileNames": true,

    "noImplicitThis": true,

    "sourceMap": true,

    "pretty": true,

    "suppressImplicitAnyIndexErrors": true

  },

  "rootDirs": ["src"]

}

```

## Run Time Type Checking

Craete a new *script* in *package.json* 

```json

"type-check": "tsc --watch",

```

and start by run this command in terminal

```sh 

yarn type-check

```