Typescript type cast is not parsed by Prettier

I am currently using Prettier version 1.17.1 and TypeScript 3.4.5 in combination with create-react-app.

Every time I attempt to utilize the x as T syntax in TypeScript for type casting, I encounter the following error:

src/Form.tsx
[error] src/Form.tsx: SyntaxError: Unexpected identifier (82:57)
[error]   80 |                 value={data.position}
[error]   81 |                 onChange={e => {
[error] > 82 |                     const nextPosition = e.target.value as Position

Although I have also experimented with an alternative syntax <T> x, it causes a failure during Typescript compilation due to the JSX format.

typescriptprettierreact-tsx

Answer №1

Issue resolved! I found the solution by explicitly specifying the --parser option when executing it. Even though the documentation indicated that it should be automatically detected, it was not functioning properly with files in the .tsx format.

Executing prettier --parser typescript solved the problem

Answer №2

pietro909's observation is accurate, however, when utilizing .prettierrc for setup, incorporating this code snippet into the file should yield similar results.

"parser": "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

Can you explain the concept of cross referencing classes in Javascript/Typescript?

I am encountering difficulties with cross-referencing classes that are defined in the same file. // classes.ts export class A extends BaseModel implements IA { static readonly modelName = 'A'; b?: B; symbol?: string; constructor(object: ...

javascripttypescriptbabeljsnrwlinversifyjs

What is the best way to focus on a particular version of TypeScript?

After upgrading my Angular 2 project to RC1 and the router to v3 alpha3, I encountered the following errors: node_modules/@angular/router/directives/router_outlet.d.ts(10,14): error TS1005: '=' expected. It appears to be a TypeScript version is ...

typescriptangularangular2-routingtypescript1.9

Unable to directly assign a variable within the subscribe() function

My goal is to fetch a single row from the database and display its information on my webpage. However, I've encountered an issue with the asynchronous nature of subscription, which prevents immediate execution and access to the data. Upon running the ...

javascriptangulartypescript

Customizing AxiosRequestConfig with Axios in TypeScript can greatly enhance the functionality and

Currently working with React and Axios. Lately, I've been experimenting with custom configurations in Axios as shown below: import $axios from 'helpers/axiosInstance' $axios.get('/customers', { handlerEnabled: false }) However, wh ...

javascriptreactjstypescripttypesaxios

Bidirectional data binding in Angular 2 allows for communication between parent components and directives

Update: Experimenting with Angular2 Beta, I am working on incorporating an "editor" component template that includes a directive wrapping the Ace editor. In this scenario, the "editor" component acts as the parent of the Ace wrapper directive, and my goal ...

typescriptangularangular2-directives

React JS displayed the string of /static/media/~ instead of rendering its markdown content

When I looked at the material UI blog template, I created my own blog app. I imported a markdown file using import post1 from './blog-posts/blog-post.1.md'; Next, I passed these properties to this component like so: <Markdown className=" ...

reactjstypescriptmaterial-uimarkdown

Automatically assign the "Restricted" cursor to disabled fields within a dynamic form

Is there a method in Angular 6/7 that allows the cursor to change to "Not Allowed" when hovering over a disabled field in a reactive form? I prefer not to use CSS for this cursor change. Is there a way to achieve this through Angular alone? Currently, th ...

angularcsstypescriptangular-reactive-formsangular-forms

Using TypeScript to access global variables from inside a method

Hi everyone, I'm trying to figure out how to access variables from the global scope (this) within 2 methods. Any help would be greatly appreciated. location: any; doSomethingOne() { Geolocation.getCurrentPosition().then((resp) => { ...

typescriptecmascript-6ionic2

Simple steps to transform the "inputs" syntax into the "@Input" property decorator

There's this code snippet that I need to modify: @Component({ selector: 'control-messages', inputs: ['controlName: control'], template: `<div *ngIf="errorMessage !== null">{{errorMessage}}</div>` }) Is the ...

typescriptangulartslint

Incorporate a generic type into your function component

I am working with the following code block: interface Interface<T> { submit: T, children: (ctx: { test: string, info: string }) => React.ReactNode | ReactElement; } const Test: React.FC<Interface<T>> = ({submit, children}) =& ...

reactjstypescript

Is error propagation from nested Promise to parent Promise not working properly in Node.js?

I'm currently working on a Node.js/TypeScript API with Express. Below is a snippet from my get method where I encountered an error in the format function. The error is caught by the promise, but it doesn't propagate to the parent promise after th ...

node.jsexpresstypescriptpromisesequelize.js

What is the process for setting a Type to a prop in React?

I have a main component: // DashboardComponent.tsx const DashboardComponent = () => { const {loading, error, data} = useQuery(resolvers.ReturnAllMovies); if (loading) return <p>loading</p>; if (error) return <p>Error! ${error.m ...

reactjstypescript

error TS2304: The term 'MediaRecorder' is not recognized

How can I add audio recording capability to my Angular application using media recorder? Unfortunately, I am encountering the following error: Error TS2304: 'MediaRecorder' cannot be found If anyone knows a solution for this issue, your help w ...

javascriptangulartypescriptmediaaudio-recording

Verify the data types of components received as props in a Typescript React application

I have a question regarding type checking in React components passed as props: What is the method for ensuring that only allowed components are passed as props? Allow me to demonstrate. We have the component we wish to pass around: type CustomProps = { ...

reactjstypescriptwebfrontend

Is it normal for the Array of Observables to be empty upon initial page load, only to contain content later

Currently, I am working on integrating ngx-infinite-scroll functionality. My goal is to extract the initial 5 posts from my "posts" array and populate them into the "shownPosts" array at the beginning. Subsequently, as the user continues scrolling down, I ...

arraysangulartypescriptobservablejson-server

What steps do I need to take in order for TypeScript source files to appear in the node inspector?

Currently developing a node express app with TypeScript 2.3. Compiling using tsc Interested in debugging TypeScript code using node-inspector (now included in node 6.3+) SourceMaps are enabled in my tsConfig.json file { "compilerOptions": { "targ ...

node.jstypescriptexpressnode-inspector

A different approach to routing in Next.js with getServerSideProps

Let's say I have a dynamic route in my application, with the name [id] Typically, I use getServerSideProps in the pages router to validate any properties passed to the route. It usually looks something like this: export async function getServerSidePr ...

typescriptnext.js

What is the method for determining the type of search results returned by Algolia?

My connection between firestore and algoliasearch is working well. I am implementing it with the help of typescript in nextjs. I am attempting to fetch the results using the following code snippet products = index.search(name).then(({hits}) => { ret ...

reactjstypescriptfull-text-searchnext.jsalgolia

Angular 4 not throwing errors when using Array.Filter and find

Having trouble filtering a list using Array.find and filter functions. Here is the function in question: setSupplierDetails(supplierId) { const supplier = this.suppliers.filter(tempSupplier => tempSupplier.id === supplierId)[0]; this.supplierName = ...

angulartypescript

How can I obtain my .apk file?

I want to convert my app into .apk format. I inserted the following scripts on my "package.json" page: "build:development:android": "ionic cordova build android" and "build:production:android": "ionic cordova build android --prod --release". However, I ...

androidtypescriptcordovaionic-frameworknpm