amCharts v5 demo code doesn't compile in VS Code

Question

I'm posting this in case anyone else ran into the same issue. As of Feb 2022 amCharts v5 is still very new and the demo code seems to need a little curation on amCharts' part i.e. Show us that the object needs to be declared with a type - AND TELL US WHICH TYPE TO USE!

I copied the code from this demo example verbatim

// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
let circleTemplate = am5.Template.new({});
series0.bullets.push(function() {
  let graphics = am5.Circle.new(root, {
    fill: series0.get("fill"),
  }, circleTemplate);
  return am5.Bullet.new(root, {
    sprite: graphics
  });
});

and got the following error

Even the documentation page does not suggest specifying the type

Answer 1

I reached out to amCharts via their support system and got the following response:

Hi Adam,

How about specifying Circle as a generics for themplate?

let circleTemplate: am5Template<am5.Circle> Yours sincerely,

Martynas Majeris amCharts

First off am5Template is not valid, but I assumed he meant am5.Template Second, his code is not complete and did not compile as-is.

I tried a few variations and the following worked:

    // Add bullet
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
    let circleTemplate = am5.Template.new({});  // <-- demo code
    // let circleTemplate3: am5Template<am5.Circle>; // <-- code provided by the support person
    let circleTemplate2: am5.Template<am5.Circle> = am5.Template.new({}); // <-- WORKING modification of the suggested code
    
    // let circleTemplate1: am5Template<am5.Circle> = am5.Template.new({});  // attempted variation of the suggested code

    series0.bullets.push(function() {
        let graphics = am5.Circle.new(root, {
            fill: series0.get("fill"),
        }, circleTemplate2);  // <-- compiler now sees the object as the appropriate object type
        return am5.Bullet.new(root, {
            sprite: graphics
        });
    });

Another example (from the same demo) which requires the same modification, but with a different template type:

// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
let starTemplate: am5.Template<am5.Star> =am5.Template.new({});
series1.bullets.push(function() {
    let graphics = am5.Star.new(root, {
        fill: series1.get("fill"),
        spikes: 8,
        innerRadius: am5.percent(70),
    }, starTemplate);
    return am5.Bullet.new(root, {
        sprite: graphics
    });
});

So yeah, maybe this will help someone who ran into the same issue as me. What would be REALLY nice is if they had Cope Pen examples that use TS and not just JS