What is the difference between using: and => for a return type using the TypeScript function?

Question

I have the following code:

///<reference path="../typescript/jquery.d.ts" /> function addThemePrototypes() { var templateSetup = new Array(); $.fn.addTemplateSetup = function(func, prioritary) { if (prioritary) { templateSetup.unshift(func); } else { templateSetup.push(func); } }; } 

Can someone tell me why this should be declared using => void?

 interface JQuery { addTemplateSetup: (func: Function, priority: bool) =>void; } 

I think I'm a little confused on how to make a returntype from a javascript function. Sometimes I see: jQuery, and now I'm seing => void. What is the difference between the two?

Answer 1

In your example, both are declared using a colon ...

Let him break it in half!

No type declaration ...

 interface JQuery { addTemplateSetup } 

Type declaration ...

 : (func: Function, priority: bool) =>void; 

If you use the word is instead of : this is like saying

Property named 'addTemplateSetUp': a function that takes two parameters of specific types and does not return a value

Here is an example with two interfaces that are actually identical, but one uses => and the other does not. Both of them are handled the same way with TypeScript, so it really doesn't match the preferences of the developers.

 interface JQuery { addTemplateSetup: (func: Function, priority: bool) =>void; } interface Identical { addTemplateSetup(func: Function, priority: bool): void; } class ImplementsEither implements JQuery { addTemplateSetup (func: Function, priority: bool) : void { } } 

You can use the style declaration => if you like to read almost in English.

You can use the second style if you want your interfaces to be more like implementations.

Answer 2

This is the information that the function returns. Does it return a jQuery object (with a jQuery interface) or is it a void function that returns nothing?

 $("#someId").addTemplateSetup(); 

In your example, you are not returning anything, so "void" will be correct. But if you returned "this" instead to your javascript function, as is usually the case, to preserve the jQuery chain, you must declare it return => JQuery;

 $("#someId").addTemplateSetup().Show();