Setting up typescript + gulp for the browser

5 November 2018

I’ve recently started using typescript for a new open source project called Box Image Picker, and for someone who is new to the typescript realm, setting up was a tad painful. All articles I’ve landed on Google are either outdated or not as straightforward for a newbie. So here’s my simple (and up-to-date) guide to setting up typescript as part of your Gulp task.

I used Yarn for my project but you can use NPM in the same way.

So first, lets add our dependencies:

In your command line, run:

yarn add browserify tsify typescript vinyl-source-stream -D

or if you’re using NPM:

npm install browserify tsify typescript vinyl-source-stream --save-dev

Your gulpfile.js file should look something like this:

const browserify = require('browserify');
const tsify = require('tsify');
const source = require('vinyl-source-stream');

gulp.task('js', function() {
    return browserify({
        basedir: '.',
        debug: true,
        entries: ['src/index.ts'],
        cache: {},
        packageCache: {}
    })
    .plugin(tsify, { noImplicitAny: true })
    .bundle().on('error', (e) => console.log(e))
    .pipe(source('output.js'))
    .pipe(gulp.dest('dist'));
});

Add that’s it. Pretty easy right?

Leave a comment below if you have any questions, I reply pretty quickly.