TypeScript definition files

As you may know, TypeScript is a superset of JavaScript. However, that doesn’t mean when you use a framework such as Knockout or Angular that TypeScript will be able to interpret what you’re trying to do. Typescript allows you to  use the keyword ‘declare’ on a variable to indicate that it’s supposed to be from an external resource. This will prevent errors but we don’t get any intellisense. This is a pretty error prone way to work, hmm?

2016-03-22_TypeScriptDeclare

Here’s an example of using Declare to define ko. Now… notice something wrong in that code?

2016-03-22_TypeScriptDeclare

What the hell is an oberserverable?! This was an a mistake I honestly didn’t mean to make when I was going to show off what ‘declare’ does. But there it is. I created an error in the first 3 lines of code because I always screw up typing ‘observable’

In order to solve this, TypeScript allows you to make use of Type Definition files. These files allow TypeScript to utilize the frameworks you want to use instead of flying around without that oh-so handy intellisense. Where does one get a Type Definition file? Well…

https://github.com/DefinitelyTyped/DefinitelyTyped

There are TONS and TONS of definition files for TypeScript in the link above, including knockout. Download the file or copy/paste the code into a new one, whatever works. I’d recommend putting it somewhere close to your .ts, but hey, go crazy if you want. Now, if you’re using an editor like Visual Studio you can just drag and drop the file into your .ts and it’ll create a reference to that file, if not, you can just manually enter the reference.

2016-03-22_dts.png

 

2016-03-22_TypeDefinitionFile.png

****This reference is supposed to be commented out! Its not actually used in the JavaScript that gets transpiled! It ONLY helps TypeScript****

Now that there’s a reference to the Knockout Definition file, if I remove my declaration of the variable ‘ko’, I’ll see an error where I misspelled observable.

2016-03-22_spellingError

If I delete my crappy spelling and try again…

2016-03-22_intellisense

Oh… Well hey there intellisense… long time no see buddy.

The definition file even takes the intellisense a step further than what you normally get in regular JavaScript. Say I have a observable and placed “” as the default value. In TypeScript, this will be recognized and intellisense will show you that a string is supposed to go in. JavaScript does not do this because JavaScript doesn’t care. JavaScript is a Honey Badger.

JavaScript:

2016-03-22_jsHoneyBadger

TypeScript:

2016-03-22_observableConstructor.png

 

If you try to put a string for the name value, everything is A-OK; If you try to pass in a number it gives you a red squiggly telling you that the value isn’t the correct type.

2016-03-22_dataType.png

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s