Typescript Main Point
One of reasons the typescript was invented is to get javascript errors to be detected in compilation step.
For example:
If you defined function myFunc and it suppose to be called without any params, and your code use its call in multipple places:
function myFunc() {
alert('my name is Shlomo');
}
//call
myFunc()
And after some time you decided to change function code to use the parameter:
function myFunc(nm) {
alert('my name is ' + nm);
}
//call
myFunc('Shlomo')
In case you using javascript and you forgot to change call in some place to its new shape - you will got 'nm is undefined' error when code will try to run following call.
//call
myFunc()
in typescript
After you changed myFunc definition to use parameter:
myFunc(nm:string) {
alert('my name is ' + nm);
}
//call
myFunc()//this will not compile
If there are some calls which not using parameter left- Typescript compiler will fail.
What are type definitions?
So if you use typescript and want to use some javascript library or plugin in your code - this plugin and its methods need to be defined in a way that typescript will "recognize" it.
Experiment With Selectize
For example purposes lets take our old angular-seed project which uses typescript. To demonstrate what happen when you try to use some javascript plugin inside typescript project lets install selectize.js jquery plugin
bower install selectize --save-dev
And place the call to the plugin inside View2Ctrl controller:
As you can see - trying to use the plugin as it is made vscode angry
You can see also compilation error:
Create Starter Definition File
As we can see in other definitions - the selective definition must be hosted inside node_modules/@types directory. lets add selectize directory and add index.d.ts file inside it.
I will not write here about create real definition - since guys much wiser than me already created it here,
My purpose now is only to create something that make the typescript compiler calm.
/// <reference types="jquery"/>
declare namespace Selectize {
}
interface JQuery {
selectize(options?: any): JQuery;
}
As you can see - i only added selectize method to Jquery interfaceThat is enough for get the source compiled -
Thanks For reading
No comments:
Post a Comment