如何在JS/TS中定义兼具直接取值与set方法的自定义存取器？

你的需求完全可以实现，核心是利用JavaScript中函数既是可调用类型又是对象的特性，结合valueOf/toString方法重写实现直接访问取值，同时给函数挂载set方法，并让函数本身支持调用传参完成赋值。

TypeScript实现方案 #

import { Dispatch, SetStateAction } from 'react';

type StateUpdater<T> = Dispatch<SetStateAction<T>>;
type SetState<T> = [T, StateUpdater<T>];

export function State<T>(stateData?: SetState<T>) {
  // 核心函数：传参则设置值，不传则返回当前值
  const stateWrapper = function (value?: SetStateAction<T>): T | void {
    if (value !== undefined) {
      stateData?.[1](value);
    } else {
      return stateData?.[0];
    }
  } as StateUpdater<T> & (() => T);

  // 挂载set方法，直接调用React state的setter
  stateWrapper.set = function (value: SetStateAction<T>) {
    stateData?.[1](value);
  };

  // 重写valueOf，隐式转换时返回当前state值（如console.log、数值运算场景）
  stateWrapper.valueOf = function () {
    return stateData?.[0];
  };

  // 重写toString，字符串场景下返回当前值的字符串形式
  stateWrapper.toString = function () {
    return String(stateData?.[0]);
  };

  return stateWrapper;
}

使用示例 #

import { useState } from 'react';
import { State } from './your-file-path';

function DemoComponent() {
  const [count, setCount] = useState(0);
  const theVariable = State([count, setCount]);

  // 直接访问取值，和普通变量用法一致
  console.log(theVariable); // 输出 0
  console.log(+theVariable); // 输出 0（数值转换）
  console.log(`${theVariable}`); // 输出 "0"（字符串转换）

  // 三种设置值的方式，均兼容React的函数式更新
  theVariable.set(5); // 通过set方法赋值
  theVariable(10); // 直接调用函数传参赋值
  theVariable(prev => prev + 1); // 函数式更新

  return <div>{theVariable}</div>; // 直接渲染，自动触发转换逻辑
}

关键特性说明 #

• 直接访问取值：通过重写valueOf和toString，当变量被当作普通值使用时（如console.log、模板字符串），会自动返回最新的state值，完全符合你想要的"像普通变量一样访问"的需求。
• 多方式赋值：同时支持set方法、直接调用函数传参两种赋值方式，且兼容React useState的函数式更新逻辑。
• 类型安全：TypeScript类型定义确保了调用、赋值时的类型提示与校验，避免类型错误。

注意事项 #

• React组件重渲染时，theVariable会被重新创建，但因为绑定的是最新的[state, setState]对，所以始终能获取到最新的state值。
• 在条件判断中使用（如if (theVariable)）时，会触发valueOf转换，边界值判断逻辑和普通变量完全一致。

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