tsconfig.json

{
	"compilerOptions": {
		// Output the most modern javascript instead of downcompiling, let babel handle that
		"target": "esnext",
		// Output the most modern import/export statements, instead of converting modules to CommonJs
		// Again, let babel handle that
		"module": "esnext",
		"moduleResolution": "node",
		"sourceMap": true,
		// Injects some polyfills if required -- disable: Babel handles this for us
		"importHelpers": false,
		"esModuleInterop": false,
		/*
			This is required for "import $ from 'jquery'" to work
			The reason is a little convoluted but boils down to the following:

			When using "import * as $ from 'jquery'", typescript understands this and the ts compiler is happy.
			Doing this however trips up babel when it's processing the compiled typescript, and
			makes it put all exports of the module into a new object (for esoteric compatibility reasons).
			In doing this, babel actually strips the default function $() and only leaves inner functions like $.extend()
			That obviously breaks during runtime whenever we want to use $('#something').

			The other way around, "import $ from 'jquery'" stops babel from performing this mangling of the module,
			but in turn breaks type checking and makes the ts compiler complain that "module 'jquery' has no default export"...
			The solution is enabling this setting, which makes typescript pretend we used the other form of importing for typechecking.
			It has no actual effect on compiled code, only autocompletion and linting.

			See here: https://stackoverflow.com/questions/35223977/jspm-jquery-typescript-module-jquery-has-no-default-export#comment87591498_35224855
			For someone that runs into the no default export issue.
			However they don't seem to be using webpack, so they don't run into the function being stripped from the exports using the other import method.

			And here: https://stackoverflow.com/questions/37213647/es6-code-not-working-with-jquery
			For someone who runs into the webpack issue, but isn't using typescript.
		*/
		"allowSyntheticDefaultImports": true,
		"strictNullChecks": true,
		"noImplicitThis": true,
		"noImplicitAny": true,
		/*
			We use babel to transform jsx into vue render calls, see @babe/babel-preset-jsx in .babelrc
			So the typescript compiler should just ignore it.
			See https://github.com/vuejs/jsx/tree/dev/packages/babel-preset-jsx
		*/
		"jsx": "preserve",

		// Allow @decorator
		"experimentalDecorators": true,
		"lib": [
			"es2017",
			"dom",
			"dom.iterable",
			"es2018.promise",
			"esnext.array"
		],

		// Enable importing source files by their absolute path by prefixing with "@/"
		// Note: this also requires webpack to be able to find the imports see webpack.config.js
		"baseUrl": "src",
		"paths": {
			"@/*": ["./*"]
		},
		"resolveJsonModule": true,
		"removeComments": false
	},
}