JavaScript code inside TypeScript file .ts not working

Question

I found a possible answer to my question: Is any JavaScript code a valid TypeScript code?.

I am working on a web project with Visual Studio and TypeScript plugin. Inside the following post, I have found this answer:

Not any valid JavaScript code is valid TypeScript see my example below.

var testVar = 4; testVar = "asdf";

TypeScript gives the following error: Cannot convert string to number. To make that work in TypeScript add ":any" like below.

var testVar: any = 4; testVar = "asdf"

This happens because TypeScript noticed testVar is declared and in the declaration it is assigned a number and therefore it decides it should stay a number.

I am trying to use HighCharts. If I save the code inside Javascript file, I dont get any error. But when I save the code inside Typescript file, I have an error:

"Cannot find name "HighCharts".

Here you can see the relevant part of my code:

// Put definitions of highcharts, highstocks below this line
// Example 1 Chart
var initializeChart1 = function () {
    require(['jquery', 'highcharts', 'highchartsMore', 'highchartsExporting'], function ($) {

        $("#myChart").highcharts({

            chart: {
                type: 'spline',
                backgroundColor: '#ECECEC',

// ------THIS GIVES AN ERROR, BUT WORKING WHEN SAVED AS .JS file
                animation: Highcharts.svg, // don't animate in old IE
// -------------------------

...

The reason why I want to keep my JavaScript code inside TS file is simple: I am currently learning TypeScript and I keep JavaScript and TypeScript versions or same code in same file. Depending on if TypeScript is complete/working, I uncomment it and comment JavaScript.

My questions are:

Why I get this error?
Is it possible to use any JavaScript code inside TS files?

Do you add reference to d.ts files ? github.com/DefinitelyTyped/DefinitelyTyped/tree/master/… and github.com/DefinitelyTyped/DefinitelyTyped/blob/master/… — Jerome2606
– Jerome2606, Commented Feb 5, 2016 at 11:45
I made it working by adding "Highcharts" reference in require(['jquery', 'highcharts', 'highchartsMore', 'highchartsExporting'], function ($, Highcharts) {. But I am still confused why this code is working without this reference when saved in .js file but not working when saved in .ts file... — Marek
– Marek, Commented Feb 5, 2016 at 11:51
the reference is just there to help you to write code in a strong typed way. And it's necessary to typescript to point you about possibles runtime errors. One of the big benefits is to enable IDEs to provide a richer environment for spotting common errors as you type the code. check this answer to have a simply good idea of typescript stackoverflow.com/questions/12694530/… — Jerome2606
– Jerome2606, Commented Feb 5, 2016 at 12:00

Nick Tsitlakidis · Accepted Answer · 2016-02-07 11:08:21Z

4

Yes you can use js code in your typescript files but the compiler needs to know about the objects and libraries you use. You have two options to make this compile. Either add the .d.ts file for your library or to fool the compiler you can declare the Highcharts object yourself like this.

declare var Highcharts: any;
var initializeChart1 = function () {
    require(['jquery', 'highcharts', 'highchartsMore', 'highchartsExporting'], function ($) {

        $("#myChart").highcharts({

            chart: {
                type: 'spline',
                backgroundColor: '#ECECEC',
                animation: Highcharts.svg, // don't animate in old IE

answered Feb 7, 2016 at 11:08

Nick Tsitlakidis

2,5094 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shotor Over a year ago

still necessary with requirejs to do it like this

Collectives™ on Stack Overflow

JavaScript code inside TypeScript file .ts not working

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related