Back to Details

typescript-skills

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

TypeScript Skills for LlamaFarm

LlamaFarm的TypeScript技能指南

Shared TypeScript best practices for Designer (React) and Electron App subsystems.
为Designer（React）和Electron应用子系统共享的TypeScript最佳实践。

Overview

概述

This skill covers idiomatic TypeScript patterns for LlamaFarm's frontend applications:
  • designer/: React 18 + TanStack Query + TailwindCSS + Radix UI
  • electron-app/: Electron 28 + Electron Vite
本指南涵盖LlamaFarm前端应用的惯用TypeScript模式：
  • designer/：React 18 + TanStack Query + TailwindCSS + Radix UI
  • electron-app/：Electron 28 + Electron Vite

Tech Stack

技术栈

SubsystemFrameworkBuildKey Libraries
designerReact 18ViteTanStack Query, Radix UI, axios, react-router-dom
electron-appElectron 28electron-viteelectron-updater, axios
子系统框架构建工具核心库
designerReact 18ViteTanStack Query, Radix UI, axios, react-router-dom
electron-appElectron 28electron-viteelectron-updater, axios

Configuration

配置

Both projects use strict TypeScript:
json
{
  "strict": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
  "noFallthroughCasesInSwitch": true
}
两个项目均使用严格模式TypeScript：
json
{
  "strict": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
  "noFallthroughCasesInSwitch": true
}

Core Principles

核心原则

  1. Strict mode always - Never use 
    any
    without explicit justification
  2. Prefer interfaces - Use 
    interface
    for object shapes, 
    type
    for unions/intersections
  3. Explicit return types - Always type public function returns
  4. Immutability - Use 
    readonly
    and 
    as const
    where applicable
  5. Null safety - Handle null/undefined explicitly, avoid non-null assertions
  1. 始终启用严格模式 - 除非有明确理由，否则绝不使用
    any
    类型
  2. 优先使用接口 - 用
    interface
    定义对象结构，用
    type
    定义联合/交叉类型
  3. 显式返回类型 - 始终为公共函数指定返回类型
  4. 不可变性 - 适当时使用
    readonly
    和
    as const
  5. 空值安全 - 显式处理null/undefined，避免非空断言

Related Documents

相关文档

  • patterns.md - Idiomatic TypeScript patterns
  • typing.md - Strict typing, generics, utility types
  • testing.md - Vitest and testing patterns
  • security.md - XSS prevention, input validation
  • patterns.md - 惯用TypeScript模式
  • typing.md - 严格类型、泛型、工具类型
  • testing.md - Vitest与测试模式
  • security.md - XSS防护、输入验证

Quick Reference

快速参考

React Component Pattern

React组件模式

tsx
interface Props {
  readonly title: string
  readonly onAction?: () => void
}

function MyComponent({ title, onAction }: Props): JSX.Element {
  return <button onClick={onAction}>{title}</button>
}
tsx
interface Props {
  readonly title: string
  readonly onAction?: () => void
}

function MyComponent({ title, onAction }: Props): JSX.Element {
  return <button onClick={onAction}>{title}</button>
}

TanStack Query Hook Pattern

TanStack Query钩子模式

typescript
export const projectKeys = {
  all: ['projects'] as const,
  lists: () => [...projectKeys.all, 'list'] as const,
  detail: (id: string) => [...projectKeys.all, 'detail', id] as const,
}

export function useProject(id: string) {
  return useQuery({
    queryKey: projectKeys.detail(id),
    queryFn: () => fetchProject(id),
    enabled: !!id,
  })
}
typescript
export const projectKeys = {
  all: ['projects'] as const,
  lists: () => [...projectKeys.all, 'list'] as const,
  detail: (id: string) => [...projectKeys.all, 'detail', id] as const,
}

export function useProject(id: string) {
  return useQuery({
    queryKey: projectKeys.detail(id),
    queryFn: () => fetchProject(id),
    enabled: !!id,
  })
}

Error Class Pattern

错误类模式

typescript
export class ApiError extends Error {
  constructor(
    message: string,
    public readonly status: number,
    public readonly response?: unknown
  ) {
    super(message)
    this.name = 'ApiError'
  }
}
typescript
export class ApiError extends Error {
  constructor(
    message: string,
    public readonly status: number,
    public readonly response?: unknown
  ) {
    super(message)
    this.name = 'ApiError'
  }
}

Checklist Summary

检查清单汇总

CategoryCriticalHighMediumLow
Typing3421
Patterns2332
Testing2321
Security4210
类别关键高优先级中优先级低优先级
类型检查3421
设计模式2332
测试2321
安全4210