datoml datoml - 3 years ago 171
React JSX Question

Can I use typescript optional like flow?

I am starting a new react redux project and was thinking about using typescript again. The last version I tried was 1.6 but typescript has really evolved since then.

I made a smal PoC and I like the idea of static typings in javascript but it really bugs me that I have to deal with missing or broken type definitions all the time. The latest example was a broken type definition in material-ui. It feels like I have to fight the compiler rather than it helps me.

So my idea was to use es6 with babel und add typescript in an optional manner like flow. I read that typescript 2.3 is able to achieve this with the @ts-check comment on top.

So how does this work together? Do I need some babel plugin to get rid of the type definitions in my .js files or do I have to use the .ts .tsx extension?

Or is this complete nonsense and I have to go "full typescript" mode and have to get used to it?

I am a bit lost to be honest.


Babel will be supporting typescript with the next version 7.0.
A beta version is already out to test it.
As far as I understand it right you are now able to use babel as transpiler and add the babel-preset-typescript.
Then you can use typescript in watch mode or only use the VS Code error reporting.
I think this will be my favorite stack in the near future.

Answer Source

If you installed material-ui@next it has its own typings and you do not need to install @types/material-ui. If you do they will conflict giving tons of errors. However @next currently beta.9 is of course in active development and many typings issues come up. Myself and others are quickly making issues on each release to make sure the typings are robust for the project.

Currently if you use beta.8 I am not having any typings issues. Also if you are using typescript you do not need babel. Typescript compiler will build your project to whatever specification you would like.

Typescript is easy once you figure out how it all builds. After that hurdle the rest is simple.

For me I use .ts/.tsx extensions along with a locally installed Typescript. Here is my Tsconfig example

    "extends": "./config/base.json",
    "compilerOptions": {
        "experimentalDecorators": true,
        "lib": [
        "typeRoots": [
        "types": [
            "node", "jest", "lodash", "react",
            "react-dom", "react-redux", "redux-logger", "material-ui",
            "react-router-dom", "react-router-redux", "react-autosuggest",
            "redux", "binary-type-tree", "redux-form",
            "tedb", "react-tap-event-plugin", "redux-thunk",
            "react-hot-loader", "history", "material-ui-icons"
        "outDir": "dist"
    "include": [
    "exclude": [

and the base

  "compileOnSave": false,
  "compilerOptions": {
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "strict": true,
    "pretty": true,
    "jsx": "react",
    "sourceMap": true,
    "importHelpers": true,
    "removeComments": false,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "noEmitOnError": true,
    "strictNullChecks": true

Some of my types require to be listed in "types" which I am not sure if this is still the case but makes it a requirement to list all your types like this. I hope this comes of some help. package.json "main" would point to "dist/index.js" a build of "build": "rm -rf ./dist/* && tsc" and "types": "dist/index.d.ts"

This is just my setup. But I hope it helps with figuring out some issues.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download