Using both Typescript and Javascript, half of the Angular2 application is built

My current project is a large JavaScript application with the majority of code written in vanilla JavaScript for a specific platform at my workplace.

I am looking to convert this into a web application that can be accessed through a browser. I believe this transition can be easily achieved by replacing the components from my current application with those of a different web technology.

Considering Angular2 is built with TypeScript, if I opt to use it as my framework, would it be necessary to rewrite the non-component JavaScript code into TypeScript as well?

Is it advisable to have an application that consists of both TypeScript and JavaScript like this?

Answer №1

Mixing TypeScript and JavaScript is a common practice that I engage in daily. However, it is important to be aware that this combination can pose challenges at times. Therefore, I strongly recommend expediting the migration process to TypeScript.

If you are considering transitioning from JavaScript to TypeScript, I suggest referring to this helpful guide: https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html

Another useful resource on this topic is available here: https://basarat.gitbooks.io/typescript/content/docs/types/migrating.html. Keep in mind that while informative, the author may present a biased perspective, so exercise caution when implementing their suggestions.

There are numerous resources accessible for those looking to transition from JavaScript to TypeScript.

Based on my experience with migrating to TypeScript over the past month, converting existing JavaScript files to TypeScript by adding exports and necessary imports has proven to be effective. This method allows for seamless integration without disrupting functionality.

To ensure compatibility, it is advisable to exclusively utilize old JavaScript within your TypeScript codebase, rather than vice versa. Consider segregating your project into distinct packages, loading JavaScript globally as previously done, and creating typings specifically for the components integrated into TypeScript.

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

Showing a confirmation message to the user upon clicking outside of a specific section

On my webpage, I have a section for creating content, as well as a top bar and sidebar with internal links (both controlled by ng controllers). I am looking to implement a confirmation message that will appear if the user tries to leave the page while in t ...

Using Npm to install a module results in an abundance of files being provided

Back when I used npm install 6 months ago to install a module, it would create a new folder under node_modules containing all the files for that module. However, now when I use it, it creates multiple files for one module. How can I install a module to a ...

Altering the JavaScript variable by selecting an option from a dropdown list

After downloading a choropleth map from leafletjs.com, I encountered an issue with multiple JS files labeled by year (e.g. us-states2012.js, us-states2013.js). The challenge now is to implement a drop down menu in such a way that selecting a specific year ...

What could be causing the elements in my array to appear as undefined?

https://i.stack.imgur.com/ze1tx.png I'm stuck trying to understand why I can't extract data from the array. const usedPlatformLog: Date[] = [] users.forEach(el => { usedPlatformLog.push(el.lastUsed) }) console.log(usedPlatformLog) // disp ...

Maintain MUI Autocomplete in the open state even after making a selection from the

Whenever I select certain options on my Autocomplete component, I want to keep the component open. However, each time I click on onChange, the Autocomplete closes automatically and I can't seem to find a way to prevent this. Is there a workaround? In ...

Is there a way to assess Python code within a document's context using JavaScript in JupyterLab?

When using Jupyter Notebooks, I can create a cell with the following JavaScript code: %%javascript IPython.notebook.kernel.execute('x = 42') After executing this code, in another cell containing Python code, the variable x will be bound to 42 a ...

Is a referrer included in AJAX requests made from the background page of a Google Chrome Extension?

Can anyone confirm if AJAX requests sent from the background page of my Chrome Extension will include referrer information? I'm wondering about this. Appreciate any insights you can provide! ...

How come my diary section (5th) is showing up/operating in my teacher's section (4th)?

My journey with HTML, CSS, and Javascript began as a beginner. After following a tutorial on YouTube and making some modifications, everything was running smoothly until the diary section unexpectedly appeared under the teacher's section, which should ...

Transfer items on a list by dragging and dropping them onto the navigation label of the target component

I'm currently exploring how to move an element from a list to a <div> and then see it transferred to another list. The objective is to allow users to drag items from one list onto the labels in a sidebar navigation, causing the item to switch t ...

Tips for increasing visibility for your Google Analytics Embed API Custom Components

I recently tried to incorporate some code I found at the following link: After downloading the files view-selector2 and date-range-selector, I saved them in my local directory. I made a modification to the code: var accountSummaries = require(['&ap ...

Using JQuery to handle click events on an array of checkboxes and displaying the value of the selected

I am struggling to show the label text and checkbox value from a checkbox array whenever each one is clicked (for testing purposes, assume I want it to appear in an alert). My HTML looks like this: <label class="checkbox"> <input type="checkbox" ...

The request for the URL (https://deno.land/std/encoding/csv.ts) could not be sent due to an operating system error with code 100

Encountering an issue with importing the stdlib files from deno.land to the local cache when running mod.ts. Error: error sending request for url (): error trying to connect: tcp connect error: An attempt was made to access a socket in a way forbidden by ...

Replacing the yellow autofill background

After much effort, I have finally discovered the ultimate method to remove autofill styling across all browsers: $('input').each(function() { var $this = $(this); $this.after($this.clone()).remove(); }); However, executing t ...

Using jQuery, check if the input contains any phrases from the array that are suitable for children

I stumbled upon some code designed for a chat system. My plan is to implement it as a child-friendly global chat, so that I can avoid any blame associated with inappropriate content. The basic premise of the code involves checking user input against an arr ...

Could not find yarn command even after installation with npm

Following the guidelines for yarn v2 installation, I tried to install using npm install -g yarn. I executed sudo npm install -g yarn on Ubuntu 20.04. However, after running this command, it returned "command not found." ❯ sudo npm install -g yarn > ...

Unusual conduct exhibited by a 16th version Angular module?

I've created a unique component using Angular 16. It's responsible for displaying a red div with a message inside. import { ChangeDetectionStrategy, Component, Input, OnInit, } from "@angular/core"; import { MaintenanceMessage } ...

What is the best way to incorporate CSS into an Angular 4 project?

I'm struggling to figure out how to import CSS into my app component. All the information I find on Google seems to lead me in different directions... Within my component, I have defined: @Component({ styleUrls: ['../css/bootstrap.min.css&ap ...

Conceal a div element using a button through JavaScript

I've been scouring various online resources for solutions, including Stack Overflow and W3Schools, but I haven't had any luck so far. Here's a simplified version of my current code: <script language="javascript"> function remove() ...

Looking for assistance in setting up an auto-suggest feature that displays retrieved or matched data from the database in a list format

I am currently facing an issue with the following problem: I have a form that includes a single search field with autosuggest functionality. I want to be able to type either a name or mobile number in this field. As I type, suggestions should appear base ...

What is the best way to incorporate a unique font with special effects on a website?

Is there a way to achieve an Outer Glow effect for a non-standard font like Titillium on a website, even if not everyone has the font installed on their computer? I'm open to using Javascript (including jQuery) and CSS3 to achieve this effect. Any sug ...