I am using relay-compiler for compile my relay GraphQL queries.
I am also using flow for type checking.
My IDE does not understand flow comment style type checking. so I want to uncomment them.
I need a regex to find these comments and uncomments theme.
Here is one of my fragments:
/**
* #flow
*/
/* eslint-disable */
'use strict';
/*::
import type { ReaderFragment } from 'relay-runtime';
import type { FragmentReference } from "relay-runtime";
declare export opaque type RegionHeaderRelay_data$ref: FragmentReference;
declare export opaque type RegionHeaderRelay_data$fragmentType: RegionHeaderRelay_data$ref;
export type RegionHeaderRelay_data = {|
+title: string,
+cover: $ReadOnlyArray<?{|
+url: string,
+photographer: string,
|}>,
+categoryVideoCount: number,
+categoryVideoUrl: string,
+$refType: RegionHeaderRelay_data$ref,
|};
export type RegionHeaderRelay_data$data = RegionHeaderRelay_data;
export type RegionHeaderRelay_data$key = {
+$data?: RegionHeaderRelay_data$data,
+$fragmentRefs: RegionHeaderRelay_data$ref,
};
*/
...
I want to convert the above code to this:
/**
* #flow
*/
/* eslint-disable */
'use strict';
import type { ReaderFragment } from 'relay-runtime';
import type { FragmentReference } from "relay-runtime";
declare export opaque type RegionHeaderRelay_data$ref: FragmentReference;
declare export opaque type RegionHeaderRelay_data$fragmentType: RegionHeaderRelay_data$ref;
export type RegionHeaderRelay_data = {|
+title: string,
+cover: $ReadOnlyArray<?{|
+url: string,
+photographer: string,
|}>,
+categoryVideoCount: number,
+categoryVideoUrl: string,
+$refType: RegionHeaderRelay_data$ref,
|};
export type RegionHeaderRelay_data$data = RegionHeaderRelay_data;
export type RegionHeaderRelay_data$key = {
+$data?: RegionHeaderRelay_data$data,
+$fragmentRefs: RegionHeaderRelay_data$ref,
};
...
What regex should I use?
Here is the regex for finding that part of code
const regex = /\/\*\:\:([\s\S]*?)\*\//gm
And use $1 replacement to remove commenting part
code.replace(regex,`$1`);
Related
Why does this property in react CSS not work if it is of type CSSProperties? How can I get it to work with Properties<string | number> ?
export const fields: GridFieldsConfiguration[] = [
{
...defaultColDefs,
field: 'amInitials',
displayNameRule: 'Asset Manager',
flex: 1.1,
minWidth: 75,
cellStyle: (params: any): any => {
getCellStyle(params, 'amInactive')
}
}
];
const isDisabledbStyle = {
color: '#FF0000'
};
const getCellStyle = ((params: any, inactiveCol: string): CSSProperties => {
console.log(params);
if (params?.api?.getValue(inactiveCol, params.node) === true) {
return isDisabledbStyle;
} else {
return isDisabledbStyle;
}
}
);
Here are the types. cellStyle comes from CSSProperties which is an extension of CSS.Properties<string | number>.
export interface GridFieldConfiguration extends FieldConfiguration {
cellStyle?: CSSProperties;
}
export interface CSSProperties extends CSS.Properties<string | number> {
/**
* The index signature was removed to enable closed typing for style
* using CSSType. You're able to use type assertion or module augmentation
* to add properties or an index signature of your own.
*
* For examples and more information, visit:
* https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
*/
}
Here is Properties
export interface Properties<TLength = string | 0> extends StandardProperties<TLength>, VendorProperties<TLength>, ObsoleteProperties<TLength>, SvgProperties<TLength> {}
Sounds like you are using AG Grid, and trying to configure a cellStyleFunc for the cellStyle option of column definitions?
As shown in the linked documentation, it is indeed possible to provide a function that takes a params argument.
But it looks like in your case, you have an intermediate GridFieldsConfiguration custom type, that expects cellStyle to be of type Properties<string | number> (which is very probably actually React.CSSProperties), which does not accepts the function form, hence the error message.
If the rest of your code that handles GridFieldsConfiguration really expects CSSProperties and not the function form, then you would have to refactor it first, so that it can handle that form.
If all it does is to pass the cellStyle option to AG Grid, then you just need to improve the definition of GridFieldsConfiguration type. You can re-use the actual types grom AG Grid, e.g.:
import { AgGridColumnProps as ColDef } from "ag-grid-react";
export interface GridFieldsConfiguration {
cellStyle?: ColDef["cellStyle"];
}
But note that CSSProperties is actually not type-compatible with cellStyle. To fix it, simply remove the return type assertion on your getCellStyle function. If you want to ensure that the returned objects still resembles a CSS object, you can use the new satisfies operator:
const isDisabledbStyle = {
color: '#FF0000'
} satisfies CSSProperties;
const getCellStyle = (params: any, inactiveCol: string) => {
return isDisabledbStyle;
};
Playground Link
I have this piece of code:
/* #flow */
import { List } from 'immutable';
type NotMapped = {|
first: Array<number>,
second: number,
|};
type Mapped = {|
first: List<number>,
second: number,
|};
const notMapped: NotMapped = {
first: [1, 2, 3],
second: 10,
};
const map = () => {
const first = List(notMapped.first);
return { ...notMapped, first };
}
const result: Mapped = map();
I want result to beMapped type but I get:
{|
first: List<number> | Array<number>,
second: number
|}
How come that flow thinks it might be Array<number> when I explicitly set first as List(notMapped.first)? It only works if I set return { second: notMapped.second, first };, but this isn't a solution because I have large amount of data and I cannot set every item.
I have checked and this is well-known issue, but when spreading types, not object with assigned type. Is there any solution for this?
The Setup
Here's a complete try flow example illustrating the issue.
Types
export type ActionT<TT: string, PT> = {|
+type: TT,
+payload: PT,
+error?: boolean,
+meta?: any
|}
export type ChangePayloadT = {
+_change: {|
+state: 'PENDING' | 'FULFILLED' | 'REJECTED',
+id: string,
+error?: any,
+message?: string,
|}
}
export type IdPayloadT = {
id: string,
}
type PayloadT = IdPayloadT | ChangePayloadT
type MyActionT = ActionT<'SET' | 'MERGE', PayloadT>
As you can see, MyActionT can contain a payload with either an id or a _change object. It's not quite (?) a disjoint union because there isn't a single property to disambiguate on.
This seems like it should work, but doesn't:
function lookup3 (action: MyActionT): any {
if (action.payload._change) {
// why does this error?
return action.payload._change.id
} else {
return action.payload.id
}
}
Anyone care to set me straight as to why?
Ok, so the solution apparently involved making the the two types a proper disjoint union:
export type ChangePayloadT = {
+_change: {|
+state: $Keys<typeof asyncStates>,
+id: string,
+error?: any,
+message?: string,
|},
id?: string,
}
export type IdPayloadT = {
+_change?: void,
+id: string,
}
With the second type now having an explicitly void _change, flow knows to tell the types apart based on the presence or absence of a _change.
Working tryflow Yay. :)
I am trying to simulate map-like behaviour in TypeScript and also get code completion of possible values. I am limited to TypeScript 1.8.
catalog.ts
export declare type CATALOG = 'CATALOG1' | 'CATALOG2' | 'CATALOG3';
export const CATALOGS: { [catalog: string]: CATALOG } = {
CATALOG1: 'CATALOG1',
CATALOG2: 'CATALOG2',
CATALOG3: 'CATALOG3'
};
example.ts
import { CATALOGS } from './catalog';
class MyClass {
catalogs = CATALOGS;
constructor() {
CATALOGS.CATALOG1; // error
this.catalogs.CATALOG1; // error
}
}
This results in following error:
Property 'CATALOG1' does not exist on type { [catalog: string]:
"CATALOG1" | "CATALOG2" | "CATALOG3" }
Can someone elaborate?
What you're describing isn't a "map-like behaviour", with a map you'll do something like:
CATALOGS.get("CATALOG1");
And that's basically what you defined with: { [catalog: string]: CATALOG }.
You can access it like this:
let a = CATALOGS["CATALOG1"];
If you want to access it as you did, then it should be:
interface Catalogs {
CATALOG1: CATALOG;
CATALOG2: CATALOG;
CATALOG3: CATALOG;
}
export const CATALOGS: Catalogs = {
CATALOG1: 'CATALOG1',
CATALOG2: 'CATALOG2',
CATALOG3: 'CATALOG3'
};
let a = CATALOGS.CATALOG1;
(code in playground)
I am trying to create a higher order component, Hoc, that gives its children some extra props through React.cloneElement. I have not been able to get flowtype to know that the extra props were in fact passed down.
Below is my failed attempt, which throws the error foo type cannot be found on object literal. I would like to know what I can do to fix this.
type Props = {
foo: string,
bar: string,
};
type DefaultProps = {
foo: string,
};
declare class React2$Element<Config, DP> extends React$Element{
type: _ReactClass<DP, *, Config, *>;
}
declare function Hoc<Config, DP: DefaultProps, R: React$Element<Config>>(props: {children: R}) : React2$Element<Config, DP>
function TestComponent({foo, bar}: Props){
return <div>{bar}</div>;
}
function Hoc(props){
return React.cloneElement(props.children, {foo: 'form2wr'});
}
function Test(){
return <Hoc children={<TestComponent bar='yo' />}></Hoc>;
}
I don't have an answer to this question, but I do have a workaround.
type Props = {
foo: string,
bar: string,
};
type DefaultProps = {
foo: string,
};
type WithHOCProps<X> = $Diff<X, DefaultProps>
declare function TestComponent(props: WithHOCProps<Props>) : React$Element;
function TestComponent({foo, bar}: Props){
return <div>{foo + bar}</div>;
}
function Test(){
return <TestComponent bar='yo' />;
}
Tadahhh, no errors.