How to use a Javascript script in Typescript (Angular 5 CLI)

I am in the process of converting an old web site to Angular 5 CLI. Little technical value other than I need to understand the underlying concepts, but I needed to take some Javascript code and execute it in Typescript, the de facto language for Angular. And you hear that Typescript is a super set of ECMAScript, but it's not as easy to integrate existing code.

So, first of all, we are talking pure Javascript code, not set up as a module or anything more advanced. Let's say something like function say(message) { return 'I say '+message.content+' ('+messsage.author+')'; }. It's a simple function declaration receiving a message object with the fields content and author and returns a string. How to use it in Typescript, which is a strong typed language?

First of all, you need to load the script itself. The file can be added to angular.cli.json, in the scripts section, like this:

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "assets/js/someJqueryThing.js",...

Next, in the Typescript file you want to execute the code, import the script:

import('someJqueryThing')

(note that it is not some import something from something else syntax, just the name of the script, so that it is bundled in for that page. But at this moment Typescript tells you there is no say method, and that's because you have not declared it for Typescript.

There are two options. One is to add a file called someJqueryThing.d.ts in the same folder with the .js in which you declare the signature of the say function, the other is to declare it in the .ts file you are running the Javascript from. The syntax, for this case, is

declare function say(obj:any):string;

You could declare an interface and specify what kind of object say receives

interface Message {
  content:string,
  author:string
}
declare function say(message:Message):string;

, or you can even declare var say:any;