TypeScript中用条件类型定义函数返回值时，如何实现分支类型提示？

我在使用switch(pageName)进行判断时，希望TypeScript能自动识别每个case分支应该返回的类型，该怎么实现？

type PageName = 'pageA' | 'pageB';


type PageProps<T extends PageName> = 
  T extends 'pageA' ? { fooA: 'barA'} :
  T extends 'pageB' ?{ fooB: 'barB'} :
  never
;
    

type GetPageData = <T extends PageName>(pageName: T) => Promise<PageProps<T>>;

export const getPageData: GetPageData = async (pageName) => {
    switch (pageName) {
        case 'pageA': {
            return {
                
            }
        }
        case 'pageB': {
            return {
                
            }
        }
    }
    return;
}

要让TypeScript准确识别每个switch分支的返回类型，你可以通过以下方式实现：

方式1：明确返回对应类型结构 #

在每个case分支中写出符合对应PageProps的返回结构，TypeScript会根据当前pageName的字面量类型，自动校验返回值是否匹配，同时提供类型提示：

type PageName = 'pageA' | 'pageB';

type PageProps<T extends PageName> = 
  T extends 'pageA' ? { fooA: 'barA'} :
  T extends 'pageB' ? { fooB: 'barB'} :
  never;

type GetPageData = <T extends PageName>(pageName: T) => Promise<PageProps<T>>;

export const getPageData: GetPageData = async (pageName) => {
    switch (pageName) {
        case 'pageA': {
            // 此处会校验是否符合PageProps<'pageA'>的类型要求
            return { fooA: 'barA' };
        }
        case 'pageB': {
            // 此处会校验是否符合PageProps<'pageB'>的类型要求
            return { fooB: 'barB' };
        }
        default:
            // 兜底抛出错误，避免编译时出现"函数缺少返回值"的警告
            throw new Error(`不支持的页面类型：${pageName}`);
    }
}

方式2：让TypeScript自动推导函数类型 #

去掉显式的GetPageData类型注解，直接在函数定义中声明泛型和返回类型，让TypeScript自动推导函数的类型兼容性，同时在编写返回值时获得精准提示：

type PageName = 'pageA' | 'pageB';

type PageProps<T extends PageName> = 
  T extends 'pageA' ? { fooA: 'barA'} :
  T extends 'pageB' ? { fooB: 'barB'} :
  never;

export const getPageData = async <T extends PageName>(pageName: T): Promise<PageProps<T>> => {
    switch (pageName) {
        case 'pageA': {
            return { fooA: 'barA' };
        }
        case 'pageB': {
            return { fooB: 'barB' };
        }
        default:
            throw new Error(`不支持的页面类型：${pageName}`);
    }
}

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