Tips on updating TypeScript to a higher major version

Despite upgrading all packages, deleting node_modules and package-lock.json, and reinstalling with npm install, the typescript runtime in my git repo is still showing version 4.9.5.

How can I update the tsc version to be higher than 5.0?

$ npx tsc --version
Version 4.9.5

$ ./node_modules/.bin/tsc --version
Version 4.9.5

In my NPM monorepo, all packages list "typescript" as a dev dependency. Previously, I uninstalled typescript from each package using "npm uninstall typescript", then re-added it via "npm install typescript -D" to reflect the new major version (from v4 to v5).

When building one of my packages (create-react-app), ESLint indicates that I am using typescript version 4.9.5.

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.9.0

YOUR TYPESCRIPT VERSION: 4.9.5

Please only submit bug reports when using the officially supported version.

None of my package.json files or package-lock.json file display v4. They all show v5.

$ npm list --depth=0 | grep -i typescript
│ └── [email protected]
...

I am currently using node 16.19 and npm 8.11 via nvm.

EDIT: This post focuses on Typescript within a NPM workspaces mono repo, not React or Create-React-App. Apologies for any confusion.

typescriptnpm

Answer №1

If you find yourself in a situation where:

  1. You are working with a NPM workspaces monorepo,
  2. The nested packages have a (dev) dependency on Typescript,
  3. You have upgraded the typescript version,
  4. But running npx tsc --version still shows the old version

Consider this scenario:

$ cd <repo_clone_directory>

$ ls -1 packages/
micro-service-1
micro-service-2
ui-1
ui-2

$ npx tsc --init
Version 4.9.5

In such cases, it might be necessary to ADD a (dev) dependency on Typescript in your top-level package.json file.

$ cd <repo_clone_directory>

$ npm install typescript

$ npx tsc --version
Version 5.2.2

If your CreateReactApp package raises concerns about unsupported typescript version during ESLint runs, you can:

  1. Temporarily disable ESLint.
  2. Eventually transition to vitejs as Create React App has been abandoned.

