Developer Portfolios with TypeScript | Code Card

Why a TypeScript-first portfolio matters

TypeScript is the lingua franca of modern JavaScript development. From React to Next.js, from Node.js APIs to cloud functions, teams prefer type-safe code for reliability and maintainability. A strong developer portfolio that highlights TypeScript fluency shows how you design types, evolve code safely, and collaborate at scale.

AI-assisted coding is now part of daily workflows. For TypeScript developers, it is not just about writing code faster. It is about guiding AI tools to produce correct types, leveraging generics, and interpreting compiler feedback to refine suggestions. With Code Card, you can showcase your AI-assisted TypeScript patterns with contribution graphs, token breakdowns, and achievement badges that reflect real progress, not vanity metrics.

Language-specific considerations for TypeScript portfolios

Type safety as a signal of engineering maturity

• Strict mode usage: Enable strict, noImplicitAny, and strictNullChecks in tsconfig.json. Show before-and-after diffs that reduce implicit any usage or null-related defects.
• Types at boundaries: Emphasize type-safe edges such as API handlers, database access, and third-party integrations. Validators and inferred types demonstrate good architecture.
• Generics and utility types: Use Partial, Pick, ReturnType, Awaited, and mapped types to reduce duplication.

Framework choices that reinforce TypeScript skills

• Frontend: React with tsx, Next.js App Router, and TanStack Query with typed query keys and responses.
• Backend: NestJS or Express with zod or io-ts for runtime validation plus inferred types, and Prisma or TypeORM with generated types.
• API contracts: tRPC, OpenAPI with openapi-typescript, or GraphQL with code generation for strict end-to-end typing.

How AI assistance patterns differ for TypeScript

• Compiler-driven loops: AI produces a draft, then the compiler points to a missing generic or incorrect union narrowing. Iterating on error messages becomes a tight feedback loop.
• Context criticality: Providing type definitions, d.ts files, and representative usage examples improves completion accuracy far more than in untyped JavaScript.
• Refactor confidence: AI suggestions are easier to verify. If types still satisfy constraints and tests pass, the change is likely safe.
• Prompt strategies: Short prompts that include type signatures outperform verbose natural language. Paste the desired interface and ask for an implementation that satisfies it.

Key metrics and benchmarks for TypeScript productivity

Your developer portfolio should reflect measurable improvements in type-safe coding, not just lines of code. The following metrics capture TypeScript-specific strengths and AI collaboration quality.

Type quality and correctness metrics

• Type error delta: Number of tsc errors before and after a session. Track a rolling average to show that your sessions trend toward fewer errors.
• Implicit any reduction: Count of any occurrences, especially implicit ones. Use ESLint with @typescript-eslint/no-explicit-any to quantify progress.
• Narrowing coverage: Frequency of type guards, in checks, discriminated unions, and asserts functions. Highlight when you replaced runtime checks with static narrowing.
• Boundary typing rate: Percentage of external I/O endpoints validated at runtime with types inferred to consumers, for example zod schemas or OpenAPI codegen.

AI-assisted coding metrics

• Acceptance ratio: Percentage of AI-suggested code that persists past the next commit. Low churn indicates high-quality collaboration.
• Token efficiency: Tokens per accepted line or function. Efficient prompting coupled with reusable types should decrease tokens per unit of value.
• Refactor depth: Number of files or symbols touched in an AI-assisted refactor, validated by uncompromised types and passing tests.

Benchmarks to include in a TypeScript portfolio

• Strict-mode milestone: Time it took to migrate a codebase to strict: true, with error counts and strategies used to eliminate assertions.
• End-to-end typing: Show a feature where types flow from a schema to API handlers, frontend hooks, and UI components with zero manual duplication.
• Testing rigor: Coverage of type-level tests using tsd or expectTypeOf alongside runtime tests in Vitest or Jest.

In Code Card dashboards, present these benchmarks alongside contribution graphs and token breakdowns so viewers see both pace and quality in your developer-portfolios narrative.

