npm install to install all dependencies.npm run build to bundle src/app.js into dist/bundle.jsindex.html in a browser.Notice that imports should be done as the following:
// Do this. Import entire module into a single variable.
import * as Highcharts from 'highcharts';
// Do not do this. Works only with modules who exports a default
import Highcharts from 'highcharts'| { | |
| "name": "highcharts-typescript", | |
| "version": "1.0.0", | |
| "description": "Example of Highcharts in use with TypeScript", | |
| "main": "index.js", | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1", | |
| "build": "webpack" | |
| }, | |
| "author": "Jon Arild Nygård", | |
| "license": "ISC", | |
| "dependencies": { | |
| "highcharts": "^5.0.12" | |
| }, | |
| "devDependencies": { | |
| "awesome-typescript-loader": "^3.1.3", | |
| "typescript": "^2.3.3", | |
| "webpack": "^2.6.1" | |
| } | |
| } |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Example of Highcharts in use with TypeScript</title> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| <script src="./dist/bundle.js"></script> | |
| </body> | |
| </html> |
| { | |
| "compilerOptions": { | |
| "outDir": "./dist/", | |
| "strictNullChecks": true, | |
| "module": "commonjs", | |
| "target": "es5", | |
| "allowJs": true | |
| }, | |
| "include": [ | |
| "./src/" | |
| ] | |
| } |
| module.exports = { | |
| entry: './src/app.ts', | |
| output: { | |
| filename: './dist/bundle.js' | |
| }, | |
| resolve: { | |
| extensions: [".ts", ".js"] | |
| }, | |
| module: { | |
| rules: [ | |
| { test: /\.(t|j)sx?$/, use: { loader: 'awesome-typescript-loader' } } | |
| ] | |
| } | |
| } |
Hi, I do not remember the exact use case for the gist anymore as its been a while, but I assume it was meant as a showcase/workaround to simply load and utilize Highcharts in a TypeScript project.
There has been a lot of development in Highcharts regarding TypeScript support since this gist was created, so you should look to Highcharts Type Declarations and Load Highcharts as a transpiled ES6/UMD module for more up to date information 🙂
My thoughts exactly. Lmao.