Variations in importing choices for external libraries in TypeScript/Angular 2

Can you explain the difference between these two syntaxes:

import * as jslibname from 'jslibname'
and declare var jslibname: any;

For instance, I am required to use declare var firebase: any; for Firebase, Whereas for Moment, I use

import * as moment from 'moment';

What is the underlying logic behind choosing one over the other?

By the way, this pertains to Angular CLI and SystemJS.

Answer №1

When you import the library using

import * as library from 'library';
, you are effectively bringing the library into your code, allowing you to utilize it. If you attempt to use the library without importing it first, you will likely encounter an error. There may be instances where the library is already imported elsewhere in your application, and you simply want to make use of it. In such cases, you can do so without any issues – the application will still function properly. However, if the TypeScript compiler identifies an error (and your IDE highlights it accordingly), it may be due to a lack of a typing definition file for the library (.d.ts). To address this, you can add the following declaration:

declare var library: any;

This statement informs the TypeScript compiler that 'library' does exist, thus preventing compilation errors (as well as eliminating IDE notifications).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The "Firestore Client not discovered"

As a beginner in PHP and Firebase, I attempted to integrate Firestore into a PHP website. Unfortunately, I encountered an issue. use Google\Cloud\Firestore\FirestoreClient; ini_set("display_errors", 1); ini_set("track_errors", 1); ini_set( ...

Creating a request with Angular 2+ that includes both JSON data and FormData

Is it possible to send both FormData and a JSON object simultaneously using the http.request function in Angular 2+? I am specifically looking for a solution for Angular 2+, not AngularJS. let data = {id: 1, name: 'test'}; let formData = new For ...

Retrieve the component's name using ReactElement.type.name

In my current project, I am working with React and Typescript. I need to retrieve the name of a functional component, which I have discovered can be accessed through the 'type' property of the component like this: component.type.name. Initially, ...

TypeScript - passing a specific type of a union type to a nested function

const function = <T>( input: string | ArrayLike<T> ) => (output: string | ArrayLike<T>, position = 0) => { // perform operations with input and output } const result = function ('abc') In this scenario, the resulting ...

A Guide to Launching the Angular 2 Quick Start Project on a Linux (CentOs) System

I'm struggling with deploying this on CentOS using a daemon thread. Currently, I can only initiate it with: npm start. However, I want it to automatically start without needing my manual intervention! Thank you for any assistance. I attempted to foll ...

Tips for changing a function signature from an external TypeScript library

Is it possible to replace the function signature of an external package with custom types? Imagine using an external package called translationpackage and wanting to utilize its translate function. The original function signature from the package is: // ...

When the edit button is clicked, retrieve the image name and show the selected input file using Angular

Is there a way for me to eliminate the "No file Chosen" text and display category.ImageName when I click the edit button? I have already added [(ngModel)]="category.ImageName" to the input field, but it doesn't seem to be working. <div *ngIf="categ ...

Discover the process of fetching the current day in Angular 2/4 and trimming it down to only three characters

After using currentDate = new Date(); in my typescript file and attempting to display it with {{currentDate}}, the full format appeared as Sun Aug 06 2017 15:36:11 GMT+0530 (IST). Referring to AngularDatePipe, I changed it to {{currentDate | date}}, resul ...

Specify an array parameter with specific types in TypeScript 3

Check out my code snippet below: import * as React from 'react'; export const Suggestions = (props:any) => { const options = props.results.map((r: { id: number ; name: string; }) => ( <li key={r.id}> {r.name} </li ...

Issue with Angular 2 in Visual Studio 2013: Pressing Ctrl+K+D causes formatting to change to lowercase

Please note that while this issue is not directly related to Angular2, anyone who uses Angular2 with Visual Studio 2013 may be able to help. Whenever I use the key combination Ctrl + K + D in Visual Studio 2013, it changes HTML or Angular2 directives/mark ...

Utilizing Typescript with Next.js API to limit the NextApiRequest query parameter to only accept string types

Is it possible to restrict the req.query in NextJS NextApiRequest to only accept string types instead of string | string[]? For instance, if someQueryParam is currently of type string | string[], but I need it to be just a string. export default async fun ...

The utilization of @ViewChildren within a service.ts file can lead to an undefined outcome

I'm facing an issue where I get an undefined error when using ViewChildren to find specific elements in a service. The problem arises because the service is used across multiple HTML files. Is there a way to properly load these children within the ser ...

How can you update ngModel in Angular and mark the form as dirty or invalid programmatically?

My form is connected to a model as shown below In the component file: myTextModel: string; updateMyTextModel(): void { this.myTextModel = "updated model value"; //todo- set form dirty (or invalid or touched) here } Html template: <form #test ...

Using Typescript with Angular 2 to Implement Google Sign-In on Websites

Currently, I am in the process of creating a website that utilizes a typical RESTful web service to manage persistence and intricate business logic. To consume this service, I am using Angular 2 with components coded in TypeScript. Instead of developing m ...

Typescript - Guarantee Presence of Generic Property on Generic Type Through Clear Error Message

(Heads up for Typescript beginners) I'm working on a reusable reducer function that takes a state and an action, but is designed to only accept state objects with a specific type at a particular key. This key is passed as a parameter to the function. ...

Tips for utilizing an object key containing a dash ("-") within it

Here is an example of the object structure: { approved_for_syndication: 1 caption: "" copyright: "" media-metadata: (3) [{…}, {…}, {…}] subtype: "photo" } How can I properly a ...

Utilize external libraries with Angular 2 for Just-In-Time and Ahead-of-Time compilation techniques

I've been working on setting up my codebase to support both JiT and AoT compilation in order to utilize JiT for local development and AoT for production. Following the Angular documentation, I have successfully configured both modes individually. How ...

Capture all HTTP requests made by Angular2

I'm trying to find a way to intercept and modify all HTTP requests made by Angular by adding custom headers. In previous releases prior to angular2 RC5, this was achieved by extending the BaseRequestOptions like this: class MyOptions extends BaseRequ ...

One way to resolve this issue in Angular 15 is by creating separate address objects within an array. This can be achieved by

Currently working on Angular 15, I have received JSON data that includes addresses and profile names. My goal is to display the address along with the profile name in the following format: Expected Result: [ {name:'Pharmarx Pharmaceutical Inc', ...

Nested ng-template in PrimeNG dropdown menu allows for a more dynamic and

I'm having trouble figuring out how to implement nested ng-template in Angular 5.2. Currently, I have a component within my app that utilizes PrimeNG dropdown: @Component({ selector: 'app-dropdown', template: ` <p-dropdown [opti ...