Practical tips and code examples

The fastest way to level up a TypeScript portfolio is to ship type-safe features that demonstrate architectural judgment. The following examples show patterns that recruiters and peers value.

1) Runtime validation with inferred types

import { z } from "zod";

// Define once, infer everywhere
const CreateUser = z.object({
  email: z.string().email(),
  role: z.enum(["admin", "editor", "viewer"]),
  age: z.number().int().min(13),
});

type CreateUser = z.infer<typeof CreateUser>;

async function createUser(input: unknown) {
  const data = CreateUser.parse(input); // throws if invalid
  // data is fully typed
  return db.user.create({ data });
}

Portfolio tip: Show how the schema powers API handlers, client forms, and tests with a single source of truth.

2) End-to-end typing with tRPC

// server/router.ts
import { initTRPC } from "@trpc/server";
import { z } from "zod";

const t = initTRPC.create();

export const appRouter = t.router({
  postById: t.procedure.input(z.object({ id: z.string() }))
    .query(async ({ input }) => {
      const post = await db.post.findUnique({ where: { id: input.id } });
      if (!post) throw new Error("Not found");
      return post;
    }),
});

export type AppRouter = typeof appRouter;

// client/queries.ts
import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
import type { AppRouter } from "../server/router";

const client = createTRPCProxyClient<AppRouter>({
  links: [httpBatchLink({ url: "/trpc" })],
});

const post = await client.postById.query({ id: "p_123" });
// post is strongly typed from server to client

Portfolio tip: Include a screenshot or short clip in your README or profile showing how auto-complete flows from server definitions into React hooks. Reference Developer Portfolios with JavaScript | Code Card if you also maintain JS projects.

3) Generic utilities that reduce duplication

// Map API model to UI view model with a reusable generic
type Mapper<TInput, TOutput> = (input: TInput) => TOutput;

function mapArray<T, U>(xs: readonly T[], f: Mapper<T, U>): U[] {
  return xs.map(f);
}

type UserDTO = { id: string; createdAt: string; email: string };
type UserVM = { id: string; joined: Date; email: string };

const toVM: Mapper<UserDTO, UserVM> = u => ({
  id: u.id,
  joined: new Date(u.createdAt),
  email: u.email,
});

const vms = mapArray<UserDTO, UserVM>([{ id:"1", createdAt:"2024-01-01", email:"a@b.com" }], toVM);

Portfolio tip: Call out where generics replaced repeated mappers across your codebase. Quantify reduction in code volume and defect surface.

4) Exhaustive discriminated unions

type Payment =
  | { kind: "card"; last4: string }
  | { kind: "bank"; iban: string }
  | { kind: "cash" };

function describePayment(p: Payment): string {
  switch (p.kind) {
    case "card": return `Card ****${p.last4}`;
    case "bank": return `Bank ${p.iban}`;
    case "cash": return "Cash";
    default: ((_: never) => { /* ensures exhaustiveness */ })(p);
             return "unknown";
  }
}

Portfolio tip: Show how exhaustiveness eliminates runtime errors and speeds up refactors. Pair this with an explanation of how you used AI to scaffold the switch and then enforced strict narrowing.

5) Tests that assert types and behavior

// vitest.config.ts would be set up normally
import { expect, test } from "vitest";
import { expectTypeOf } from "expect-type";

type ApiResult = { ok: true; data: string } | { ok: false; error: string };

function getStatus(result: ApiResult): "success" | "failure" {
  return result.ok ? "success" : "failure";
}

test("type-level check", () => {
  expectTypeOf(getStatus).returns.toEqualTypeOf<"success" | "failure">();
});

test("runtime behavior", () => {
  expect(getStatus({ ok: true, data: "x" })).toBe("success");
  expect(getStatus({ ok: false, error: "e" })).toBe("failure");
});

