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 ? https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/highcharts-ng and https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts — Jerome2606, Feb 05 '16 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, Feb 05 '16 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 http://stackoverflow.com/questions/12694530/what-is-typescript-and-why-would-i-use-it-in-place-of-javascript — Jerome2606, Feb 05 '16 at 12:00

score 4 · Answer 1 · answered Feb 07 '16 at 11:08

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

still necessary with `requirejs` to do it like this – shotor Jul 05 '17 at 13:02 — shotor, Jul 05 '17 at 13:02

JavaScript code inside TypeScript file .ts not working

1 Answers1