mcpField
P
predictability

predictability

github.com/toss开发2.0k51 次安装34 周前更新
代码仓库

关于 predictability

predictability 是一项关于编写可预测代码的技能，面向前端开发者。它通过显式处理副作用、统一同类函数的返回类型和遵守现有 API 契约来减少意外行为。

主要功能

  1. 01将副作用移到调用处
  2. 02统一同类函数的返回类型
  3. 03用清晰名称表达行为
  4. 04保留现有 API 契约

适用场景

  1. 01检查 getter 是否执行隐藏操作
  2. 02规范不同校验函数的结果
  3. 03重命名会保存数据的计算函数

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/toss/frontend-fundamentals --skill predictability

安装后在 Claude Code 中输入/predictability确认已加载。

README 原文English

来自项目 README

README 暂无中文译文，以下为英文原文；中文介绍见上方。

예측 가능성

함수는 이름이 암시하는 대로 동작해야 한다. 숨겨진 동작이 없어야 한다.

핵심 패턴

숨은 로직 드러내기

❌ fetch 함수에 숨은 부수 효과:

async function fetchBalance(): Promise<number> {
  const balance = await http.get<number>("...");
  logging.log("balance_fetched"); // 숨은 부수 효과!
  return balance;
}

✅ 부수 효과는 호출부에서 명시적으로:

async function fetchBalance(): Promise<number> {
  return await http.get<number>("...");
}

const balance = await fetchBalance();
logging.log("balance_fetched");
반환 타입 통일

❌ 같은 종류인데 반환 타입 다름:

function checkIsNameValid(name: string) {
  return name.length > 0; // boolean
}
function checkIsAgeValid(age: number) {
  if (age < 18) return { ok: false, reason: "18세 이상" };
  return { ok: true }; // 객체
}

✅ Discriminated Union으로 통일:

type ValidationResult = { ok: true } | { ok: false; reason: string };

function checkIsNameValid(name: string): ValidationResult {
  if (name.length === 0) return { ok: false, reason: "이름 필수" };
  return { ok: true };
}
function checkIsAgeValid(age: number): ValidationResult {
  if (age < 18) return { ok: false, reason: "18세 이상" };
  return { ok: true };
}

빠른 참조

코드 냄새개선 방법
getX()에 부수 효과순수 getter와 action 분리
calculateX()가 저장함calculateAndSaveX()로 이름 변경 또는 분리
같은 종류인데 반환 타입 다름Discriminated Union: { ok: true } | { ok: false; reason }
라이브러리 이름과 겹침구분되는 이름 사용: http → httpService

주의사항

  • 부수 효과를 제거하지 말고 명시적 위치로 이동
  • 지나치게 복잡한 타입 피하기
  • 기존 API 계약 유지

참고: https://frontend-fundamentals.com/code-quality/predictable/

评论

支持 Markdown