TypeScript中如何为导出的函数指定完整类型？

针对你因为AoT编译要求把箭头函数改成普通函数后丢失整体类型的问题，这里有两种可行的方案，既能保留ActionReducer<number>的类型标注，又能满足AoT的编译规则：

方案一：使用类型断言（as）为函数声明指定整体类型 #

你可以在普通函数定义的末尾，用as关键字直接断言整个函数的类型为ActionReducer<number>。这种方式保持了普通函数声明的格式，完全兼容AoT编译：

import { ActionReducer, Action } from '@ngrx/store';
// 假设CounterActions是你定义的动作常量
import { CounterActions } from './counter.actions';

export function counterReducer(state = 0, action: Action): number {
  const at = CounterActions;
  switch (action.type) {
    case at.incrementId: return state + 1;
    case at.decrementId: return state - 1;
    case at.resetId: return 0;
    default: return state;
  }
} as ActionReducer<number>;

方案二：将普通函数赋值给标注了类型的变量 #

这种方式更贴近你原来箭头函数的写法，只是把箭头换成普通函数表达式，然后赋值给一个标注了ActionReducer<number>类型的导出变量，同样能被AoT正常编译：

import { ActionReducer, Action } from '@ngrx/store';
import { CounterActions } from './counter.actions';

export const counterReducer: ActionReducer<number> = function(state = 0, action: Action) {
  const at = CounterActions;
  switch (action.type) {
    case at.incrementId: return state + 1;
    case at.decrementId: return state - 1;
    case at.resetId: return 0;
    default: return state;
  }
};

补充说明 #

为什么原来的普通函数写法会丢失整体类型？因为ActionReducer<number>是一个完整的函数类型（定义为(state: number, action: Action) => number），而你最初的普通函数写法只标注了参数和返回值，并没有把整个函数关联到这个类型上。上面两种方法都直接将函数的整体类型指定为ActionReducer<number>，既满足了TypeScript的类型检查需求，也符合Angular AoT编译对导出结构的要求。

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