TSX (Typescript) support

[crazyx13th]

is there a way to do this? whould be awesome! :-)
thanks!

Greetings
crazyx13th

[zpao]

It's surely possible to do but hasn't been. If you're going to be using TS throughout your project you could skip making changes to this projects and use something like https://www.npmjs.com/package/ts-node, then just register as the very first step in app.js or if you have app.ts, run with ts-node directly. You probably have to register your views with 'tsx' (instead of 'jsx' as in the docs).

Alternatively you could try to make changes here so that it works but it's not something I'll be working on. Much like adding support for CoffeeScript (#34), I'd be willing to accept patches

[rcanessa89]

Well I have found a way, I don't know if it is the best manner but if you set in your "compilerOptions": { "jsx": "react" } the tsx files will be js files. And then you can set the engine like js instead of jsx.

app.engine('js', expressReactViews.createEngine()); app.set('view engine', 'js');

Also I have tried to use "jsx": "preserve" and the tsx files will be jsx with jsx syntax inside but it does not work.

[artemyarulin]

Hi guys, I've created small example project https://github.com/artemyarulin/ts-node-express-react-views-typescript

Thank you for the project, me == happy 😍

[zpao]

Looks like this is working well enough so going to close out. Thanks folks for figuring out how to make it work.

[sant123]

Another approach with sections (coming from ASP.NET MVC) 🤷‍♂️

[RicardoFredes]

Hi guys, i used @artemyarulin 's solution for my project, but in production version i needed to change de engine view extension from tsx to js. I resolved it using a env var:

// server.ts
import express from 'express'
import { createEngine } from 'express-react-views'

const dev = process.env.NODE_ENV === 'dev'
const viewFileExtension = dev ? 'tsx' : 'js'

const app = express()

app.set('views', __dirname + '/views')
app.set('view engine', viewFileExtension)
app.engine(viewFileExtension, createEngine())

app.get('/', (_, req) => req.render('index', { title: 'Hello world' }))
app.listen(8080)

...
"scripts": {
    "build": "tsc",
    "dev": "NODE_ENV=dev nodemon src/server.ts --watch src",
    "start": "node dist/server.js"
  },
...

Thanks, @artemyarulin and I hope to help anybody.

[ZuraM]

@RicardoFredes do you compile .tsx files when building? tsc command doesn't compile them automatically so i guess i need to compile them manually?