How to implement JS function pointer in Typescript

Question

I've got the following in Javascript:

var chartOptions = {
    chartType: settings.chartType,
}

chartOptions.func = function(chart) {
    chartOptions.fullChart = chart;
}

which all works fine.

But I want to change this to TypeScript and being new, I am unsure about how to do this. Please can someone help? For instance, there is no symbol for 'func' and none for 'fullChart' so how would this have worked in Javascript?

Its unclear what you're asking here. Are you asking for an explanation of the code? What does typescript have to do with this? What do you mean there is no symbol for 'func' or 'fullChart'? You've declared them as properties of the chartOptions object. — Jared Smith
– Jared Smith, Commented Dec 15, 2015 at 12:50
When I put the above logic into Typescript, the compiler comes back with an error that it cannot resolve the symbols 'func' and 'fullChart'. What do I need to do to correct this? — superman1971
– superman1971, Commented Dec 15, 2015 at 12:58

MartyIX · Accepted Answer · 2015-12-15 12:59:36Z

5

You can fix your code adding the properties to chartOptions:

var chartOptions = {
    chartType: settings.chartType,
    func: null,
    fullChart: null
}

chartOptions.func = function(chart) {
    chartOptions.fullChart = chart;
}

What about converting your code to a class? It's much more TypeScript-y :)

class ChartOptions {
    public chartType;
    public fullChart;

    public func(chart: any) {
        this.fullChart = chart 
    }
}    

let chart = {};
let chartOptions = new ChartOptions();
chartOptions.func(chart);

answered Dec 15, 2015 at 12:59

MartyIX

28.8k33 gold badges143 silver badges218 bronze badges

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

2 Comments

TSV Over a year ago

What about "constructor(public chartType: any) { }"? Or any certain type instead of any for the ctor argument?

MartyIX Over a year ago

@TSV: I don't use these advanced features such as ...(public chartType...) when I try to answer a question to a beginner. It only causes more confusion IMO. Without knowing more about OP's code it's just guessing..

blakeembrey · Accepted Answer · 2015-12-15 21:26:58Z

Consider using an interface to define your options before you set them up. To mirror your specific code snippet, you can use a type assertion here.

interface ChartOptions {
    chartType: string;
    func: (chart: any) => void;
    fullChart: any;
}

var chartOptions = {
    chartType: settings.chartType
} as ChartOptions

chartOptions.func = function(chart) {
    chartOptions.fullChart = chart;
}

It really depends on the end goal, but if you can set up the options to begin with you won't need the type assertion (avoid it where possible anyway).

interface ChartOptions {
    chartType: string;
    func: (chart: any) => void;
    fullChart?: any;
}

var chartOptions: ChartOptions = {
    chartType: settings.chartType,
    func (chart: any) {
        this.fullChart = chart;
    }
}

Or you can use a class as the other user suggested, which is more like what you should be using here, but not what your example is using.

Collectives™ on Stack Overflow

How to implement JS function pointer in Typescript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related