lourens
Posts: 12
Joined: Sun Aug 01, 2021 7:11 pm

Getting started with typescript...

I lack experience with using module systems in javascript and I am hoping not to have to
explore all different models.

I hoped to be able to use Highcharts with typescript without "babel", "react" or "angular" etc.

I hoped to be able to use the instructions for "Typescript + ESM from CDN",
https://github.com/highcharts/highchart ... m-from-cdn

I copied the tsconfig.json and the small typescript file, but this doesn't seem to work:

Code: Select all

hc.ts:2:24 - error TS2307: Cannot find module 'https://code.highcharts.com/es-modules/masters/highcharts.src.js' or its corresponding type declarations.

2 import Highcharts from 'https://code.highcharts.com/es-modules/masters/highcharts.src.js';

Code: Select all

// Load modules the ES6 way
import Highcharts from 'https://code.highcharts.com/es-modules/masters/highcharts.src.js';
import 'https://code.highcharts.com/es-modules/masters/modules/exporting.src.js';

// Generate the chart
Highcharts.chart('container', {
  // options - see https://api.highcharts.com/highcharts
});
I installed and updated npm, tsc on my mac. I also tried to work from webstorm.
Downloading highcharts from github.. It seems that all tests work without error.

Could you point me to a simple ts file containing a Highchart chart and a simple html file that would run on my chrome browser?
Thanks,
Lourens

I started a jsfiddle, but do not know how to add a tsconfig.json there (tsc generates require then).

https://jsfiddle.net/lourensm/yucpx9nq/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Getting started with typescript...

Hello lourens,

Thanks for contacting us with your question.

Did you add highcharts package to your project? It is required in development process, CDN is not enough because you don't have type definitions there.

Regards!
Mateusz Bernacik
Highcharts Developer
lourens
Posts: 12
Joined: Sun Aug 01, 2021 7:11 pm

Re: Getting started with typescript...

Thanks for pointing out that I missed a step: "Did you add highcharts package to your project?".

I am a real beginner here... I tried some things from within my typescript directory:
1) npm install highcharts (seemed to only create a .bin and .package-lock.json)
2)I copied the node_modules/highcharts directory contents from the github source.

I still get

Code: Select all

lourens@Lourenss-iMac ts % tsc hc.ts
hc.ts:2:24 - error TS2307: Cannot find module 'https://code.highcharts.com/es-modules/masters/highcharts.src.js' or its corresponding type declarations.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Getting started with typescript...

Hello lourens,

It seems like there is problem with importing Highcharts module.
Please create a project from a scratch and follow my instructions. You said something about npm so I assume that it is your package manager:

create new folder and enter it -> npm init -> npm install typescript -> npm install highcharts -> create 3 new files: tsconfig.json, index.ts, index.js

Paste this into tsconfig.json

Code: Select all

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "baseUrl": "./",
    "module": "es6",
    "moduleResolution": "node",
    "target": "es6",
    "paths": {
      "https://code.highcharts.com/es-modules/masters/*.src.js": [
        "node_modules/highcharts/*.src"
      ]
    }
  }
}

Your index.ts should look for example like this:

Code: Select all

// Load modules the ES6 way
import Highcharts from "https://code.highcharts.com/es-modules/masters/highcharts.src.js";
import "https://code.highcharts.com/es-modules/masters/modules/exporting.src.js";

// Generate the chart
Highcharts.chart({
  chart: {
    renderTo: "container",
    type: "line",
  },
  series: [{ type:'line', data: [5, 4, 1, 2] }],
});
In your index.html create basic HTML configuration. Create a div with id="container" and add script tag with tag="module" and src="index.js" attributes (assuming that all files are located in same directory). Then run npx tsc command to build your app. And that is all, you can run now your local server and see the results.

Let me know if it worked for you.
Regards!
Mateusz Bernacik
Highcharts Developer
lourens
Posts: 12
Joined: Sun Aug 01, 2021 7:11 pm

Re: Getting started with typescript...

Thanks, that worked. Probably only thing I didn't do before was

npm install highcharts
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Getting started with typescript...

Hi lourens,

Glad to hear it worked. In case of any further questions, feel free to ask for assistance!

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”