interface Object1{
id:number,
label:string
}
interface Object2{
id:number,
description:string
}
const transformArray:Object2[] = (input:Object1[])=>{
return input.map(item=>{
return {
id:item.id,
description:item.label
}
})
}
In this code typescript gives the error
Type '(input: Object1[]) => { id: number; description: string; }[]' is
missing the following properties from type 'Object2[]': pop, push,
concat, join, and 28 more.ts(2740) index.tsx(44, 34): Did you mean to
call this expression?
I'm trying to create a function that takes an array of Object1 and converts to array of Object2
This:
const transformArray:Object2[] = (input:Object1[])=>{
means that you are saying transformArray is of type Object2[]. And then you assigning a function to it. An array and a function are not compatible types, so you get a type error.
I think you meant to do this:
const transformArray = (input:Object1[]): Object2[] => {
Here you declare a function that accepts an array of Object1s and returns an array of Object2s. transformArray does not require an explicit type because the function your are assigning to it very strongly typed and Typescript can figure out the tight type from that.
Playground
Related
Background
I am building a react site with some reusable generic UI components. Our backend service will return some responses with the data conforming to an abstract type.
For example
interface TypeAServerResponse {
somefield: string,
otherfield: string,
}
interface TypeBServerResponse {
somefield: string,
}
type TypeServerResponseUnion = TypeAServerResponse | TypeBServerResponse;
Both of the server response types contain somefield, and we would like to display that in the reused UI component. So we union them and tell the component to expect TypeServerResponseUnion.
However, in some occasions, we would also want to use otherfield, so we need to tell TypeScript to we are discriminating the union type. Without changing the backend to return a string literal, we are extending the ServerResponse types to contain a type string literal.
interface TypeA extends TypeAServerResponse{
$type: 'a',
}
interface TypeB extends TypeBServerResponse{
$type: 'b',
}
type TypeUnion = TypeA | TypeB; //or
type TypeUnion = TypeServerResponseUnion extends {
$type: 'a'|'b',
}
Now we can check on $type field in our UI component to discriminate the union and get otherfield when possible.
The problem
We now have some method to fetch the data from the server that returns TypeServerResponseUnion, and we want to parse it to TypeUnion before providing it to the UI layer.
// could be ajax.get, could be axios
const serverGet = () : TypeServerResponseUnion => {
return {somefield: 'something'}
}
const parse = () : TypeUnion => {
const response : TypeServerResponseUnion = serverGet();
// do something here to add the $item field and return it
}
We have two use cases
We know which concrete type we are asking for, so we can just provide the $type to the function. This has some problems I don't know how to deal with.
We don't know which concrete type we are asking for, we only know we are asking for a same type as we already have, this is the part where I am struggling with.
So I have the parse function as such:
const get = (original: TypeUnion) => {
const response = serverGet();
const parsedResponse: TypeUnion = {...response, $type: original.$type}
return parsedResponse
}
It complains with error:
Type '{ $type: "a" | "b"; somefield: string; otherfield: string; } | { $type: "a" | "b"; somefield: string; }' is not assignable to type 'TypeUnion'.
Type '{ $type: "a" | "b"; somefield: string; }' is not assignable to type 'TypeUnion'.
Type '{ $type: "a" | "b"; somefield: string; }' is not assignable to type 'TypeB'.
Types of property '$type' are incompatible.
Type '"a" | "b"' is not assignable to type '"b"'.
Type '"a"' is not assignable to type '"b"'.(2322)
So I want to know what is the best way to do typing for those types to solve this use case we are facing.
Extension
I also want to discuss this related problem with typescript.
If I change the get function to the following:
const get = (original: TypeUnion) => {
const response = serverGet();
const parsedResponse: TypeUnion = {} as TypeUnion;
parsedResponse.$type = original.$type
return parsedResponse
The error goes away, but of course because we are doing wrong type casting so it is not safe.
The question is why can we assign original.$type to TypeUnion.$type, where previously
const parsedResponse: TypeUnion = {...response, $type: original.$type}
we are assigning original.$type to $type during construction time does not work.
Playground with code
The reason for the type error is because you do not know if original and response are of the same type. Since they are both unions one could be of type "A" and the other of type "B". This might be be the true in the real implementation but it's not true in terms of the types.
We know which concrete type we are asking for, so we can just provide the $type to the function. This has some problems I don't know how to deal with.
This sorta seems like an anti pattern to me. If you know what type is coming from the backend then serverGet should not return a union but have the return type TypeAServerResponse or TypeBServerResponse
We don't know which concrete type we are asking for, we only know we are asking for a same type as we already have, this is the part where I am struggling with.
For this it is probably best to write a helper parse function (as you already did) but have but parse based on the data and not a value that is passed in.
const getPraseValueFromSErver: ()=>TypeUnion= () => {
const res = serverGet();
if("otherfield" in res){
// we know we have type A since otherfield exsists in the data
return { $itemType: "a", ...res}
} else {
// we know we have type B
return { $itemType: "b", ...res}
}
}
See full playground here
There was a following task and I cannot understand in any way how to make it.
I have TypeScript type. It is an object with enumerated keys. I want to make a universal function for filtering an array, which consists of objects of this type.
In the function below, oldArray is the array of objects to filter, and keyOldArray is one of the keys of type TObject . I know that I need to use this function in two different places and that the two keys that will be used are name and description for example. How do I specify this for TypeScript? Thank you all in advance!
type TObject = {
id: string;
description: string;
name: string;
tob: string;
};
const arrayFilter = (oldArray: TObject[], keyOldArray: ???) => {
return oldArray.filter((item) => item.keyOldArray === somethingConst);
};
You can use typescript's keyof operator: https://www.typescriptlang.org/docs/handbook/2/keyof-types.html
It looks like you are trying to filter based on the index of keyOldArray, so you'll have to pull out index from the filter callback as well.
const arrayFilter = (oldArray: TObject[], keyOldArray: (keyof TObject)[]) => {
return oldArray.filter((item, index) => item[keyOldArray[index]] === somethingConst);
};
I have some objects containing DB documents that I constantly need to convert to arrays.
Example:
const MY_OBJECT = {
docId_1: {...doc1},
docId_2: {...doc2},
docId_3: {...doc3},
// AND SO ON
}
I need to convert it to an array like this:
const MY_ARRAY_FROM_OBJECT = [
{...doc1},
{...doc2},
{...doc3},
// AND SO ON...
]
And this is code I use to do the conversion:
function buildArrayFromObject(obj) {
const keys = Object.keys(obj);
const arr = [];
for (const key of keys) {
arr.push(obj[key]);
}
return arr;
}
And I need to type that function so I can use it with objects that has types like these:
interface BLOGPOSTS_ALL {
[key: string]: BLOGPOST
}
interface PRODUCTS_ALL {
[key: string]: PRODUCT
}
So when I call them with each different object, I want Typescript to know what the return array type will be.
For example:
const BLOGPOSTS_ALL_ARRAY = buildArrayFromObject(BLOGPOSTS_ALL); // SHOULD BE "BLOGPOST[]"
const PRODUCTS_ALL_ARRAY = buildArrayFromObject(PRODUCTS_ALL); // SHOULD BE "PRODUCT[]"
Here is what I've tried:
function buildArrayFromObject<T, K extends keyof T>(obj: T): T[K][] {
const keys = Object.keys(obj);
const arr = [];
for (const key of keys) {
arr.push(obj[key]);
}
return arr;
}
But I'm getting this error:
And the returning type of the function is being evaluated by Typescript as type never[]
What you could do is the following:
Create an abstraction type to define what your database handles look like:
// Create an Entity type to define how your database objects look like
type Entities<T> = { [key: string]: T | undefined }
Therefore you can express your products and blogposts like this:
type BLOGPOSTS = Entities<BLOGPOST>;
type PRODUCTS = Entities<PRODUCT>;
In order to convert them in type-safe manner into an array you can use the Object.values method provided by the JavaScript API - for more information please see MDN
It's possible to replace the method buildArrayFromObject by something like this:
const isNil = <T>(a: T | null | undefined): a is null | undefined => a === null || a === undefined;
const isAssigned = <T>(a: T | null | undefined): a is T => !isNil(a);
const entitiesToArray = <T>(entity: Entities<T>): T[] => Object.values(entity).filter(isAssigned);
This method uses the Object.values method to convert the object into an array. Afterwards it get's filtered to contain an array without undefined values. Therefore I made use of two helper methods isAssigned and isNil. Please see this CodeSandbox for an example: Code SandBox
Based on your concern, that the Object.value method is not supported by IE11, you can add a polyfill for that one. Either by pasting a polyfill in or by adding it using npm to your project.
Alternatively you can replace this code by the following answer Use Object.keys to mimick Object.values
Im writing a custom Hook that can take either one or two strings, or an object with more granular parameters. I wanted to add a conditional type check to check for a type of that param and do some logic based on it. Here are the relevant snippets:
// The hook itself
const [error, loading, data] = useFirestore('posts', 'test'); // in a string version
const [error, loading, data] = useFirestore({...someProps}); // in a object version version
// The types that i defined for them
type queryType<T> = T extends string ? string : documentQueryType;
type docType<T> = T extends string ? string : never;
type documentQueryType = {
collection: string;
query: string[] | string[][];
limit: number;
orderBy: string; // todo limit this to be only special words
order: string; // todo same as above
startAt: number;
endAt: number;
};
// The function that is in the question
export const useFirestore = <T>(query: queryType<T>, doc?: docType<T>) => {...rest of the function
How would I make the last snippet work so when passed an object it sets doc to never, and when passed a string sets the doc to string?
This can be partially achieved with conditional types, but it may not be 100% type-safe. Since doc is optional, it will not be required when the query is a string, and will still allow undefined when query is an object.
However, if these two scenarios are not an issue, this can be achieved with conditional types:
// Simplified type
type DocumentQueryType = {
collection: string;
};
// The two types of queries that are accepted
type QueryTypes = string | DocumentQueryType;
// Given the query type, infer the doc type
type InferDocType<QueryType> = QueryType extends string ? string : never;
const useFirestore = <QueryType extends QueryTypes>(query: QueryType, doc?: InferDocType<QueryType>) => { }
// Valid Examples
useFirestore('posts', 'test');
useFirestore({ collection: "" });
// Valid Examples (may not want these?)
useFirestore('posts');
useFirestore({ collection: "" }, undefined);
// Invalid Examples
useFirestore({ collection: "" }, "test");
// Argument of type '"test"' is not assignable to parameter of type 'undefined'.(2345)
useFirestore('posts', null);
// Argument of type 'null' is not assignable to parameter of type 'string | undefined'.(2345)
I'm using Typescript with React.
I am retrieving data from an API that returns two type: VirtualMachine or Disk. The backend takes responsibility for distinguishing the resource type and returns the type of both depending on the results of the query:
requestMoreInfo: (resourceType: string, resourceId: number): AppThunkAction<ResourceActions> => (dispatch, getState) => {
let fetchResourceInfo = fetch('http://localhost:5004/GetResourceTypeInformation/' + resourceType + '/' + resourceId, {
method: 'GET'
})
I've declared a union type for my Redux state:
export interface ResourceState {
currentResourceInformation?: VirtualMachineInformation | DiskInformation;
}
and I am subsequently converting the response to the type determined by the resource type passed into the function and dispatching an action to update my components state. THIS IS WHERE I THINK I'M GOING WRONG.
if (resourceType == "Virtual Machine") {
var vmResponse = response.json() as VirtualMachineInformation;
dispatch({
type: 'RECEIVE_RESOURCE_INFO',
resourceInfo: vmResponse
});
}
else if (resourceType == "Disk") {
var diskResponse = response.json() as DiskInformation;
dispatch({
type: 'RECEIVE_RESOURCE_INFO',
resourceInfo: diskResponse
});
}
TypeScript appears to be happy with this. However, I am then trying to render a child component and passing this update state as a prop:
private requestResourceInformation = (resourceType: string, resourceId: number) => {
this.props.requestMoreInfo(resourceType, resourceId);
if (resourceType == "Virtual Machine") {
return <VirtualMachineResource virtualMachine={this.props.currentResourceInformation} />
}
}
This just maps a table with the data.
However, I'm retrieving the error:
Type 'VirtualMachineInformation | DiskInformation | undefined' is not assignable to type 'VirtualMachineInformation | undefined'.
Type 'DiskInformation' is not assignable to type 'VirtualMachineInformation | undefined'.
Type 'DiskInformation' is not assignable to type 'VirtualMachineInformation'.
Property 'azureVmId' is missing in type 'DiskInformation
I believe this is because TypeScript still considers the value as the union type and the expected value is present in VirtualMachine type but no present in the Disk type.
Where am I going wrong with this? Is there an explicit way to declare the specific type of the union after retrieving the data?
The virtualMachine property doesn't accept the DiskInformation interface as a value - and that is your problem. TypeScript compiler doesn't know what's the exact type of the value at the compile time so the type is guessed to be one among those three: VirtualMachineInformation, DiskInformation, undefined
As I wrote in the comments section - you can use (at least) three solutions to solve your problem:
use type assertions - https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions - you can not use <Type>value syntax in tsx files
return <SomeComponent prop={value as Type}></SomeComponent>
use type guards https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards
if ([check if type of the value is the Type]) {
return [something else]
}
[TypeScript knows that the value IS NOT an instance of the Type here]
return <SomeComponent prop={value}></SomeComponent>
use overloads - http://www.typescriptlang.org/docs/handbook/functions.html#overloads
class X {
private y(x: "abc"): "cda";
private y(x: "cda"): "abc";
private y(x: string): string {
[method logic]
}
}