Setting up typescript + gulp for the browser

5 October 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 gulp browserify tsify typescript vinyl-source-stream -D

or if you’re using NPM:

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

Your gulpfile.js file should look something like this:

const gulp = require('gulp');
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))

And that’s it. Pretty easy right?

Jeff Bocala © 2020. This portfolio site was built with react-static.