Upgrade from "typings" to "@types" using [email protected]

My Angular app is currently using 4.1.3 with 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c094b9b0a5b3a3b2a9b0b480f2eef0eef3">[email protected]</a>
. I've heard that for Typescript versions higher than 2.0, we should switch to using @types.

Right now, I have typings set up in my app. To transition to using @types, I have a few questions:

1. Should I remove typings from both package.json and tsconfig.json? And then install the relevant @types packages?

  1. How do I determine which @types packages are necessary for my specific application?
  2. Additionally, should I delete the typings.json file?

In my package.json:

{
"homepage": "https://github.com/angularclass/angular2-webpack-starter",
  "license": "MIT",
  "scripts": {
    // scripts list...
  },
  // dependencies list...
}

Inside tsconfig.json:

    {
  "compilerOptions": {
    // compiler options...
  },
  "exclude": [
    // exclusion list...
  ],
  // other configuration settings...
}

During the migration from typings to @types, I encountered an issue when trying to run the app:

errors.ts?f2f7:42 ERROR TypeError: directive.ngOnChanges is not a function
// stack trace error message...
javascriptangulartypescripttypescript-typings

Answer №1

  1. It is advisable to remove typings from your configuration files, the typings directory, and also delete the typings.json file. Instead, configure @types in your tsconfig.json:
{
  "compilerOptions": {
    "typeRoots": [ // This should suffice
      "node_modules/@types"
    ],
    "types": [ // Alternatively, you can specify the required typings here
      "node",
      "jasmine",
      "webpack",
      "lodash"
      // ... and so on.
    ]
  }
}

2. Libraries that previously used typings will now require corresponding @types packages. You can easily find them using the search engine on npmjs.com and install them like this:

npm install @types/webpack --save

I hope this information proves helpful for you.

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

Leveraging Angular signals for manipulating and keeping objects current

I've been delving into the world of using signals more frequently and have encountered a puzzling scenario. While many tutorials and resources online demonstrate creating signals with a single value and updating it using .set() or .update(), I find m ...

angularsignals

Guide on invoking an API with a private IP on an EC2 instance

I successfully deployed an Angular app and a Java REST-API on my ec2-instance. When accessing the Java REST-API via the public IP in my Angular app, everything works fine. However, if I try to use the private IP of my instance, it results in a connection ...

javaangularamazon-ec2amazon-vpcprivate-subnet

Simple method for counting unique values in React

Programming Language: JavaScript with React I am trying to calculate the number of unique "themes" in my data without counting duplicates. Data example: movies = [{"id" : 1, "name": "Ps: i love you", "theme": { ...

javascriptreactjs

When using Angular's ng-repeat, data binding may not work properly for arrays that are created dynamically

I've encountered a bug that I've been trying to troubleshoot with various solutions from StackOverflow, but nothing seems to work, such as: 1) Using $rootScope Array. 2) Implementing $scope.$apply() (after realizing it's not ideal due to a ...

javascriptangularjsangularjs-ng-repeat

Can you explain the variance between the (Record<string, unknown>) and object type?

Can you explain the distinction between type Record<string, unkown> and type object? Create a generic DeepReadonly<T> which ensures that every parameter of an object - and its nested objects recursively - is readonly. Here's the type I c ...

typescripttypescript-typings

a guide on incorporating jQuery ajax requests with node.js

Although I came across a similar question on Stream data with Node.js, I felt the answers provided were not sufficient. My goal is to transfer data between a webpage and a node.js server using a jQuery ajax call (get, load, getJSON). When I try to do this ...

javascriptjqueryhtmlajaxnode.js

Ways to populate table cells with random figures using a JavaScript button

[Users have the ability to input the number of rows and columns, and upon clicking the enter button, a chessboard will be displayed.][However, I am facing an issue with populating the table cells with random numbers using the Fill button] Thus far, the Ja ...

javascriptjquery

Save the text entered into an input field into a Python variable

Is there a way to retrieve the text from input fields that do not have a value attribute using Selenium? The issue is that these fields are populated automatically, possibly through JavaScript, upon page load and the text does not appear in the HTML source ...

javascriptpythonselenium

"Adjusting the height of a div element while considering the

I have 2 elements with different heights and I want to make them equal: var highestEl = $('#secondElement').height(); $('.element').first().height(highestEl); I understand that the second element is always taller than the first one. W ...

javascriptcsshtmlheight

Refusing to cease downloading music on the local server through the embedded audio element

I was trying to setup background music on my website, but when I test it localhost, the music download instead of playing. However, when I tested with the full path, it played as expected. How can I prevent the download from happening in localhost? Here i ...

javascripthtml

Having trouble getting this multi-select feature to function properly in Reactjs with Typescript? Let's figure out the solution together

I encountered an issue where I was unable to select multiple items due to a join error code "Property 'join' does not exist on type 'unknown'." in a .tsx file const DropdownMultiselect =()=> { return( <> ...

reactjstypescriptmaterial-uireact-typescript

problems encountered when trying to deploy a backend api on the Render platform

Encountered this error: May 14, 04:27:30 PM - Error [email protected]: The "node" engine is not compatible with this module. Expected version ">=14.20.1". Received version "14.17.0". May 14, 04:27:30 PM - Incompatible module detected. Verified my ...

javascriptnode.js

Ways to effectively update the state through different methods

Defining the state in React as follows: export interface IRoleState { data: API.InterviewList, menus: API.MenuItem, meta: { total: number per_page: number page: number } } When receiving a response from the server, ...

reactjstypescript

Combine array in MongoDB containing nested documents

I need assistance with querying my MongoDB database: Specifically, I want to retrieve data that is nested within an array and filter it based on a specific key within the nested structure. The example document looks like this: [ { "name": ...

javascriptnode.jsarraysmongodbdocument

Having trouble with GLB file loading in three.js?

My GLB file is not displaying in my Three.js world. Despite following all the documentation and tutorials, the model is not showing up. The world loads perfectly and everything works fine, except for the model not appearing. I am on a journey to create a ...

javascripthtmlthree.js

What is the optimal method for iterating through a nested array?

I've been searching like this for quite some time now, and it seems there must be a more efficient approach. The scenario is that I have a double elimination tournament bracket and need to locate a specific game. The brackets for winners and losers ar ...

javascriptarraysecmascript-6

The dropdown menu is erroneously showing buttons instead of the intended options

My dropdown function is causing a small issue. The desired behavior is that if the selected value is "", labeled "Please Select" in the dropdown menu (I've added a comment in the function to pinpoint the problem), then buttons A, B, and C should not b ...

javascripthtmlbuttondrop-down-menu

Prisma link excluding Property A

In my quest, I aim to retrieve all TutelageClasses where the user is not yet registered for the upcoming session. However, the current solution showcases all TutelageClasses regardless of registration status. My attempt involves executing the following qu ...

typescriptmongodbprisma

Display icon within ng-bind-html when the value is not true

Is there a way to integrate a fontawesome icon into ng-bind-html on ui-select based on a boolean value? <span ng-bind-html="project.IsActive == false && <i class="fa fa-ban" aria-hidden="true"></i> | highlight: $select.search">& ...

javascriptangularjsfont-awesomeui-selectng-bind-html

Sending a JSON object as a prop from one React.js component to another

I've been attempting to pass a JSON object retrieved by calling a REST API after submitting a form with user input. While I am successful in transferring the data to another component within the same file (this component is responsible for iterating o ...

javascriptjsonreactjsproperties