How to use added typings in typescript

Question

I am trying to learn Typescript, and have set up a basic typescript structure following this tutorial.

I need to add typings to the project now. So I looked around and found typings. Then I added JQuery,Lodash, and D3 using typings. My project structure looks like this:

├── dist
│   ├── chart.js
│   ├── greet.js
│   └── main.js
├── gulpfile.js
├── package.json
├── src
│   └── ts
│       ├── chart.ts
│       ├── greet.ts
│       └── main.ts
├── tsconfig.json
├── typings
│   ├── globals
│   │   └── jquery
│   │       ├── index.d.ts
│   │       └── typings.json
│   ├── index.d.ts
│   └── modules
│       ├── d3
│       │   ├── index.d.ts
│       │   └── typings.json
│       └── lodash
│           ├── index.d.ts
│           └── typings.json
└── typings.json

This is my tsconfig.json file:

{
    "files": [
        "src/ts/*.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es5"
    }
}

My question is, how do I add the *.d.ts files which I have in typings directory in my main.ts file and start using jQuery's $ or D3's d3?

I noticed index.d.ts file in typings which looks like this:

/// <reference path="globals/jquery/index.d.ts" />
/// <reference path="modules/d3/index.d.ts" />
/// <reference path="modules/lodash/index.d.ts" />

So my guess is, I just need to add this file somewhere in my main.ts file or in my tsconfig.json file(instead of manually adding each .d.ts file). Am I right? Thanks.

Answer 1

TypeScript 2 recommends using npm for types. See The Future of Declaration Files.

All you should need is something like:

npm install --save @types/lodash @types/d3 @types/jquery

and be good to go.

Answer 2

You can add it in your tsconfig:

"files": [
    "src/ts/*.ts",
    "typings/**/*.ts"
]

or just

"files": [
    "src/ts/*.ts",
    "typings/index.d.ts"
]