As I work on converting the forms example from JS to TS, I came across a typescript error related to directives in HTML: https://i.sstatic.net/Hl8Pv.png
It appears that validate and formSubmit are being recognized as unused variables by typescript, resulting in the following jsx error:
Property 'use:formSubmit' does not exist on type 'FormHTMLAttributes<HTMLFormElement>'.
In order to implement custom JSX types in SolidJS, you must first extend the built-in JSX types:
declare module "solid-js" {
namespace JSX {
interface Directives {}
}
}
It is also crucial to ensure that the directive is not removed during the Typescript compilation process:
true && formSubmit
This step is necessary because even if you suppress type errors with a pragma, the directive may still be optimized out through tree-shaking. To test this functionality, try exporting the directive to a separate module. Without the specified line of code, the directive will not be included in the final compiled output.
SolidJS provides detailed directives documentation:
_
One of the examples is the model directive:
<input type="text" use:model={[name, setName]} />;
declare module "solid-js" {
namespace JSX {
interface Directives {
model: [() => any, (v: any) => any];
}
}
}
In order to eliminate JSX errors, you can include the following code snippet before the component:
type ValidationFunction = ({ value }: { value: string; }) => Promise<unknown>;
declare module "solid-js" {
namespace JSX {
interface Directives {
formSubmit: (form: HTMLFormElement) => void;
validate: ValidationFunction[];
}
}
}
Although, there might still be errors related to directive names, such as:
formSubmit is declared but its value is never read.
Even though it is used as a directive in the jsx.
To address this issue, you can either ignore it using "// @ts-ignore" like:
// @ts-ignore
const { validate, formSubmit, errors } = useForm({
Or simply make it appear as a used variable with:
true && formSubmit
Currently, I am diving into Typescript and VueJS, where I encountered an issue with pushing elements to my array. It seems to constantly override the 'name' property. Let me share the code snippet causing this problem: const itemsSelectedOptions ...
Imagine a scenario where we have two packages, namely package1 and package2. When package2 attempts to import the module from package1, an error is thrown stating that the module is not found. The import statement in question looks like this: import { ... ...
In my Angular 4 project, I have developed a custom sidebar library and integrated it into the main project. My current issue is that I want to provide the option for users to "open in new tab/window" from the browser's context menu without having the ...
I am facing an issue involving nested tabs and tables in my example. Check out the example here After switching between parent tabs and child tabs, there seems to be an issue where the tabs do not render properly. It takes multiple attempts of switching ...
I developed a service that performs various http calls with different parameters. quote.service.ts getQuotes(){ let params = { "Type": "BasicDetail", } return this.http.post(this.url,params) .map(res => res.json()) } getOptio ...
I am in the process of creating a build script using only npm, without relying on grunt or gulp. Most aspects are functioning well except for concatenating typescript files. While I can compile individual typescript files successfully, I am faced with th ...
My challenge involves displaying an array of images using a *ngFor loop. itemimg.component.html <div *ngFor="let itemimg of itemimgs" [class.selected]="itemimg === selectedItemimg" (click)="onSelect(itemimg)"> <img id="{{itemim ...
What causes func1 to behave as expected while func2 results in an error? type AnyObj = Record<string, any>; type Data = { a: number; b: string }; type DataFunction = (arg: AnyObj) => any; const func1: DataFunction = () => {}; const arg1: Data ...
One of the main classes in my codebase is the ParentComponent export class ParentComponent extends React.Component<IParentComponentProps, any> { constructor(props: IParentComponent Props) { super(props); this.state = { shouldResetFoc ...
Can a JavaScript File Object be passed from a browser to AWS Lambda via API Gateway (ultimately to S3)? I am working with TypeScript and React. Environment Frontend TypeScript React AWS Amplify (for API module) Backend(AWS Lambda) Node.js Expecta ...
I have a pre-existing database that I'm trying to retrieve data from. However, whenever I run a test query, it always returns an empty value: { "users": [] } What could be causing this issue? entity: import {Entity, PrimaryGeneratedColumn, Col ...
I've included this link in my styles.scss @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); While it works locally, the API fails on production or is blocked. How can I host it within my p ...
I am facing an issue with an npm package (@salesforce/canvas-js-sdk) as it doesn't come with a Typescript definition file. Since I am using React, I have been using the "import from" syntax to bring in dependencies. Visual Studio is not happy about th ...
Upon cloning an express TypeScript project, I encountered a Typescript error within a Mongo related function as mentioned in the title. Property 'fullDocument' does not exist on type 'ChangeStreamDocument<IUser>'. Property &apos ...
Below is a TypeScript code snippet. The function isDataAvailable will return true if the variable data is not undefined. However, an error occurs in the updateData function when trying to access data.i++: 'data' is possibly 'undefined'. ...
During the development of my project using Vite, Vue 3, and TypeScript, I have set up vue-tsc to run in watch mode. I am utilizing VS Code along with Volar. This setup has been helpful as it displays all TypeScript errors in the console as expected, but I ...
I'm currently working on a project using Angular 2 and I need to display a partial inside a template without having to create a new component. Is this doable? import {Component} from 'angular2/core'; import {RouteConfig, ROUTER_DIRECTIVES} ...
I'm attempting to access http://localhost:4200/Personnes/view/:2, but I encountered the following error (ERROR TypeError: Cannot read property 'nom' of undefined) "My personnnes.service.component.ts" `export class PersonnesService { baseUr ...
Trying to convert a UTC date and time to local time ("Europe/Paris") using moment's timezone function, but encountering issues. The code I am using is: var m = moment.tz(this.startTime, 'Europe/Paris'); this.startTime = m.format("YYYY-MM-DD ...
I am currently working on creating a sorting function and pipe for a table. I found guidance on how to do this by following a tutorial at this link, and here is the plunker example. In the example, the table header should be clickable to trigger the sort() ...