I banged my head on this for a few hours, but the solution seems obvious in retrospect. First I present the solution, then I compare it to prior approaches. (Tested in Typescript 2.6.2.) // WORKING SOLUTION: union of types with type checks class MustBeThis { method1() { } } class OrThis { method2() { } … Read more
You need to rewrite your Test component in this way const Test= <T,>(props:TestProps<T>) => ( <span>Some component logic</span> ); Can you show the same with React.FC<TestProps>? It is impossible to do with FC. This is FC implementation: interface FunctionComponent<P = {}> { (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null; // … other static properties … Read more
You’re close. This falls under the category of Mapped Types. You need to make two changes: QueryKey extends string key in QueryKey interface GraphQLResponse<QueryKey extends string, ResponseType> { data: { [key in QueryKey]: ResponseType; } } interface User { username: string; id: number; } type UserByIdResponse = GraphQLResponse<‘userById’, User>; type UserByUsernameResponse = GraphQLResponse<‘userByUsername’, User>; Example … Read more
I’ve found a way to exclude all properties that match a given type, thanks to this article: https://medium.com/dailyjs/typescript-create-a-condition-based-subset-types-9d902cea5b8c I made a few adaptations, but here is the details: // 1 Transform the type to flag all the undesired keys as ‘never’ type FlagExcludedType<Base, Type> = { [Key in keyof Base]: Base[Key] extends Type ? never … Read more
You will want to use NonNullable: type Foo = NonNullable<FooOrUndefined> // { bar: number; } Sample
There isn’t any built-in mechanism in typescript to log out the desired info in question. However, if you are interested in understanding internal work, here’s the place in source code where the actually resolving of conditional types happens. Take a look at these places in checker.ts. ln:13258 instantiateTypeWorker() ln:12303 getConditionalType() ln:12385 getTypeFromConditionalTypeNode() ln:12772 getTypeFromTypeNode() Attached … Read more
This can be done with conditional types and indexed access types, like this: type KeysMatching<T, V> = {[K in keyof T]-?: T[K] extends V ? K : never}[keyof T]; and then you pull out the keys whose properties match string like this: const key: KeysMatching<Thing, string> = ‘other’; // ERROR! // ‘”other”‘ is not assignable … Read more
Yes, you can use enum values as keys. And you can use a mapped type like the standard library’s Record<K, V> to prevent repetition: enum FooKeys { FOO = ‘foo’, BAR = ‘bar’, } // probably all you need, but it’s a type alias type FooType = Record<FooKeys, string>; // if you need an interface … Read more
Here’s a solution, but beware when using this as a return type for Object.entries; it is not always safe to do that (see below). When you want to pair each key with something dependent on that key’s type, use a mapped type: type Entries<T> = { [K in keyof T]: [K, T[K]]; }[keyof T][]; type … Read more
You can also access the Type parameter through the ViewChild like this: export class Bazz { name: string; constructor(name: string) { this.name = name; } } @Component({ selector: ‘app-foo’, template: `<div>{{bazz?.name}}</div>`, exportAs: ‘appFoo’ }) export class FooComponent<T> { constructor() {} private _bazz: T; set bazz(b: T) { this._bazz = b; } get bazz(): T { … Read more