如何将TypeScript函数改写为箭头函数？含泛型函数转换示例

一、普通函数转箭头函数的基本步骤 #

把普通TS函数改成箭头函数其实很直观，核心是调整声明语法，几个关键点记一下：

• 删掉function关键字，用=>连接参数列表和函数体
• 如果只有单个参数，参数括号可以省略；无参数或多个参数必须保留括号
• 如果函数体是单行表达式，可以省略大括号和return（箭头函数会自动返回表达式结果）；多行逻辑则必须保留大括号，且需要显式写return

举个实际例子：
普通函数写法：

function greet(name: string): string {
  return `Hello, ${name}!`;
}

转成箭头函数：

// 单行表达式简化版
const greet = (name: string): string => `Hello, ${name}!`;

// 多行逻辑版（比如加额外处理）
const greet = (name: string): string => {
  const greeting = `Hello, ${name}!`;
  console.log(greeting);
  return greeting;
};

二、泛型函数转箭头函数的注意事项 #

泛型箭头函数的写法和普通箭头函数略有不同，核心是泛型参数<T>要放在箭头函数的参数括号前面——因为箭头函数没有函数声明式的function <T>(...)语法，必须把泛型参数前置声明。

针对你给出的simpleState泛型函数，改写后的箭头函数版本如下：

原函数：

function simpleState<T>(initial: T): [() => T, (v: T) => void] { 
  let value: T = initial; 
  return [ 
    () => value, 
    (v: T) => { value = v; } 
  ]; 
};

改写后的箭头函数：

const simpleState = <T>(initial: T): [() => T, (v: T) => void] => {
  let value: T = initial;
  return [
    () => value,
    (v: T) => { value = v; }
  ];
};

额外提示（JSX环境兼容）

如果你的代码是在React JSX环境中，直接写<T>可能会被解析成JSX标签，这时候可以给泛型参数加一个基础约束来避免歧义，比如改成<T extends unknown>：

const simpleState = <T extends unknown>(initial: T): [() => T, (v: T) => void] => {
  // 函数体不变
};

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