React 入力フォームを作る① 入力値と保存値を設計する

画面の入力 "3"
    ↓ JSONでは文字列として送信
サーバーで半角数字の1〜7かを検証
    ↓
DBには整数の3を保存

{
  "displayName": "山田",
  "bio": null,
  "weeklyGoal": 3,
  "version": "12"
}

{
  "displayName": " 山田 ",
  "bio": "",
  "weeklyGoal": "3",
  "expectedVersion": "12"
}

export type Profile = {
  displayName: string;
  bio: string | null;
  weeklyGoal: number | null;
  version: string;
};
export type Draft = { displayName: string; bio: string; weeklyGoal: string };
export type SaveInput = Draft & { expectedVersion: string };
export type FieldErrors = Partial<Record<keyof Draft, string[]>>;
export const toDraft = (profile: Profile): Draft => ({
  displayName: profile.displayName,
  bio: profile.bio ?? '',
  weeklyGoal: profile.weeklyGoal === null ? '' : String(profile.weeklyGoal),
});
export class SaveError extends Error {
  constructor(
    public kind: 'invalid' | 'conflict' | 'session' | 'unknown',
    message: string,
    public fields: FieldErrors = {},
  ) { super(message); }
}

using System.Globalization;

public sealed record ProfileRow(Guid UserId, string DisplayName, string? Bio,
    int? WeeklyGoal, long Version);
public sealed record ProfileInput(string? DisplayName, string? Bio,
    string? WeeklyGoal, string? ExpectedVersion);
public sealed record ProfileValues(string DisplayName, string? Bio, int? WeeklyGoal);
public sealed record ProfileResult(string DisplayName, string? Bio,
    int? WeeklyGoal, string Version)
{
    public static ProfileResult From(ProfileRow row) => new(row.DisplayName,
        row.Bio, row.WeeklyGoal, row.Version.ToString(CultureInfo.InvariantCulture));
}
public interface IProfileStore
{
    Task<ProfileRow?> FindAsync(Guid userId, CancellationToken ct);
    Task<ProfileRow?> TrySaveAsync(Guid userId, long expectedVersion,
        ProfileValues values, CancellationToken ct);
}

CREATE TABLE user_profile (
    user_id uuid PRIMARY KEY,
    display_name text NOT NULL CHECK (char_length(display_name) BETWEEN 1 AND 40),
    bio text CHECK (bio IS NULL OR char_length(bio) <= 300),
    weekly_goal integer CHECK (weekly_goal BETWEEN 1 AND 7),
    version bigint NOT NULL DEFAULT 1 CHECK (version > 0)
);