36

I would like to use a javascript function inside a typescript file. How can I reference the javascript file containing that function inside typescript file?

I tried

<reference path="../libs/myjsfile.js" />

this brings an error while building like: Cannot resolve referenced file: ../libs/myjsfile.js

4 Answers 4

43

While the two answers above will work for a small or single variable API, the correct answer is to write a type declaration file for your JavaScript file.

The type declaration file for your example would be named myjsfile.d.ts, where the .d.ts suffix is what tells the TypeScript compiler that it's parsing a declaration file. If you use Visual Studio, your declaration file will be recognized by the TypeScript compiler as long as it is somewhere (anywhere) in the project you are working on.

Declaration files store metadata about JavaScript variables, functions and objects so the TypeScript compiler can do its job. If your JavaScript file happens to be a library or framework in common use, DefinitelyTyped is definitely the place to find the definition file you need.

If your JavaScript is your own work or less well known, you'll have to write your own type declaration file. See the section Writing .d.ts files in The TypeScript Handbook.

If the name declaration file sounds intimidating, don't worry - they are far easier to write than programs. Also, remember that you don't need to specify all metadata for your JavaScript file, just the functionality you need.

Let me know if you need any help!

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

5 Comments

+1 Great TR:DR on how this works, generally and thanks for the DefinatelyTyped repo, seems best to check there first before deciding on a lib.
But then HOW do you include the .d.ts in your .ts file?
The d.ts file needs to be in the same project as the .ts file
The project is under node_modules. Are you saying I need to modify the project that is in node_modules? But then next time I do a clean install, won't those files be erased? How should I include .d.ts for a project that I downloaded using npm install?
@Doug the package I'm asking about is clipboard-js and it does not seem to have any declaration file.
9

You just have to tell the compiler that the method exists outside typescript:

declare function myJavaScriptFunction(param1: number, param2: JQuery): void;

Be sure that the website loads all files needed, the normal js files and the js files that the typescript compiler generated

Comments

1

You can see the latest version of the TypeScript documenttion in TypeScript Handbook on GitHub:

Also I am recomending you the tsd utility to search and install TypeScript definition files directly from the community driven DefinitelyTyped repository. This repository contains definition files *.d.ts for the most popular javascript libraries.

Comments

0

this brings an error while building like: Cannot resolve referenced file: ../libs/myjsfile.js

Reference file tags are for TypeScript not JavaScript. You would load JavaScript using a script tag in your page (or something like requirejs).

To use the JavaScript from TypeScript you would declare the API of the javascript you want to use for TypeScript consumption (as AKR pointed out).

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.