How to write TypeScript when referencing a definition file

Question

Just for example, if you're using jQuery Validation in JavaScript you might write something like this

$("#loginForm").validate({
    "rules": {
        "emailAddress": "required",
        "password": "required"
    },
    "messages": {
        "emailAddress": "Required", 
        "password": "Required"
    }
});

But in TypeScript perhaps it would be something like this

let validator: Validator = new Validator("formName");
validator.rules.add( ... );
validator.messages.add( ... );

if (validator.valid())
{
    // submit or whatever ...
}

I'm not suggesting that's correct, just trying to explain what I mean.

So my questions are

1, How do you understand a TypeScript definition file and know how to code with it from a fundamental point of view?

2, How would you use jQuery Validation in TypeScript in a TypeScript way, using jquery.validation.d.ts? In other words please correct my TypeScript code above.

TypeScript is just a superset of JavaScript. The first code example is valid TypeScript. — Heretic Monkey
– Heretic Monkey, Commented May 13, 2016 at 21:48
Hi Mike, thanks for your reply. So should I just use the first code style in my TypeScript files? I'm happy with that. I just wanted to check I wasn't missing anything fundamental/important. — Paul
– Paul, Commented May 13, 2016 at 21:53
I'm not making any judgements about how you should code. Actually, Stack Overflow is not really a good fit for these kinds of opinion-based questions, because my opinion is as valid as anyone else's. I'm just saying that the first code sample is valid, compilable TypeScript. — Heretic Monkey
– Heretic Monkey, Commented May 13, 2016 at 22:06
Yes good point, Mike. You've answered my question and I now know what I wanted to know. Many thanks. — Paul
– Paul, Commented May 14, 2016 at 6:21

marc_s · Accepted Answer · 2016-06-11 08:21:57Z

1

What you're missing is just specifying types on certain variables. If your typings extend the jQuery/static jQuery ($.), then you only have to worry about making sure that you reference the typings file correctly. That's how most plugin typings work .. they allow you to use 3rd party elements inside your typescript file, especially if they extend jQuery (etc.) object ($('.element').somePlugin())

You could do it in few ways, when I work in VS2015, i could append this line to the top of the *.ts file:

/// <reference path="../typings/main/ambient/jquery/jquery.d.ts" />

var context: JQuery = $('body');

or perhaps you have typescript config file, where you could import all typings in one go.

...
"compileOnSave": true,
"buildOnSave": false,
"files": [
    "src/**/*.ts",
    "test/**/*.ts",
    "typings/main.d.ts"
],
...

It's important that your IDE notifies you of types when you hover over variables that have types defined or when you compile your TS.

In the following image, you can see that when I hover over typings, IDE tells me what that is. Alternatively, if there are some incorrect/missing typings, you can see them straight away (red text)

another example: hello: string = 'Welcome world' would be ok, but hello: string = 123 would be not.

In your example. if you referenced the plugin's typings, then the compiler would warn you if you decided to put in some illegal options such as :

$("#loginForm").validate({

    "rules": {
        "emailAddress": "required",
        "password": "required",
        "superCoolThing:" false     // <--- 
    },
    "messages": {
        "emailAddress": "Required", 
        "password": "Required"
    }

});

edited Jun 11, 2016 at 8:21

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered May 13, 2016 at 22:03

kasperoo

1,5841 gold badge13 silver badges14 bronze badges

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

2 Comments

Paul Over a year ago

Great comprehensive answer, many thanks, kasperoo. I now get it. The d.ts files are an interface to the existing JS code. A gateway to the Dark Side, ;).

kasperoo Over a year ago

Glad I could help :) If you think that's answers it, could you mark it so?

Collectives™ on Stack Overflow

How to write TypeScript when referencing a definition file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related