Integration with TypeScript / Mocha / other build processes

Expo SDK
1

Are there any tutorials or documentation on integrating Expo with a different RN build process? For example, if we have an existing setup with TypeScript or want to use Mocha instead of Jest or whatever.

2 Likes
2

Hi! Have you gotten any further here? I’m myself specially interested in the Typescript part.

3

Hi again, I think I have a solution. Not sure it’s 100% or if it’s even a great approach. But I got it working :slight_smile: with gulp.

First install typescript via npm install (you probably already have).

Also install gulp and gulp-typescript via npm

npm i gulp gulp-typescript --save-dev

Also install various typings for react and react-native

npm i @types/react @types/react-native --save-dev

Now run

tsc --init

to create a tsconfig.json file.
Edit it to look like this:

{
    "compilerOptions": {
        "target": "es6",
        "jsx": "react",
        "noImplicitAny": true,
        "experimentalDecorators": true,
        "preserveConstEnums": true,
        "outDir": "build",
        "rootDir": "src",
        "sourceMap": true,
        "typeRoots": [
            "custom_types"
        ]
    },
    "filesGlob": [
        "src/**/*.ts",
        "src/**/*.tsx"
    ],
    "exclude": [
        "node_modules"
    ],
    "compileOnSave": false
}

Now create a gulpfile.js and paste the following:

var gulp = require('gulp');
var ts = require('gulp-typescript');

// Grab settings from tsconfig.json
var tsProject = ts.createProject('tsconfig.json');

gulp.task('build', function() {
    var tsResult = tsProject.src().pipe(tsProject());
    return tsResult.js.pipe(gulp.dest('build'));
});

gulp.task('watch', ['build'], function() {
  gulp.watch('src/**/*.ts', ['build']);
  gulp.watch('src/**/*.tsx', ['build']);
});

gulp.task('default', ['build']);

Now run:

gulp watch

You can now add tsx-files in the src directory. Let’s say I add CustomComponent.tsx:

import * as React from "react";
import { View } from "react-native";

export default class CustomComponent extends React.Component<any, any> {
    render() {
        return (
            <View />
        );
    }
}

I can then from main.js add:

import CustomComponent from "./build/CustomComponent ";

I might be missing some information here. But basically that’s it.
As I said, I dont know if this is a great approach. E.g. how do I make sure that things in the src directory isn’t included in the bundle?

4

I think the packager is smart enough that it will only build the bundle from the files that are used (following imports and requires from the entry point) so I think this approach should be clean.

A possibly more elegant one but that would take more work would be to tweak the packager to use the typescript transformer instead of babel.

5

I would also like to know how I would build this project using Typescript, similar to how create-react-app-typescript works. There doesn’t seem to be any examples, but a guideline on how this would be approached would be greatly appreciated.

Ideally we wouldn’t have to introduce a grunt/gulp workflow, and just tweak some configs.

EDIT: This appears to be quite helpfui: How to pass custom transformer to react-native-scripts - #5 by alcantarahome

6

I’m coding in TypeScript using react-native-typescript-transformer. I’ve create a very simple demo app here: https://github.com/janaagaard75/expo-and-typescript. The type definitions for TypeScript still require a lot of work, though.

7

This helped me quite a lot: https://github.com/Microsoft/TypeScript-React-Native-Starter

IMO, TypeScript has been a lot better than Flow - I’m using both on two different projects

1 Like