Angular与TypeScript：如何避免调用getToken时TokenId重复书写？

先明确原代码场景：

类型定义：

export type SomeToken<K extends string, V = any> = {
    [key in K]: V;
} & {
    created_at: Date;
    created_by_user: string;
};

原加载方法：

public getToken<TokenId extends string>(token_id: string): Observable<SomeToken<TokenId>> {
    return this.http.get<SomeToken<TokenId>>(ENDPOINT_URL + '/' + token_id);
}

原调用方式需要重复写getToken<'token_id'>('token_id')，可以通过以下方式避免重复：

方法一：利用字面量类型自动推导 #

修改getToken的参数类型，让泛型从传入的参数字面量自动推导：

public getToken<TokenId extends string>(token_id: TokenId): Observable<SomeToken<TokenId>> {
    return this.http.get<SomeToken<TokenId>>(ENDPOINT_URL + '/' + token_id);
}

修改后直接调用即可，无需手动指定泛型：

// 自动推导TokenId为'token_id'
getToken('token_id');

原理：原方法中参数类型是string，泛型TokenId无法关联到具体的字面量值；改成TokenId作为参数类型后，TypeScript会将传入的具体字符串字面量直接推导为泛型的类型，省去手动指定的步骤。

方法二：结合预定义令牌ID集合（可选，增强类型约束） #

如果需要限制只能传入特定的令牌ID，可以先定义一个联合类型，再结合自动推导：

// 预先定义所有合法的令牌ID
type ValidTokenIds = 'token_a' | 'token_b' | 'token_c';

public getToken<TokenId extends ValidTokenIds>(token_id: TokenId): Observable<SomeToken<TokenId>> {
    return this.http.get<SomeToken<TokenId>>(ENDPOINT_URL + '/' + token_id);
}

调用时依然无需重复写，同时还能在编译阶段校验传入的ID是否合法：

// 合法调用，自动推导TokenId为'token_a'
getToken('token_a');

// 编译报错，因为'invalid_token'不在ValidTokenIds中
getToken('invalid_token');

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