question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

String union types in props inside generic types

See original GitHub issue

TypeScript Version: 3.9.2 & 4.0.0-beta

Code

type A = {
    foo: number
}

type B<T extends string> = {
    [key in T]?: number
}

type C<T extends string> = A & B<T>

const f = <T extends string>(prop: T, value: number): C<T> => {
    const c: C<T> = {
        foo: 6
    }

    c[prop] = value

    return c
}

type Props = 'bar' | 'baz'

const o = f<Props>('bar', 6)

Expected behavior: It should work 😃

Actual behavior: line 16: Type ‘number’ is not assignable to type ‘C<T>[T]’.

Playground Link: click

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:3
  • Comments:6

github_iconTop GitHub Comments

2reactions
fayzzzmcommented, Jul 24, 2020

Could you check this please. playground

0reactions
SancheZzcommented, Jul 24, 2020

@fayzzzm It looks like a hardhack

Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeScript generics: Props with union type in React
Here is one way to do a generic approach. For this, I wasn't sure how to make the multiple prop require true if...
Read more >
Handbook - Unions and Intersection Types - TypeScript
A union type describes a value that can be one of several types. We use the vertical bar ( | ) to separate...
Read more >
Better React Components with TypeScript Union Types
In this article I'm going to extend the use of union types to React to see how we can get the same benefits...
Read more >
An overview of computing with types • Tackling TypeScript
Type level: At compile time, we can use specific types and generic types. The type level is a ... The type operator |...
Read more >
Typing Component Props - React TypeScript Cheatsheets
A list of TypeScript types you will likely use in a React+TypeScript app: ... string literals to specify exact string values, with a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found