mcpField
T
typescript

typescript

github.com/dralgorhythmDevelopment12962 installsUpdated 15w ago
Repository

About typescript

A development skill for TypeScript programmers, covering project setup, type patterns, error handling, testing, and tooling. It supports strict type checking and common development workflows.

Key features

  1. 01TypeScript project setup
  2. 02Strict compiler configuration
  3. 03Discriminated unions and branded types
  4. 04Result-pattern error handling
  5. 05Vitest testing and Biome tooling

Use cases

  1. 01Initialize a pnpm TypeScript project
  2. 02Design type patterns for data results
  3. 03Handle asynchronous errors
  4. 04Write Vitest tests and run Biome checks

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill typescript

After installing, type/typescriptin Claude Code to confirm it loaded.

Details

From the project README

TypeScript Development

Project Setup

# Initialize with pnpm
pnpm init
pnpm add -D typescript @types/node

# TypeScript config
npx tsc --init
tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitReturns": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

Type Patterns

Discriminated Unions
type Result<T> =
  | { success: true; data: T }
  | { success: false; error: Error };

function handleResult(result: Result<User>) {
  if (result.success) {
    console.log(result.data); // User
  } else {
    console.error(result.error); // Error
  }
}
Branded Types
type UserId = string & { readonly brand: unique symbol };
type OrderId = string & { readonly brand: unique symbol };

function createUserId(id: string): UserId {
  return id as UserId;
}
Utility Types
// Make all properties optional
Partial<User>

// Make all properties required
Required<User>

// Pick specific properties
Pick<User, 'id' | 'email'>

// Omit specific properties
Omit<User, 'password'>

// Make properties readonly
Readonly<User>

Error Handling

// Result type pattern
type Result<T, E = Error> =
  | { ok: true; value: T }
  | { ok: false; error: E };

async function fetchUser(id: string): Promise<Result<User>> {
  try {
    const user = await db.users.findById(id);
    if (!user) {
      return { ok: false, error: new Error('User not found') };
    }
    return { ok: true, value: user };
  } catch (error) {
    return { ok: false, error: error as Error };
  }
}

Testing with Vitest

import { describe, test, expect, vi } from 'vitest';

describe('UserService', () => {
  test('creates user with valid email', async () => {
    const service = new UserService(mockRepo);
    const user = await service.create('[email protected]');
    expect(user.email).toBe('[email protected]');
  });

  test('throws on invalid email', async () => {
    const service = new UserService(mockRepo);
    await expect(service.create('invalid')).rejects.toThrow();
  });
});

Tooling

# Biome (linting + formatting)
pnpm add -D @biomejs/biome
pnpm biome check --apply .

# Vitest (testing)
pnpm add -D vitest
pnpm vitest

Comments

Markdown supported