Portfolio tip: Include both runtime tests and type tests. This demonstrates confidence that your AI-assisted changes preserve correctness at multiple levels.

Tracking your progress

You can translate day-to-day TypeScript work into a compelling developer portfolios narrative by tracking metrics and surfacing highlights.

• Install the CLI quickly: npx code-card. Capture session events, token usage, and commit annotations locally.
• Segment by language: Tag TypeScript sessions separately from other languages. Surface TypeScript-specific achievements, for example first strict-mode migration, zod coverage milestones, and end-to-end typing goals.
• Showcase with context: Pair contribution graphs with short notes that link compiler error counts, refactor scope, and test outcomes to specific commits or pull requests.
• Compare stacks: If you also build in Ruby or C++, link out for cross-language perspective. For example, see Developer Profiles with Ruby | Code Card and Developer Profiles with C++ | Code Card.

Within Code Card, your public profile highlights tokens spent, acceptance ratios, and streaks. Complement these with short write-ups that explain how you used type-driven prompts to reduce iteration time.

Actionable setup for a type-safe workflow

• tsconfig discipline: Start projects with npm create t3-app or npx create-next-app@latest with TypeScript enabled. Set strict: true, noUncheckedIndexedAccess: true, and skipLibCheck: false for stronger guarantees.
• ESLint and types: Use @typescript-eslint with rules that limit any and encourage explicit function return types in public APIs.
• Runtime validation: Standardize on zod or valibot. Export inferred types instead of duplicating interfaces.
• Type-first APIs: Adopt tRPC or generate types from OpenAPI, then consume them in React query hooks.
• Test rigor: Use Vitest or Jest with expect-type or tsd to catch regressions that runtime tests miss.
• Prompt patterns: Feed AI the signature first, plus one concrete usage example. Ask for an implementation that satisfies constraints and to include narrowing where unions are present.
• Refactor strategy: For large changes, ask AI to produce a step plan with type checkpoints. After each step, run tsc -p . --noEmit to verify progress before proceeding.

For complementary guidance on leveraging AI in broader stacks, see AI Code Generation for Full-Stack Developers | Code Card and Coding Streaks for Full-Stack Developers | Code Card.

Conclusion

A great TypeScript portfolio does not just show that you write code. It shows that you design with types, move fast without breaking contracts, and collaborate effectively with AI. Use structured metrics, clear before-and-after stories, and concrete code samples to demonstrate impact. Code Card turns these signals into a clean, shareable profile so peers and hiring teams can see your trajectory at a glance.

FAQ

How should I present AI-assisted TypeScript work in a portfolio?

Focus on intent and verification. Show the prompt or type signature you provided, the resulting suggestion, and how you validated it with compiler checks and tests. Summarize acceptance ratios and refactor scope rather than raw token counts. One or two annotated examples are better than dozens of screenshots.

What strictness settings matter most for credibility?

Enable strict, noImplicitAny, and strictNullChecks as a baseline. Consider noPropertyAccessFromIndexSignature, noUncheckedIndexedAccess, and exactOptionalPropertyTypes for extra safety. Document any trade-offs and show incremental progress if you migrate an existing codebase.

Which frameworks best highlight TypeScript strengths?

On the frontend, Next.js with React and TanStack Query showcases typed data flows. On the backend, NestJS or Express with zod and Prisma shows runtime validation with inferred types. tRPC or OpenAPI code generation demonstrates end-to-end typings between server and client.

How can I quantify improvements from AI assistance?

Track type error deltas per session, acceptance ratios of suggestions, tokens per accepted function, and test pass rates post-change. Correlate these with commit timestamps and show short narratives that explain where types accelerated iteration or caught regressions early.

Is it useful to include pure JavaScript examples too?

Yes, especially if you contrast outcomes. Show how moving from dynamic JavaScript to TypeScript reduced defects or improved refactor speed. Link to your JS-focused write-up in Developer Portfolios with JavaScript | Code Card and explain how type-safe patterns informed your design decisions.