i was trying to add custom words to the lezer parser in order to highlight but could not find any solution anywhere. For testing purposes i wanted to add the keyword "abc".
This is only the part where i want to add the "abc" keyword, here is the problem but do not know how to fix it.
import {tags} from "#lezer/highlight"`
import {HighlightStyle} from "#codemirror/language"
import {syntaxHighlighting} from "#codemirror/language"
const myHighlightStyle = HighlightStyle.define([
{tag: tags.keyword, color: "#fc6"},
{tag: tags.comment, color: "#f5d"},
{tag: "abc", color: "#ffffff"},
]);
At line {tag: "abc", color: "#ffffff"}, i get this:
(property) TagStyle.tag: Tag | readonly Tag[]
The tag or tags to target.
(property) TagStyle.tag: Tag | readonly Tag[]
The tag or tags to target.
Type 'string' is not assignable to type 'Tag | readonly Tag[]'.Vetur(2322)
Type 'string' is not assignable to type 'Tag | readonly Tag[]'.ts(2322)
index.d.ts(837, 5): The expected type comes from property 'tag' which is declared here on type 'TagStyle'
Related
Let's say a service has a Subject, whose value you want to dynamically set from a component.
A.service.ts:
//ChartTools: zoom?: boolean, pan?: boolean
public ChartConfig$: BehaviorSubject<ChartTools> = new BehaviorSubject(this.defaultValues);
public changeChartConfig(config: ChartTools):void{
const currentValues = this.ptChartToolsConfig$.value;
this.ptChartToolsConfig$.next({
...currentValues,
pan: config.pan,
zoom: config.zoom
})
}
Now in component A,we want to set this subject dynamically through a function:
A.component.html:
<mat-checkbox
value="zoom"
[checked]= "ToolsConfig$.zoom"
(change) = changeChartConfig($event.value, $event.source._checked)
>
A.component.ts
ngOnInit():void{
private ToolsConfig$ = this.A_Service.ChartConfig$.subscribe();
}
//cTask['constant']= "zoom" | "pan"
changeChartConfig(component: cTask['constant'], checked: boolean):void{
this.A_Service.changeChartConfig({
component : checked
})
}
But, the input 'component' in changeChartConfig() is not even used and I get the error:
Argument of type '{ component: boolean; }' is not assignable to parameter of type 'ChartTools'.
Object literal may only specify known properties, and 'component' does not exist in type 'ChartTools'.
I understand It's saying 'component' doesn't exist in interface ChartTools, but the values of component exist in ChartTools, and I want to use them.
Can someone please help me with what can be done to resolve this?
You have a typescript issue here.
What your error is saying is that you are expecting params to be ChartTools, but you are sending in something that looks different. Check your interface to make sure everything fits in properly. Also if in interface you are lacking component property add it. If everything is fine reset your VScode
So lets say your ChartTools interface looks like this:
interface ChartTools {
property1: string;
property2: number;
component: boolean;
}
The error prevents you to send in a value that lacks property1 and property2, because it is not a ChartTool.
How to fix it:
either make property1 and property2 opitonal:
interface ChartTools {
property1?: string;
property2?: number;
component: boolean;
}
use TS Partials, or add the missing params to you component when you are sending data:
changeChartConfig(component: cTask['constant'], checked: boolean):void{
this.A_Service.changeChartConfig({
component : checked
missingProp1: 'Some value'
missingProp2: 'Another value'
})
}
EDIT
If you are trying to achieve dynamic property name do it this way:
this.A_Service.changeChartConfig({
[component] : checked
// [component] will be parsed instead of being sent in as a string
})
I'm trying to execute the test script found here https://www.npmjs.com/package/#applitools/eyes-testcafe
But am receiving an error on typescript transpile.
The script runs succesfully if saved as a .js.
test/specs/applitoolsExample.ts:10:19 - error TS2345: Argument of type '{ appName: string; testName: string; browser: { width: number; height: number; name: "firefox"; }[]; t: TestController; }' is not assignable to parameter of type 'OpenOptions'.
Property 'accessibilityValidation' is missing in type '{ appName: string; testName: string; browser: { width: number; height: number; name: "firefox"; }[]; t: TestController; }' but required in type 'OpenOptions'.
10 await eyes.open({
~
11 appName: "Hello World!",
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
14 t,
~~~~~~
15 });
~~~
node_modules/#applitools/eyes-testcafe/ts/eyes.ts:8:9
8 accessibilityValidation: AccessibilitySettings
~~~~~~~~~~~~~~~~~~~~~~~
'accessibilityValidation' is declared here.
Found 1 error.
I am new to js, ts and testcafe so please assume nothing. Can anyone advise how to make Applitools work in testcafe, with typescript?
It looks like the TypeScript definitions shipped with #applitools/eyes-testcafe module are incorrect.
Change the test/specs/applitoolsExample.ts file extension to .js or write an issue about this problem in the applitools/eyes-testcafe repository.
Also, you can find a lot of examples here.
The issue is now solved on #applitools/eyes-testcafe version 1.14.3
I wanted to implement mat select box or just html select box with live search functionality and found mat-select-search project implemented in https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example?file=src%2Fapp%2Fapp.component.html.
It is working perfectly fine but it requires a lot of configuration and in my project I have more than 5 mat-selects with pretty large data set, then found "ngx-select-dropdown" it has minimum configuration but I couldn't configure it for typscript objects, it is working with single type string array.
Here is code
export class AppComponent {
public items: string[] = ['Amsterdam', 'Antwerp', 'Athens','Barcelona',
'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest',
'Zagreb', 'Zaragoza', 'Łódź'];
public ngxControl = new FormControl();
public inputTyped = (source: string, text: string) =>
console.log('SingleDemoComponent.inputTyped', source, text);}
html
<ngx-select [formControl]="ngxControl"
[allowClear]="true"
[defaultValue]="doNgxDefault()"
[items]="items"
placeholder="No city selected"
(typed)="inputTyped('ngx-select', $event)"
</ngx-select>
However I wanted to implement it with this type of items
interface Bank {
bank_id: number;
name: string;
code: string;
ord: number;}
private items: Bank[] = [
{bank_id: 1, name: 'Bank A (Switzerland)', code: 'ARM', ord:10},
{bank_id: 2, name: 'Bank B (Switzerland)', code: 'ARM', ord:11},
{bank_id: 3, name: 'Bank C (Switzerland)', code: 'HIO', ord:12},
{bank_id: 4, name: 'Bank D (Switzerland)', code: 'ARM', ord:13},
{bank_id: 5, name: 'Bank E (Switzerland)', code: 'ARM', ord:14},];
Is it possible use typscript objects with ngx-select for items, because I need to populate the names of each object and get the id's as value property to integrate with database. I am sure that it is possible extracting the names with loop and searching matching options with names but it is not best practice I think.
Updated Answer
Since items:[] gets array of objects property names of items should be exactly as documentation of ngx-select
interface Bank {
id: string;
text: string;
}
Yes its possible. you need see API document https://optimistex.github.io/ngx-select-ex/
optionValueField string 'id' Provide an opportunity to change the name an id property of objects in the items
optionTextField string 'text' Provide an opportunity to change the name a text property of objects in the items
<ngx-select [formControl]="ngxControl"
[allowClear]="true"
[defaultValue]="doNgxDefault()"
[items]="items"
[optionValueField]="bank_id"
[optionTextField]="name"
placeholder="No city selected"
(typed)="inputTyped('ngx-select', $event)"
</ngx-select>
<ngx-select
[(ngModel)]="Value Which You Selected"
[allowClear]="true"
[items]="Bank"
optionTextField="bank_id"
placeholder="Type your Value Here">
<ng-template ngx-select-option ngx-select-option-selected let-option let-text="text">
<span class="color-box" [style]="option.value"></span>
<span [innerHtml]="text" style="color: black"></span>
/ {{option.data.name}} / {{option.data.code}} / {{option.data.ord}}
</ng-template>
</ngx-select>
Assign your Full array in [Items]="" and use the another key values in ngx Template
{{option.data.name}}
{{option.data.code}}
{{option.data.ord}}
If you want to stay with angular material, you can also create your custom wrapper component to avoid boilerplate code, see e.g. Angular ngx-mat-select-search Custom Component.
The wrapper component behaves like a form control and you can adjust it to your needs.
With this code (a branch of a GitHub repository) running "make" on x86-64 Linux gives me these errors:
shlomif#telaviv1:~/Download/unpack/to-del/TypeScript-flot$ make
tsc --outFile foo.js foo.ts
foo.ts(18,12): error TS2345: Argument of type 'string' is not assignable to parameter of type 'JQuery'.
foo.ts(47,39): error TS2345: Argument of type '(event: JQueryEventObject, pos: any, item: any) => void' is not assignable to parameter of type 'boolean'.
foo.ts(68,39): error TS2345: Argument of type '(event: JQueryEventObject, pos: any, item: any) => void' is not assignable to parameter of type 'boolean'.
foo.ts(71,5): error TS2304: Cannot find name 'plot'.
foo.ts(74,40): error TS2339: Property 'version' does not exist on type '{ (placeholder: JQuery, data: dataSeries[], options?: plotOptions): plot; (placeholder: JQuery, d...'.
Makefile:6: recipe for target 'foo.js' failed
make: *** [foo.js] Error 2
The TypeScript code in question is:
```
$.plot("#placeholder", [ // line 18
{ data: series[0], label: "old-time(iters)", },
{ data: series[1], label: "new-time(iters)", },
],
{
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
}
);
```
I'm using TypeScript's tsc compiler along with the jquery definitions from https://github.com/DefinitelyTyped/DefinitelyTyped and a locally modified version of the jQuery Flot definitions (which fixes some other errors reported by the tsc compiler).
How can I fix these errors?
The error states it can't assign a string type to a jQuery type on the 18th line:
$.plot("#placeholder", [
Changing line 18 to a jQuery object should fix it:
$.plot($("#placeholder"), [
I'm trying to migrate an existing codebase to use Flow. Since this project started without Flow, I'm using a pretty typical JS pattern for enums and such.
Here are a few definitions I want to
export const LOAN_STATUS = {
PENDING: 'pending',
CURRENT: 'current',
DUE: 'due',
OVERDUE: 'overdue',
PENDING_PAYMENT: 'pending_payment',
CHARGED_OFF: 'charged_off',
VOIDED: 'voided',
DISPUTED: 'disputed',
REFUNDED: 'refunded',
SETTLED: 'settled',
}
export const ACTIVE_LOAN_STATUS = [
LOAN_STATUS.OVERDUE,
LOAN_STATUS.CURRENT,
LOAN_STATUS.DUE,
LOAN_STATUS.PENDING_PAYMENT,
]
Flow works fine until I import this file and it says I need to add type annotations. This seems odd -- why should I have to annotate objects that are entirely static and easily inferred?
Is there any way that define its type as "static" or "literal"?
So then I go about thinking how I'm going to add annotations to this. My first thought is just {[key: string]: string} and Array<string>. Flow works, but I'm realizing that these type definitions are totally worthless. So then I try this other approach:
type LoanStatusValues =
'pending' |
'current' |
'due' |
'overdue' |
'pending_payment' |
'charged_off' |
'voided' |
'disputed' |
'refunded' |
'settled'
type LoanStatusKeys =
'PENDING' |
'CURRENT' |
'DUE' |
'OVERDUE' |
'PENDING_PAYMENT' |
'CHARGED_OFF' |
'VOIDED' |
'DISPUTED' |
'REFUNDED' |
'SETTLED'
type ActiveLoanStatus =
"current" |
"due" |
"overdue" |
"pending_payment"
And I use the type annotations {[key: LoanStatusKeys]: LoanStatusValues} and Array<ActiveLoanStatus>. But even these annotations loose the fact that this is static!
It just seems so odd that I'm having to write this much duplicate code. And then if I want to convert just to Flow I can't actually use the types in JS. For example I might do this:
if (defs.ACTIVE_LOAN_STATUS.indexOf(loan.status) !== -1) {
}
Now if I want to use Flow types, I can't do anything like this:
type ActiveLoanStatus =
"current" |
"due" |
"overdue" |
"pending_payment"
if (loan.status isTypeOf ActiveLoanStatus) {
}
So how am I supposed to use these static enums? I must be doing this wrong!
To express an enum with flow you can use $Values utility in conjunction with frozen object type:
export const LOAN_STATUS = Object.freeze({
PENDING: 'pending',
CURRENT: 'current',
DUE: 'due',
OVERDUE: 'overdue',
PENDING_PAYMENT: 'pending_payment',
CHARGED_OFF: 'charged_off',
VOIDED: 'voided',
DISPUTED: 'disputed',
REFUNDED: 'refunded',
SETTLED: 'settled',
});
type LoanStatus = $Values<typeof LOAN_STATUS>;
export const ACTIVE_LOAN_STATUS: LoanStatus[] = [
LOAN_STATUS.OVERDUE,
LOAN_STATUS.CURRENT,
LOAN_STATUS.DUE,
LOAN_STATUS.PENDING_PAYMENT,
]
This works starting from 0.60.0 version.
Here is the most concise way to achieve this:
const activeLoanStatuses = {
current: 'current',
due: 'due',
overdue: 'overdue',
pending_payment: 'pending_payment'
};
const otherLoanStatuses = {
pending: 'pending',
charged_off: 'charged_off',
voided: 'voided',
disputed: 'disputed',
refunded: 'refunded',
settled: 'settled',
};
type ActiveLoanStatus = $Keys<typeof activeLoanStatuses>;
type LoanStatus = $Keys<typeof otherLoanStatuses> | ActiveLoanStatus;
const activeLoanStatusesMap: { [key: LoanStatus]: ?ActiveLoanStatus} = activeLoanStatuses;
if (activeLoanStatusesMap[loan.status]) {
}
While incredibly verbose, and non-scalable, this falls into Flow's "Disjoint Unions" case and such can be implemented using ===. As they mention on that page, Case Analysis is done via that operator, as javascript naturally does with switch-case statements.
In your case, that equates to:
switch(loan.status) {
'pending':
'current':
'due':
'overdue':
'pending_payment':
'charged_off':
'voided':
'disputed':
'refunded':
'settled':
// your behavior here
}
As I mentioned, this is highly verbose in code which uses your types, but to counter that, it has the benefit of defining your types without creating a boilerplate object- you simply define your literal options and union them together (your second implementation).
This has the obvious downside of coupling your type definition with your implementations of its consumers, so use with caution.