I want to ensure a list of exclusively <li/> will be passed to a component such that they will be displayed inside a <ul> element as rendered by the said component.
Here is my code:
const menuItems: HTMLLIElement[] = [
<li>Item 1</li>,
<li>Item 2</li>,
<li>Item 3</li>,
];
For each line of <li> inside the array, I get this error:
error TS2322: Type 'Element' is not assignable to type 'HTMLLIElement'.
I have tried an alternative way to create an array of li element
const menuItems = [
React.createElement(HTMLLIElement, {value: 'Item 1' }),
React.createElement(HTMLLIElement, {value: 'Item 2' }),
React.createElement(HTMLLIElement, {value: 'Item 3' }),
]
but it just gave a different error:
error TS2345: Argument of type '{ new (): HTMLLIElement; prototype: HTMLLIElement; }' is not assignable to parameter of type 'string | FunctionComponent<{ value: string; }> | ComponentClass<{ value: string; }, any>'.
Type '{ new (): HTMLLIElement; prototype: HTMLLIElement; }' is not assignable to type 'ComponentClass<{ value: string; }, any>'.
Type 'HTMLLIElement' is missing the following properties from type 'Component<{ value: string; }, any, any>': context, setState, forceUpdate, render, and 3 more.
How can I resolve this isse?
Related
I have been trying to deploy my typescript based node server to heroku but getting the following error while deployment
-----> Build
Running build
> autoscan-back-end#1.0.0 build
> rimraf dist && tsc
src/services/notification/notification.service.ts(46,37): error TS2322: Type 'string | ObjectId' is not assignable to type 'Condition<string>'.
Type 'ObjectId' is not assignable to type 'Condition<string>'.
src/services/report/report.service.ts(53,35): error TS2769: No overload matches this call.
Overload 1 of 3, '(callback?: Callback<ReportType[]>): Query<ReportType[], ReportType, {}, ReportType>', gave the following error.
Argument of type '{ _id?: string; admin: string | Types.ObjectId; status?: string; containsDublicates?: boolean; stickers?: [Types.ObjectId]; }' is not assignable to parameter of type 'Callback<ReportType[]>'.
Type '{ _id?: string; admin: string | ObjectId; status?: string; containsDublicates?: boolean; stickers?: [ObjectId]; }' provides no match for the signature '(error: NativeError, result: ReportType[]): void'.
Overload 2 of 3, '(filter: FilterQuery<ReportType>, callback?: Callback<ReportType[]>): Query<ReportType[], ReportType, {}, ReportType>', gave the following error.
Argument of type '{ _id?: string; admin: string | Types.ObjectId; status?: string; containsDublicates?: boolean; stickers?: [Types.ObjectId]; }' is not assignable to parameter of type 'FilterQuery<ReportType>'.
Type '{ _id?: string; admin: string | Types.ObjectId; status?: string; containsDublicates?: boolean; stickers?: [Types.ObjectId]; }' is not assignable to type '{ _id?: any; admin?: Condition<string>; status?: Condition<string>; containsDublicates?: Condition<boolean>; stickers?: Condition<[ObjectId]>; ... 55 more ...; validateSync?: Condition<...>; }'.
Types of property 'admin' are incompatible.
Type 'string | ObjectId' is not assignable to type 'Condition<string>'.
Type 'ObjectId' is not assignable to type 'Condition<string>'.
Overload 3 of 3, '(filter: FilterQuery<ReportType>, projection?: any, options?: QueryOptions, callback?: Callback<ReportType[]>): Query<...>', gave the following error.
Argument of type '{ _id?: string; admin: string | Types.ObjectId; status?: string; containsDublicates?: boolean; stickers?: [Types.ObjectId]; }' is not assignable to parameter of type 'FilterQuery<ReportType>'.
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
the project is running smoothly without any error locally, getting this on heroku only
Actually ts was checking the query response from mongodb, which was ignored in other functions but not these.
So I just added //#ts-ignore before the line 53 and 46 to ingore just like other query functions
I use:
- "vue": "3.2.26",
- "vee-validate": "4.5.6",
- "typescript": "4.5.4"
While creating a textarea field on vue3 I ran into a problem
i have
example with vee-validate
import { Field, useForm } from 'vee-validate'
<Field v-slot="{ field, errors }" name="name" type="text">
<VControl icon="feather:edit-2" :has-error="Boolean(formErrors.name)">
<input
v-bind="field"
class="input is-primary-focus"
type="text"
placeholder="Placeholder"
autocomplete="name"
/>
<p v-if="errors" class="help is-danger">{{ formErrors.name}}</p>
</VControl>
</Field>
simple example
<textarea
v-model="fieldValues.description"
class="textarea is-success-focus"
rows="3"
placeholder="Description"
></textarea>
for model
export interface iCat {
id: number
name: string
description: string | null
}
but textarea return error
Type 'null' is not assignable to type 'string | number | string[] | undefined'.
for vee-validate
const {
values: fieldValues,
errors: formErrors,
handleSubmit,
} = useForm({
initialValues: {
id: 0,
name: '',
description: ''
},
validationSchema: object({
id: number().required().integer(),
name: string().required(),
description: string().notRequired().default(null).nullable()
}),
})
if check #vue/runtime-dom/dist/runtime-dom.d.ts
export interface TextareaHTMLAttributes extends HTMLAttributes {
....
value?: string | string[] | number
...
}
If I look in node-moduls, I see that the textarea does not accept null as a value - how can I properly solve this problem then?
Unfortunately, you can't change the existing type of value for TextareaHTMLAttributes (at least not in TypeScript 4.5.5). Type augmentation only allows extension (adding properties to the type, or creating a new type that extends the original TextareaHTMLAttributes interface with a new type for value).
A workaround is to use a new type that extends iCat, changing its description type to the expected type of TextareaHTMLAttributes's value:
Declare a new type (named "iFieldValues"), using Omit to exclude the original description property from iCat, and an intersection with a new description property that has a type of TextareaHTMLAttributes['value'].
Use type assertion (as iFieldValues) on the values returned from useForm().
// MyForm.vue
<script setup lang="ts">
import { toRefs } from 'vue'
import type { TextareaHTMLAttributes } from '#vue/runtime-dom'
import { useForm } from 'vee-validate'
import { object, number, string } from 'yup'
export interface iCat {
id: number
name: string
description: string | null
}
1️⃣
type iFieldValues = Omit<iCat, 'description'> & {
description: TextareaHTMLAttributes['value']
}
const {
values,
errors: formErrors,
handleSubmit,
} = useForm({
initialValues: {
id: 0,
name: '',
description: ''
},
validationSchema: object({
id: number().required().integer(),
name: string().required(),
description: string().notRequired().default(null).nullable()
}),
})
2️⃣
const fieldValues = values as iFieldValues
</script>
i am trying to use Nipplejs in my Vue Project with quasar Components.
I installed nipplejs by npm install nipplejs --save.
I tried to integrate the nipple with the following code:
<template>
<div id="joystick_zone"></div>
</template>
<script lang= "ts">
// Imports
import Vue from "vue";
import nipplejs from 'nipplejs';
export default Vue.extend({
async mounted(): Promise<void> {
var options = {
zone: document.getElementById('joystick_zone') as HTMLElement,
mode: 'static',
color: `'blue'`,
}
var manager = nipplejs.create(options);
}
});
My first problem is that typescript doesnt accept 'static' as mode:
The definition says: mode?: 'dynamic' | 'semi' | 'static';
And i get the following error message:
Argument of type '{ zone: HTMLElement; mode: string; color: string; }' is not assignable to parameter of type 'JoystickManagerOptions'.
Types of property 'mode' are incompatible.
Type 'string' is not assignable to type '"dynamic" | "semi" | "static" | undefined'.
My second problem is that the joystick does not appear on the website.
If someone could help i would be very thankful.
If you would look into the definition of options variable you created. You would see it is of type { zone: HTMLElement; mode: string; color: string; }.
You must assign a type to the options variable.
var options: JoystickManagerOptions = {
zone: document.getElementById('joystick_zone') as HTMLElement,
mode: 'static',
color: 'blue',
};
Other option is to define the variable as const:
var options = {
zone: document.getElementById('joystick_zone') as HTMLElement,
mode: 'static',
color: 'blue',
} as const;
// Variable is now of type
type options = {
zone: HTMLElementHTMLElement;
mode: 'static';
color: 'blue';
}
There is this tutorial on the main page: https://ant.design/docs/react/use-in-typescript it shows some example code that does not compile. In particular, <Button type="primary">Button</Button> does not compile because it should be htmlType and not type. Can somebody please confirm that this is true? Or is it just a problem with my installation?
Another problem I have noticed is that props for Button have bad type declaration. At least on my computer. I just installed antd, and I have this NativeButtonProps, which has htmlType?: ButtonHTMLType, and that is declared as: export declare type ButtonHTMLType = 'submit' | 'button' | 'reset';
This is very confusing because the documentation says that there are types called "primary" "dashed" and "danger". Is this also a problem with the declaration?
Is it possible that I have a broken installation but I doubt. I have tried to install everything from scratch on a computer that had no node.js installed. But the result is the same. What am I doing wrong?
UPDATE more details on the problem. If I use this code:
<Button type="primary">Buttonka</Button>
Then I get this compilation error and it won't generate js code:
C:/TypeScript/antd-demo-ts/src/App.tsx
(10,10): Type '{ children: string; type: "primary"; }' is not assignable to type '(IntrinsicAttributes & IntrinsicClassAttributes & Pick & Readonly & Pick, "htmlType">, "color" | ... 258 more ... | "htmlType"> & Partial<...> & Partial<...>) | ...'.
Type '{ children: string; type: "primary"; }' is not assignable to type 'Pick & Readonly & Pick, "htmlType">, "color" | ... 262 more ... | "value">'.
Property 'htmlType' is missing in type '{ children: string; type: "primary"; }'.
If I use htmlType="primary" instead, then I get the following warning:
{
"resource": "/c:/TypeScript/antd-demo-ts/src/App.tsx",
"owner": "typescript",
"code": "2322",
"severity": 8,
"message": "Type '{ children: string; htmlType: \"primary\"; }' is not assignable to type '(IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & R...'.\n Type '{ children: string; htmlType: \"primary\"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Re...'.\n Type '{ children: string; htmlType: \"primary\"; }' is not assignable to type 'Readonly'.\n Types of property 'htmlType' are incompatible.\n Type '\"primary\"' is not assignable to type '\"submit\" | \"button\" | \"reset\" | undefined'.",
"source": "ts",
"startLineNumber": 10,
"startColumn": 10,
"endLineNumber": 10,
"endColumn": 16
}
and in this case the TypeScript code is compiled, but the button is shown as opaque/white, and it is not primary/blue.
It is a fact that the css has been imported into App.tsx:
import './App.css';
and also the ant design css has been imported in App.css:
#import '~antd/dist/antd.css';
But either way, I can't set the primary (blue) style on the button.
I'm trying to use consumerGroup instead of HighLevelConsumer in a typescript project, but I'm not able to configure consumerOptions for consumerGroup.
I am getting the following error when I assign
1) fromOffset: 'earliest'
Argument of type '{ autoCommit: boolean; fetchMaxBytes: number;
fetchMaxWaitMs: number; fromOffset: string; groupId...' is not
assignable to parameter of type 'ConsumerGroupOptions'. Types of
property 'fromOffset' are incompatible. Type 'string' is not
assignable to type '"earliest" | "latest" | "none"'.
2) protocol: ['roundrobin']
Argument of type '{ autoCommit: boolean; fetchMaxBytes: number;
fetchMaxWaitMs: number; protocol: string[]; groupId...' is not
assignable to parameter of type 'ConsumerGroupOptions'. Types of
property 'protocol' are incompatible. Type 'string[]' is not
assignable to type '("roundrobin" | "range" |
CustomPartitionAssignmentProtocol)[]'. Type 'string' is not assignable
to type '"roundrobin" | "range" | CustomPartitionAssignmentProtocol'.
3) outOfRangeOffset: 'earliest'
Argument of type '{ autoCommit: boolean; fetchMaxBytes: number;
fetchMaxWaitMs: number; outOfRangeOffset: string; g...' is not
assignable to parameter of type 'ConsumerGroupOptions'. Types of
property 'outOfRangeOffset' are incompatible. Type 'string' is not
assignable to type '"earliest" | "latest" | "none"'.
Environment details:
Node version: v8.11.1
Kafka-node version: v2.6.1
types/kafka-node: v2.0.6
Can anyone help me understand where I am going wrong? Thanks in advance.