typescript: ` { key(): type } ` vs ` { key:() => type } `

En kollega skrev precis detta i en PR och jag blev förvånad att det fungerade eftersom jag aldrig hade sett syntaxen.

Finns det någon skillnad mellan dessa?

type x = {
    foo(): void;
    bar: () => void;
}

const x: x = {
    foo: () => { },
    bar: () => { }
}

lekplatslänk

Svar #1

Den första (foo(): void;) är en metoddefinition, den andra (bar:() => void;) är en fältdefinition som råkar vara av en funktionstyp (() => void;)

Den uppenbara skillnaden är ikonen som används i IntelliSense för kodkomplettering.

Funktionellt finns det i de flesta fall ingen skillnad. För klasser tilldelas metoder prototypen medan fält vanligtvis tilldelas instansen, men detta är bara en objekttyp så var funktionen tilldelas beror egentligen på objektet som gör implementeringen och inte på typen själv.

Den ena stora skillnaden när det gäller typer är beteendet under strictFunctionTypes (pr). Kärnan i det är att metoder beter sig bivariant medan fält beter sig contravariant, så endast en är ett fel i koden nedan:

type x = {
    foo(x: number | string): void;
    bar: (x: number | string) => void;
}

const x: x = {
    foo: (x: number) => { },// this is fine, methods are bivariant 
    bar: (x: number) => { } // err here, fields are contravariant  
}

Svar #2

När det gäller endast typerna finns det ingen skillnad:

type x = {
    foo(): void;
    bar: () => void;
}


type Foo = x['foo'];
type Bar = x['bar'];
// both are () => void

I allmänhet är typen av this inuti en metod- eller pilfunktionskropp inte en del av metodens eller pilfunktionens typ.