使用jsonwebtoken时为何出现(() => string)类型赋值错误？

问题代码 #

interface JwtPayload {
    [key: string]: any;
    iss?: string | undefined;
    sub?: string | undefined;
    aud?: string | string[] | undefined;
    exp?: number | undefined;
    nbf?: number | undefined;
    iat?: number | undefined;
    jti?: string | undefined;
}
let payload: JwtPayload | string
let id: string | undefined

id = payload.sub

错误信息 #

Type 'string | (() => string) | undefined' is not assignable to type 'string | undefined'.
Type '() => string' is not assignable to type 'string'.(2322)

错误原因 #

1. 联合类型的属性访问逻辑：payload是JwtPayload | string的联合类型，TypeScript访问联合类型的属性时，会合并所有类型对应属性的类型。
2. String原型方法的冲突：JavaScript的String原型上存在sub方法（substring的历史遗留别名），类型为() => string。当payload是string类型时，payload.sub指向的是这个方法，而非你定义的JWT payload中的sub字段。
3. 类型不匹配：最终payload.sub的类型是string | undefined | (() => string)，而id的类型是string | undefined，方法类型() => string无法赋值给字符串类型，因此触发类型错误。

内容的提问来源于stack exchange，提问作者nova9