Semantic highlighting: Inconsistent token type when interface require optional properties

[gaplo917]

Version: 1.44.2
Commit: ff91584
Date: 2020-04-16T17:07:18.473Z (5 days ago)
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 19.4.0

Steps to Reproduce:

Reproduce recording:

Source:

import * as React from 'react'

type SomeProps = {
    a: number
}

interface A <P = {}> {
    (props: P, context?: any): React.ReactElement;
}

interface AA <P = {}> {
    (props: P, context?: any): React.ReactElement;
    propTypes?: any;
    contextTypes?: any;
    defaultProps?: Partial<P>;
    displayName?: string;
}

// correct
const Layout1: A<SomeProps> = (props: SomeProps) => {
    return <div>{props}</div>
}

// incorrect semantic identification
const Layout2: AA<SomeProps> = (props: SomeProps) => {
    return <div>{props}</div>
}

export { Layout1, Layout2 };

Does this issue occur when all extensions are disabled?: No

[aeschli]

With

interface AA <P = {}> {
    (props: P, context?: any): React.ReactElement;
    propTypes?: any;
    contextTypes?: any;
    defaultProps?: Partial<P>;
    displayName?: string;
}

Because the type is callable and has properties, it is a guess what the main purpose of the type is. We currently have the rule that we only call something a function if it has no properties as well,
But when it is used as a function, it will be colored as a function.

[gaplo917]

@aeschli Thanks for your detail reply.

One more question, is this a expected behavior?

Considering the description of Functions in MDN

In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.

To solve the conflict, as "Function object" must be a callable, I think it should have a higher priority than "properties" under semantic highlighting.

[aeschli]

It's really a guess what is more important. It being a callables or it having properties. You'd be surprised how many objects are also callable.
So what we do is we do not call it a function for the use cases where we can't tell how it is used.
At the places where it is used as a function, it's colored like a function, as your last screenshot shows.

[aeschli]

I moved the issue over to aeschli/typescript-vscode-sh-plugin#14.