0

Here is the situation:

I have an old third party javascript function and I want to use it in my typescript codes simply using ambient declaration:

old.js: (is loaded by <script> in my .aspx file)
function myFunc() {
    return “Hello World”;
}

typing.d.ts:
export declare function myFunc(): string;

app.ts
import { myFunc } from “./typing”
let str: string = myFunc()

transpild app.js:
var str = typing_1.myFunc();

There is no issue in compile time but in runtime I get this error: ‘myFunc is not a function’

Any help will be appreciated

HHayat
  • 61
  • 10
  • Why would expect that to work. It does not typecheck for one thing. The syntax isn't even valid. – Aluan Haddad Feb 01 '18 at 19:24
  • Sorry I don't understand. Could you please be more specific? What would be the correct option? – HHayat Feb 01 '18 at 19:59
  • What I mean is (1) since the variable is not exported, why would importing it work? (2) `declared` is not a keyword (3) since the code is in `./old.js` how would importing from `./typing` load it at runtime (file name needs to align) – Aluan Haddad Feb 01 '18 at 20:04
  • 1
    @AluanHaddad thanks for your comments. It was a typo, actually I just made a simple example out of a big file. Anyway I applied your first and second notes and also updated the question to answer your third comment. Still same issue – HHayat Feb 01 '18 at 20:14
  • Yes. That is correct – HHayat Feb 01 '18 at 20:20
  • Then what you are doing makes no sense since it doesn't _export_ a function the code will fail. It defines a global so just import for the side effect `import './old'; myFunc()` which will create the global, and then use it. Also, your the code shown will always fail because the `.d.ts` file has to match the name of the actual file you are loading at runtime (i.e. `old.d.ts`) or it will always fail. – Aluan Haddad Feb 01 '18 at 20:22
  • @AluanHaddad Thanks a lot. Two questions: 1) What do you mean by " import for the side effect import './old';"? 2)Should I put the old.d.ts in the same folder that old.js reside? – HHayat Feb 01 '18 at 20:46
  • (1) it means an import statement that declares a dependency on some code just to ensure that code is run. `old.js` exports nothing so we can't import it, but we need its side-effect (declaring a global variable) to happen before we use it. (2) yes for the same reason as (1), we need that code (old.js) to be loaded. See https://www.typescriptlang.org/docs/handbook/modules.html, and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import – Aluan Haddad Feb 01 '18 at 20:51
  • 1
    @AluanHaddad Excellent. I renamed typing.d.ts to old.d.ts and put it in the same folder where old.js resides, and it worked. Please write an answer to my question then I will pick it as the correct one. – HHayat Feb 01 '18 at 21:00
  • And one more question. How to change old.js to export myFunc and then how to import it by the consumer? – HHayat Feb 01 '18 at 21:06
  • How you modify the `.js` depends on your setup, what module format you are using, etc. The declaration file would change to `export declare function myFunc(): void`. At that point, why not rename the file to `old.ts`? – Aluan Haddad Feb 01 '18 at 21:09
  • 1) I use "sysem" module format and the target is "es5" 2)Because I need to type so many interfaces and classes in the old.js so I need .d.ts – HHayat Feb 01 '18 at 21:14
  • SystemJS handles module syntax (`import`/`export`). So you can just use `export function myFunc(){...}` in `old.js`. – Aluan Haddad Feb 01 '18 at 21:16
  • @AluanHaddad Thanks. Waiting for your separate answer thread :) – HHayat Feb 01 '18 at 21:52
  • Sorry, but IIRC I've answered this question before I think. Glad I could help but I don't want to spam. – Aluan Haddad Feb 01 '18 at 21:53
  • Ok. I will add an answer to help readers out who are chasing the comments – HHayat Feb 01 '18 at 22:18

1 Answers1

0

So many appreciate @AluanHaddad for his comments toward fixing the issue. Here is the answer:

Need to rename typing.d.ts to old.d.ts and put it in the same folder that old.js resides. This is due to the old.js just includes global and doesn't have any export

HHayat
  • 61
  • 10