Setting up typescript + gulp for the browser

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:

• browserify
• tsify
• typescript
• vinyl-source-stream

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))
    .pipe(source("output.js"))
    .pipe(gulp.dest("dist"));
});

And that’s it. Pretty easy right?