as the summary mentions, i want to push a new array(Category) into another array(categoryLists)
in an exercise using vue 3 composition api, though i found something that works, i wish to try out using composables into my code
this is the declaration
const categoryLists = ref([{
id: Date.now(),
label: 'Default',
}]);
found this to be working
function addNewCategory() {
if (newCategoryName.value === '') {
console.log('no title, not added');
} else {
categoryLists.value.push({
id: Date.now(),
label: newCategoryName.value,
});
console.log(categoryLists.value);
newCategoryName.value = '';
}
}
but when i tried to use composables for this function, i instead get an error ts2345 saying that the below is un assignable to categoryLists
categoryLists.value.push(NewCategory(Date.now(), newCategoryName.value));
console.log(categoryLists);
newCategoryName.value = '';
below is the composable .ts file code
export default function NewCategory(
identifier: number,
value: string,
) {
// const Category = [identifier, value];
const Category = ref([{
id: identifier,
label: value,
}]);
console.log(Category);
return Category;
}
originally, my values are using refs, so i tried to change them to reactives but i still face the same issue
also tried not having Category as a ref
const Category = [identifier, value];
but this still shows the same issue
Argument of type 'Ref<{ id: number; label: string; }[]>' is not assignable to parameter of type '{ id: number; label: string; }'.
Type 'Ref<{ id: number; label: string; }[]>' is missing the following properties from type '{ id: number; label: string; }': id, label
can anyone show a solution or possibly explain why this isnt working
Related
I am doing a simple command to list all the items in my table. However, the data I am getting back is not structured the way I want. I want a simple JSON structure but DynamoDB is turning the results into nested objects.
DynamoDB gives me below response:
// What I am currently getting
[
{
id: { S: '8' },
lastName: { S: 'Perry' },
firstName: { S: 'Matthew' }
},
{
id: { S: '3' },
firstName: { S: 'Joan' },
lastName: { S: 'Peter' }
}
]
But I want this:
// What I want
[
{
id: 8
lastName: 'Perry' ,
firstName: 'Matthew'
},
{
id: 3,
firstName: 'Joan' ,
lastName: 'Peter'
}
]
How can I achieve the later result set. Below is my code:
const { ExecuteStatementCommand } = require('#aws-sdk/client-dynamodb')
const { ddbDocClient, memberTableName } = require('./client.js')
const selectAll = async () => {
const params = {
Statement: `SELECT * FROM ${memberTableName}`,
Parameters: [{ S: '3' }]
}
console.log(params)
return await ddbDocClient.send(new ExecuteStatementCommand(params));
}
selectAll()
.then(d => console.log(d.Items))
ddbDocClient was created like this:
const ddbDocClient = DynamoDBDocumentClient.from(ddbClient);
The command import is incorrect. To send and receive native JS types, import the ExecuteStatementCommand command from the #aws-sdk/lib-dynamodb "document client" package.
const { ExecuteStatementCommand } = require('#aws-sdk/lib-dynamodb');
You are importing the command from the "regular client" package #aws-sdk/client-dynamodb, i.e. the one that accepts and returns DynamoDB JSON.
Note: The Parameters: [{ S: '3' }] line is also wrong, but it's currently not causing trouble because your statement is scanning for all records. If you were to include a WHERE id=? phrase in the statement, make sure to change the parameters to Parameters: ['3']. You must pass JS types to the "document client" commands.
You need use simple lib https://www.npmjs.com/package/#aws-sdk/util-dynamodb
then use like this:
const { DynamoDB } = require("#aws-sdk/client-dynamodb");
const { marshall, unmarshall } = require("#aws-sdk/util-dynamodb");
const client = new DynamoDB(clientParams);
const params = {
TableName: "Table",
Key: marshall({
HashKey: "hashKey",
}),
};
const { Item } = await client.getItem(params);
unmarshall(Item);
How i can write generic function, which take Array of Objects (any type of Object, possible even null and undefined), and filter it to return just valid items of array? If i write it lite this, i will lose genericity :/
// #flow
// Types
type Person = {
id: string,
name: string,
};
type Car = {
id: string,
color: string,
};
// Function definition
const isNotUndefinedOrNull = item => !(item === null || item === undefined);
export const trimList = (list: Array<any> | $ReadOnlyArray<any>): Array<any> => {
return list.filter(isNotUndefinedOrNull);
};
// Constants
const persons = [{ id: 'p1', name: 'Johny' }, null, undefined];
const cars = [{ id: 'c1', color: 'red' }, null, undefined];
// Calls
const trimmedPersons = trimList(persons);
const trimmedCars = trimList(cars);
PROBLEM is, there i have trimmed cars and persons, but flow doesnt know, there is Cars in the trimmedCars list and neither know there is Persons in trimmedPersons list. Flow see just Array and i dont know, how to write is right, to not lose this info.
Flow try
As flow has a bug with Refine array types using filter we use explicit type casting ((res): any): T[]).
function filterNullable<T>(items: (?T)[]): T[] {
const res = items.filter(item => !(item === null || item === undefined);
return ((res): any): T[]);
}
// Example
const a: number[] = filterNullable([1, 2, null, undefined]);
i found it :)
export function trimList<V>(list: Array<?V> | $ReadOnlyArray<?V>): Array<V> {
return R.filter(isNotUndefinedOrNull, list);
}
I'm struggling with flowtype declaration for a generic function with different pairs of parameters.
My goal is to have a function which return an object of certain union type depending on input parameters.
I'm having a big load of messages that i want to type (for this example i'm using only two)
type Message1 = {
event: 'UI',
type: 'receive',
payload: boolean
}
type Message2 ={
event: 'UI',
type: 'send',
payload: {
foo: boolean;
bar: string;
}
}
type MessageFactory<T> = (type: $PropertyType<T, 'type'>, payload: $PropertyType<T, 'payload'>) => T;
export const factory: MessageFactory<Message1> = (type, payload) => {
return {
event: 'UI',
type,
payload
}
}
factory('receive', true);
// factory('send', { foo: true, bar: "bar" });
when i change
MessageFactory<Message1>
to
MessageFactory<Message1 | Message2>
it will throw an error
Could not decide which case to select. Since case 1 [1] may work but if it doesn't case 2 [2] looks promising too. To fix add a type annotation to `payload` [3] or to `type` [4]
You can ty it here
any idea how to declare this function?
or is it stupid idea and i'm going to the wrong direction?
any better solutions?
Create a GenericMessage with type parameters for your desired properties (type and payload), then have your factory return a GenericMessage:
(Try)
type GenericMessage<TYPE: string, PAYLOAD> = {
event: 'UI',
type: TYPE,
payload: PAYLOAD
}
const factory = <T: string, P>(type: T, payload: P): GenericMessage<T, P> => {
return {
event: 'UI',
type,
payload
}
}
const test1 = factory('receive', true);
const test2 = factory('send', { foo: true, bar: "bar" });
// Let's check the new type against Message1 and Message2:
type Message1 = {
event: 'UI',
type: 'receive',
payload: boolean
}
type Message2 ={
event: 'UI',
type: 'send',
payload: {
foo: boolean;
bar: string;
}
}
// Type assertions
(test1: Message1);
(test2: Message2);
(test1: Message2); // Error!
If you want, you can create a MessageFactory type that returns a GenericMessage<T, P>. You can also create an EVENT type parameter if you need to control the event property on the object.
(You don't need to call it GenericMessage, I just called it that to make a distinction between your existing types and this new one)
I have a Redux reducer for preferences and I am using Flow Type Checker. My reducer can take two types of actions. One for loading in all of the preferences which happens at initial app load. The second action type happens when the user updates a specific preference. Here is the code for my reducer. Where I run into problems is when I try to do action.prefs.forEach at which point flow throws an error saying ...'prefs': Property not found in 'object type'
// #flow
import {
UPDATE_PREF,
LOAD_PREFS_SUCCESS
} from '../actions/prefs';
export type actionType = {
+type: string,
prefs: Array<{_id: string, value: any}>
} | {
+type: string,
id: string,
value: any
};
export default (state: stateType = {}, action: actionType) => {
switch (action.type) {
case LOAD_PREFS_SUCCESS: {
const newState = {};
action.prefs.forEach(p => {
newState[p._id] = p.value;
});
return newState;
}
case UPDATE_PREF: {
return { ...state, [action.id]: action.value };
}
default:
return state;
}
};
As you can see I have two types of actions. When loading all of the preferences, the action has an array of preferences. [ { _id: 'color', value: 'blue' } ] And when updating a single preference, I get an id and a value. So give my two action types that have different properties, how do I get flow to not throw errors about this variation in action flow types?
In order to tell Flow which type to choose in the disjoint union, +type must be a value instead of string. Change your actionType to use values:
// #flow
import {
UPDATE_PREF,
LOAD_PREFS_SUCCESS
} from '../actions/prefs';
export type actionType = {
+type: LOAD_PREFS_SUCCESS, // not just `string`
prefs: Array<{_id: string, value: any}>
} | {
+type: UPDATE_PREF, // not just `string`
id: string,
value: any
};
Thanks to some guidance from #ross-allen and some playing around on flow.org I have found a working solution.
The short of it is that in addition to Ross' answer of adding +type: UPDATE_PREF, I also needed add typeof. So the working actionType is:
export type actionType = {
+type: typeof LOAD_PREFS_SUCCESS,
prefs: Array<{_id: string, value: any}>
} | {
+type: typeof UPDATE_PREF,
id: string,
value: any
};
Thanks again #ross-allen.
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.