Uncaught SyntaxError: Unexpected token import during module import

Question

I have a typescript file that will compile in javasript for the browser. It looks like this:

/// <reference path="typings/jquery/jquery.d.ts" />
/// <reference path="typings/jquery-backstretch/jquery-backstretch.d.ts" />
/// <reference path="typings/jquery-semantic/jquery-semantic.d.ts" />
import {Validator} from "classes/validator";

var main = () => {
  $(".ui.dropdown").dropdown();
  $(".left-half").backstretch(["../images/lotus.jpg"]);

  const val = new Validator();
  val.foo();

};

$(document)
  .ready(() => {
    main();
  });

Compiled Version:

/// <reference path="typings/jquery/jquery.d.ts" />
/// <reference path="typings/jquery-backstretch/jquery-backstretch.d.ts" />
/// <reference path="typings/jquery-semantic/jquery-semantic.d.ts" />
import {Validator} from "classes/validator";

var main = () => {
  $(".ui.dropdown").dropdown();
  $(".left-half").backstretch(["../images/lotus.jpg"]);

  const val = new Validator();
  val.foo();

};

$(document)
  .ready(() => {
    main();
  });

When I called up the website, it shows me the following error:

What's wrong?