Dash in interface key causes error

[adius]

export interface Header {
  Authorization: string,
  'User-Agent': string,
}

$ flow
Error: source/types.js:31
 31:   'User-Agent': string,
       ^^^^^^^^^^^^ illegal name

Found 1 error

Is this a bug, or is there something I can do to fix it?

[asolove]

It looks like string literals are never allowed at this position. Presumably because they can only be looked up by the dynamic property syntax (a["user-agent"]) rather than as static property access with .. Flow cant do much to type that.

[jcready]

@asolove that seems like terrible reasoning. For instance you can do this and everything passes:

type Header = {
  Authorization: string,
  ['User-Agent']: string,
}

const a: Header = {
  Authorization: '',
  'User-Agent': '',
}

So clearly flow is able to type check dynamic/string-literal properties.

[asolove]

But this also type checks:

type Header = {
  Authorization: string,
  ['User-Agent']: string,
}

const a: Header = {
  Authorization: ''
}

Which I think is strong evidence that the bracket syntax doesn't work in type declarations.

[vkurchatkin]

Which I think is strong evidence that the bracket syntax doesn't work in type declarations.

It DOES work, but it just add indexer, not a property.

[jcready]

That's because putting 'User-Agent' in the square brackets makes it an indexer instead of just a property. My point was that flow is able to type check properties of objects which contain hyphens when you use an indexer, so it should be able to do that same type checking without using an indexer and just using a string literal property instead.

[vkurchatkin]

@adius I recommend you to use type instead of interface:

export type Header = {
  Authorization: string,
  'User-Agent': string,
}

[adius]

@vkurchatkin What are the advantages?

[vkurchatkin]

@adius well, one advantage is that it actually works

[EdmundsEcho]

I'm slowly integrating flow into my project. I use static type checking in several other contexts and am eager to make it more so with my create-react-app UI.

Unfortunately, I'm not in a position to rename my props. For better or worse, we support the use of hyphenated names. The inability to use a hyphenated name in the interface declaration seems like a meaningful shortcoming... types are to communicate intent, working-around this issue will get in the way of this communication.

I understand that the use of [] encodes an index... not a way to reference a hyphenated name.

Are there plans to figure out a solution here? Is this considered a relatively important issue? Or is there a reasonable work-around that is currently the norm for this situation?

Thanks in advance!

Updated

Based on the scope of the implements keyword being for class and not type, I can see how this question only makes sense if we expand the use of the keyword accordingly (because a class declaration does not support hyphenated names... that makes sense). So, the scope of the requested input likely has to include the future of using implements for the type keyword.

Final note, this feature would be consistent with how a graphql spec works.

- E