Snippet from packages/ui-1/package.json:

  "scripts": {
    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",

Additional tip: Including "typescript" in the top-level package.json can aid in minor version upgrades as well.

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

Mistakenly importing the incorrect version of Angular

While working on my Angular 1 app in typescript, I faced an issue when importing angular using the following syntax: import * as angular from 'angular'; Instead of importing angular from angular, it was being imported from angular-mocks. Thi ...

angulartypescriptangular-mock

obtaining the value of an input using typescript (put request)

Does anyone know how to extract input values and store them as JSON? I'm having trouble with accessing the input value in this scenario. When I attempt document.querySelector("todo-text").value, it results in an error. const NewTodo: React.FC<NewT ...

reactjstypescripttsx

Gatsby plugin installations lead to complete app malfunction

Every time I try to add new Gatsby plugins or typography files and then run gatsby develop, I encounter an error message stating that 'react' cannot be found. For instance: I start a new Gatsby site using gatsby new example-site https://github.c ...

reactjsnpmgatsby

Adding SCSS files to your Vue project globally in the year 2020: a step-by-step

Attempting to integrate global SCSS variables into my Vue project has been a bit of a challenge. I came across helpful resources on CSS-Tricks and Vue School that suggested installing sass-loader by running npm i node-sass sass-loader in the command line. ...

vue.jsnpmsassvue-cli

NestJs encountering issues with reading environment variables

I used the instructions from the Nest documentation to set up the configuration, however, it's not functioning correctly. app.module.ts @Module({ imports: [ ConfigModule.forRoot({ isGlobal: true }), TypeOrmModule.forRoot(config), AuthMo ...

node.jstypescriptenvironment-variablesnestjsdotenv

Passing values in onPress method of TouchableOpacity without using arrow functions or bind function can be achieved by using JSX props. Remember not to use arrow functions in JSX props

I am working on a React Native project and I have a TouchableOpacity component in my view with an onPress method. I want to avoid using arrow functions and bind functions in the onPress method as it creates a new function every time. My goal is to pass par ...

typescriptreact-nativejsxarrow-functions

Having trouble triggering a change event within a React component?

I'm working on a straightforward react-component that consists of a form. Within this form, the user can search for other users. To ensure the form is valid, there needs to be between 3 and 6 users added. To achieve this, I've included a hidden ...

javascriptreactjstypescript

Ensure that git information is incorporated into the parceljs build process

I am currently working on a web application using TypeScript/React, powered by ParcelJS. I am looking for a way to incorporate git information into the build process, either as a step in the build or through a resource file. I'm not sure if there is ...

npmparceljs

Setting a maximum value for an input type date can be achieved by using the attribute max="variable value"

Having trouble setting the current date as the "max" attribute value of an input field, even though I can retrieve the value in the console. Can anyone provide guidance on how to populate the input field with the current date (i.e max="2018-08-21")? var ...

htmlangulartypescript

Properly specifying the data type for a generic type variable within a function in TypeScript

As I work on my express project, I am currently coding a function called route. const morph = (params: Function[]) => (req: Request) => params.map(f => f(req)) const applyTransformers = (transformers: Function[]) => (response: any) => { ...

typescriptexpresstypingtypescript-types

Developing forms in Angular 5 involves the decision of either constructing a specific model for the form group inputs or opting for a more generic variable with two

As a newcomer to Angular, I've noticed that most courses and tutorials recommend using a model or interface for form data. However, I have found it more efficient and straightforward to just use a generic variable with two-way data binding. Could som ...

angulartypescriptangular5angular-reactive-forms

Creating a cherry-picked React component library inspired by Lodash and date/fns

After developing a small library containing 20-25 different components and creating an npm package for it, I encountered an issue with my React project. In this project, which utilizes lazy-loading for each page, the initial bundle size was significantly l ...

reactjsnpmwebpackpackagepublish

Error: No 'map' property found in 'TwitterserviceService' type

Currently, I am in the process of learning how to develop simple and basic Angular applications. As part of my learning journey, I decided to incorporate my Twitter timeline into one of my projects. To aid me in this endeavor, I referred to various online ...

angulartypescript

Encountered an error while running the prestart script for [email protected] during npm installation

I am completely lost, can someone please help me figure out what the issue here is? Thank you. npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdaca3aab8a1acbfe0bda5a2a3a8aeacb98dfde3fde3fd">[email protected]</ ...

windowsnode.jsangularjsnpm

Setting up Webpack for my typescript React project using Webpack Version 4.39.2

I have been given the task of fixing the Webpack build in a project that I am currently working on. Despite not being an expert in Webpack, I am facing difficulties trying to make it work. The project has an unconventional react frontend with typescript. I ...

javascriptreactjstypescriptwebpack

Bot on Discord engaging in a gaming session

I recently developed a Discord bot with the status of ""playing a game"" and here is the code that I implemented: bot.on('ready', () => { console.log('Client is online!'); bot.user.setActivity('osu!'); Th ...

javascriptnode.jsnpmdiscorddiscord.js

Encountering Syntax Error while running `ionic serve` in IONIC2

I'm stuck on this Syntax error and I can't figure out what went wrong. It keeps showing up even though I copied the code directly from the official ionic2 docs. SyntaxError: D:/Manson/Arts/Ionic/IonicTodo2/app/pages/list/list.js: Unexpected toke ...

javascriptangularjstypescriptionic-frameworkionic2

Is npm audit exclusive to production dependencies?

At the moment, while executing npm audit within a project, it examines both the dependencies and the devDependencies. I am interested in finding a method to solely validate the dependencies. Is there a way to accomplish this at present? ...

node.jssecuritynpmaudit

Unable to transfer PNG files using the express route

I am facing an issue with rendering a PNG image served from my express endpoint. I have the image stored as a buffer in node, but despite my efforts, I am unable to display it correctly on the webpage. Current Situation https://i.stack.imgur.com/vRQjB.pn ...

node.jsimageexpressnpmsharp

"Protractor encountered an issue when navigating to the most up-to-date Angular section in our

We are in the process of upgrading our application from AngularJS to the latest version of Angular. I am currently working on writing tests that transition from the AngularJS version of the app to the admin application, which is built using the latest ver ...

javascriptangularjsangulartypescriptprotractor