How to import types in typescript

[rbirkgit]

I wonder if you have an example how to use Prism from typescript? I cannot find any and cannot figure it out.

I have seen code like this, but that doesn’t use any types. I saw you added types, but how do you import them and use them here?

declare let Prism: any;
 
Prism.highlightElement(this._el.nativeElement);

I tried this:

import * as Prism from 'prismjs';

But then calls to Prism didn’t work. No errors, just nothing happened. So I assume I need to declare the Prism variable and a type but cannot figure out what type to use.

[johnnyreilly]

Do you have this package installed? https://www.npmjs.com/package/@types/prismjs

[rbirkgit]

Yes, that is my question. How do I use the types there? I cannot figure out how.

[RunDevelopment]

How you use Prism very much depends on your environment. Do you use a framework to build a website (meaning that Prism will be executed in the browser), or do you build a server application (meaning that Prism will be executed by NodeJS)?

Also, import * as Prism from 'prismjs' is probably the wrong import style. Please try import Prism from 'prismjs'.

[rbirkgit]

I am running an angular app, so in a web browser.

[rbirkgit]

I tried import Prism from 'prismjs' but also does not work.

The only thing I managed to work so far is to do this:

declare let Prism: { highlightElement: (element: Element) => void };

Prism.highlightElement(this._el.nativeElement);

Meaning I have to hard code the type. I thought including @types/prismjs would add types. Is there a way to use the types?

[RunDevelopment]

I thought including @types/prismjs would add types

It does. There might be something wrong with your tsconfig.json. Could you share the project (or just the relevant parts) of the project you're working on or a minimal example reproducing your problem?

[rbirkgit]

Maybe you don't understand me. The import does include all kind of types, but not the one to be able to call the root Prism APIs. It doesn't have a type for the root object. That's why I had to come up with my own like this:

declare let Prism: { highlightElement: (element: Element) => void };

Only then I could call APIs on it:

Prism.highlightElement(this._el.nativeElement);

If I just do this instead of my declare above:

import Prism from 'prismjs'

Then the compiler will be fine, but when calling the highlightElement() function, nothing will happen. My ts and json will not be highlighted. I change to my own declaration and all works and lights up.

[RunDevelopment]

Let's see if I understood you correctly:

1. When you import Prism from 'prismjs', you get all the types from @types/prismjs but Prism doesn't highlight your code.
2. When you import * as Prism from 'prismjs', you do not get the types from @types/prismjs (hence you made your own type declaration) but Prism highlights your code.

Also, you're using angular. Do you also use our babel plugin? (I don't mean to suggest that you should use our babel plugin, I just want you ask whether you are currently using it.)

[rbirkgit]

1 and 2 above both import types, but neither will give a type for the Prism global object. Hence I had to create my own type.

It seems Prism requires one to declare a global variable of a certain type. All examples I have seen are using the any type. I was hoping the @types/prismjs would give me a type.

We only do one call to Prism, the one mentioned above. It's an Angular CLI generated app. No babel plugin.

All I am looking for is the type for the Prism global variable. It has the highlightElement() function. That all I know and so invented my own type for now.

[rbirkgit]

1 and 2 above both import types, but neither will give a type for the Prism global object. Hence I had to create my own type.

It seems Prism requires one to declare a global variable of a certain type. All examples I have seen are using the any type. I was hoping the @types/prismjs would give me a type.

We only do one call to Prism, the one mentioned above. It's an Angular CLI generated app. No babel plugin.

All I am looking for is the type for the Prism global variable. It has the highlightElement() function. That all I know and so invented my own type for now.

[rbirkgit]

Let me try to explain. The following works, and what the examples I found are using. It uses any and does not have a type. This is my question, how do I get a type? This is all the Prism code I use.

declare let Prism: any;
Prism.highlightElement(this._el.nativeElement);

I couldn't figure out how to get a type, so ended up inventing my own like this. It also works.

declare let Prism: { highlightElement: (element: Element) => void };
Prism.highlightElement(this._el.nativeElement);

I tried the following, but does not work. No errors, just nothing is hppening with my ts and json content.

import Prism from 'prismjs'
Prism.highlightElement(this._el.nativeElement);

I also tried this. Also does not work like above. No errors, nothing happening.

import * as Prism from 'prismjs'
Prism.highlightElement(this._el.nativeElement);

[rbirkgit]

In my angular.json file I have:

            "styles": [
              "prismjs/themes/prism-solarizedlight.css"
            ],
            "scripts": [
              "prismjs/prism.js",
              "prismjs/components/prism-typescript.min.js",
              "prismjs/components/prism-json.min.js",
              "prismjs/components/prism-scss.min.js",
            ],

[rbirkgit]

I finally figured it out. It wasn't clear to me. The examples I found were misleading me. Either way, I got it now.

I need to remove all the js entries from my angular.json file. Then use this in my ts file:

import Prism from 'prismjs';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-scss';

Now it highlights typescript and json. I should have realized that the import syntax was also importing the js code and not just the types.

[RunDevelopment]

Glad you found a solution!

Just one final note: Consider using our babel plugin instead of importing components manually. The load order between components matters, and components might implicitly depend on each other. So importing these files manually is very brittle and error-prone. The babel plugin will generate these imports (and take care of dependencies and load order) for you.

However, that's just if you need to highlight more languages in the future.

[rbirkgit]

Thanks for the suggestion. From what I understand Angular CLI projects don't support babel and plugins.
https://stackoverflow.com/a/60570089

I tried just in case and doesn't seem to work. Added the plugin and .babelrc file. Highlighting stopped working.