Do I have to reference TypeScript definition in every file?

JavascriptTypescript

Javascript Problem Overview


Is there a way to tell TypeScript to use a certain file (or set of files) as a definition for everything compiled?

My only alternative currently is to add something like this in every single TypeScript file (which seems clunky):

/// <reference path="DefinitelyTyped/requirejs/require.d.ts" />

Javascript Solutions


Solution 1 - Javascript

When using TypeScript's internal module system, you can avoid having any <reference> tags at all in the code. I personally do this because I don't want to encode paths (realtive or absolute) within the code as I constantly move stuff around.

One way to do this is by making sure all required declaration files and TypeScript source files are passed to the compiler as arguments during compile time.

Using gulp together with gulp-typescript simplifies this task. You can set noExternalResolve in gulp-typescript to true, and create gulp tasks that take all your .d.ts files along with your sources and pipe it down to the compiler. When you pull in tsd into your stack, you only need to pass the tsd.d.tsfile that contains references to all other definition files installed via tsd.

UPDATE for TypeScript >= v1.5: you can use a tsconfig.json file, and the compiler will get the ordering of the classes right. This removes the need to use gulp-typescript alltogether. You can either chose to have all files explicitly listed in the tsconfig.json file, or completely leave out the files property to include all *.ts/*.tsx files within the directory the tsconfig.json resides (including all subfolders).

A sample tsconfig.jsonmay look like:

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "lib": [ "es5", "es2015.promise", "dom" ]
    },
    "include": [
        "src/**/*.ts"
    ]
}

Solution 2 - Javascript

What I've learned so far is that /// < reference >-ing a module with reference comments is not a good method.

For example: in case you have a file Foo and a file Bar. Both files use jquery, but only file Foo has a reference comment to jquery. If file Foo is deleted for some reason, your file Bar is broken, because the reference is missing.

If you are using TypeScript >= 2.0 It is better to define the TypeScript definition files (.d.ts) in your tsconfig.json under the "files" section.

This could look like this:

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5", 
    "outDir": "./Scripts/"
  },
  "files": [
    "./src/foo.ts",
    "./src/bar.ts",
    "./Scripts/typings/jquery/jquery.d.ts",
    "./Scripts/typings/jqueryui/jqueryui.d.ts",
    "./Scripts/MicrosoftMaps/Microsoft.Maps.d.ts"
  ]
}

Using the /// directive (reference comments) is often used in examples to get you started quickly, but it is not a best practice. Also many examples come from a version < TypeScript 2.0.

Solution 3 - Javascript

Some IDEs auto-detect all the files in a project (Visual Studio).

For everything else, you can create a _references.ts file and put all of your reference comments in there - then you only ever need to add:

/// <reference path="_references.ts" />

...to each file (instead of possibly many).

Your IDE may also support tsconfig files.

Solution 4 - Javascript

This question is a duplicate of https://stackoverflow.com/questions/29974875/reference-typescript-definitions-in-one-file-instead-of-all-js-files

The answer is, for now, add each file you want to reference to your tsconfig.json file's "files" section. It's still many lines, but all in one file.

In future when Typescript 2 is released you can then use the "filesGlob" section and solve the problem in two lines.

Solution 5 - Javascript

I've started recently with TypeScript and as I've understood the internal modules resolution is that yes, you can compile all .ts files from the tsconfig.json's directory and all its subdirectories, provided that you don't have set .ts files in it without /// <references path="" />.

But the order in which the .ts files are compiled into resulting .js files is not determined by the dependencies the files (or classes they contain) have. So it is possible to have a situation where the child class is compiled before the parent one (child inherits from parent relation). Then the code won't run, even though it is compiled successfully. It will complain that it couldn't understand the parent class within the child class. Therefore you need to add a /// <references path="" /> as a hint to the compiler to resolve the dependencies between .ts files.

This is want the Typescript documentation says:

> The /// directive is the most common of this group. It serves as a declaration of dependency between files.

> Triple-slash references instruct the compiler to include additional files in the compilation process.

> They also serve as a method to order the output when using --out or --outFile. Files are emitted to the output file location in the same order as the input after preprocessing pass.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHotStuff68View Question on Stackoverflow
Solution 1 - JavascriptDynalonView Answer on Stackoverflow
Solution 2 - JavascriptjuFoView Answer on Stackoverflow
Solution 3 - JavascriptFentonView Answer on Stackoverflow
Solution 4 - JavascriptRichardView Answer on Stackoverflow
Solution 5 - JavascriptCika RakiView Answer on Stackoverflow