Blog Docs Log in Get started

pantheon-ai/typescript-advanced

Comprehensive TypeScript guidance covering compiler configuration, advanced types, utility types, type guards, strict mode workflows, and documentation patterns; use when configuring tsconfig, designing complex generics, making illegal states unrepresentable, fixing type errors, or writing testable and maintainable type-safe APIs.

Overall
score

99%

Review — 99%

Does it follow best practices?

Validation — 10 / 11 Passed

Validation for skill structure

Template Literal Types

Basic Template Literals

Create types from string templates:

type World = "world";
type Greeting = `hello ${World}`; // "hello world"

type EmailDomain = "gmail.com" | "yahoo.com";
type Email = `user@${EmailDomain}`;
// "user@gmail.com" | "user@yahoo.com"

String Manipulation Utilities

Built-in type utilities for string transformation:

type Uppercase<S extends string> = intrinsic;
type Lowercase<S extends string> = intrinsic;
type Capitalize<S extends string> = intrinsic;
type Uncapitalize<S extends string> = intrinsic;

type Loud = Uppercase<"hello">; // "HELLO"
type Quiet = Lowercase<"WORLD">; // "world"
type Proper = Capitalize<"john">; // "John"
type Lower = Uncapitalize<"Smith">; // "smith"

Event Handler Generation

type EventNames = "click" | "focus" | "blur";
type EventHandlers = `on${Capitalize<EventNames>}`;
// "onClick" | "onFocus" | "onBlur"

type PropEventHandler<T extends string> = `on${Capitalize<T>}Changed`;

type FormEvents = PropEventHandler<"username" | "email">;
// "onUsernameChanged" | "onEmailChanged"

Path Building

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
type Endpoint = "users" | "posts" | "comments";
type ApiRoute = `/${Endpoint}`;
// "/users" | "/posts" | "/comments"

type RestEndpoint = `${HttpMethod} /${Endpoint}`;
// "GET /users" | "POST /users" | ... (12 combinations)

Pattern Matching with `infer`

Extract parts from template literal types:

type ExtractRouteParams<T extends string> =
  T extends `${infer _Start}:${infer Param}/${infer Rest}`
    ? Param | ExtractRouteParams<Rest>
    : T extends `${infer _Start}:${infer Param}`
    ? Param
    : never;

type Params = ExtractRouteParams<"/users/:userId/posts/:postId">;
// "userId" | "postId"

CamelCase Conversion

type CamelCase<S extends string> =
  S extends `${infer First}_${infer Rest}`
    ? `${Lowercase<First>}${Capitalize<CamelCase<Rest>>}`
    : Lowercase<S>;

type Result = CamelCase<"hello_world_example">;
// "helloWorldExample"

Type-Safe CSS Properties

type CSSUnits = "px" | "em" | "rem" | "%";
type CSSValue<T extends number> = `${T}${CSSUnits}`;

type Width = CSSValue<100>; // "100px" | "100em" | "100rem" | "100%"

// With specific properties
type Padding = CSSValue<0 | 4 | 8 | 16>;

Database Query Builder

type TableName = "users" | "posts" | "comments";
type Operation = "select" | "insert" | "update" | "delete";
type Query = `${Operation} from ${TableName}`;

// Type-safe query builder
type WhereClause<T extends string> = `where ${T}`;
type FullQuery<T extends TableName, C extends string> =
  `select from ${T} ${WhereClause<C>}`;

Accessor Generation

type Accessor<T, K extends keyof T> = {
  [P in K as `get${Capitalize<string & P>}`]: () => T[P];
} & {
  [P in K as `set${Capitalize<string & P>}`]: (value: T[P]) => void;
};

interface User {
  name: string;
  age: number;
}

type UserAccessors = Accessor<User, keyof User>;
// {
//   getName: () => string;
//   setName: (value: string) => void;
//   getAge: () => number;
//   setAge: (value: number) => void;
// }

Environment Variables

type EnvPrefix = "VITE_" | "NEXT_PUBLIC_";
type EnvVar<T extends string> = `${EnvPrefix}${Uppercase<T>}`;

type AppEnvVars = EnvVar<"api_url" | "api_key">;
// "VITE_API_URL" | "VITE_API_KEY" | "NEXT_PUBLIC_API_URL" | "NEXT_PUBLIC_API_KEY"

// Type-safe env access
declare const process: {
  env: Record<AppEnvVars, string>;
};

SQL Table Schema

type Column = "id" | "name" | "email" | "created_at";
type SqlType = "INTEGER" | "TEXT" | "TIMESTAMP";
type ColumnDef = `${Column} ${SqlType}`;

type TableSchema = {
  [K in Column]: ColumnDef;
};

Advanced Patterns

URL Builder

type Protocol = "http" | "https";
type Domain = string;
type Path = string;
type Url = `${Protocol}://${Domain}/${Path}`;

type ApiUrl<E extends string> = `https://api.example.com/${E}`;

Versioned API Endpoints

type Version = "v1" | "v2" | "v3";
type Resource = "users" | "posts";
type VersionedEndpoint = `/api/${Version}/${Resource}`;
// "/api/v1/users" | "/api/v1/posts" | "/api/v2/users" | ...

Type-Safe Event Names

type DomainEvent<T extends string> = `domain:${T}`;
type SystemEvent<T extends string> = `system:${T}`;

type UserEvents = DomainEvent<"user:created" | "user:updated">;
// "domain:user:created" | "domain:user:updated"

Best Practices

Use template literals for systematic naming patterns
Combine with mapped types for property generation
Leverage string manipulation utilities
Use infer for pattern extraction
Keep template expressions readable

Common Pitfalls

Don't create excessively large union types (combinatorial explosion)
Be aware of recursion limits in pattern matching
Avoid overly complex template expressions
Remember string manipulation utilities are case-sensitive
Watch out for empty string edge cases

Performance Considerations

Template literal types can create very large unions
Each combination is expanded at compile time
Limit the number of union members in template positions
Consider using string branding instead for open-ended strings

Install with Tessl CLI

npx tessl i pantheon-ai/typescript-advanced

references

compiler-module-resolution.md

compiler-performance.md

compiler-strict-mode.md

compiler-tsconfig.md

docs-adr-templates.md

docs-framework-docs.md

docs-jsdoc-patterns.md

docs-typedoc-config.md

guards-assertion-functions.md

guards-basic.md

guards-branded-types.md

guards-discriminated-unions.md

guards-exhaustiveness.md

guards-generic.md

guards-inference-infer.md

guards-inference-return.md

patterns-advanced-generics.md

patterns-api-client.md

patterns-branded-types.md

patterns-builder.md

patterns-deep-readonly.md

patterns-dependency-injection.md

patterns-event-emitter.md

patterns-form-validation.md

patterns-plugin-system.md

patterns-recursive-types.md

patterns-state-machine.md

patterns-type-safe-module.md

practices-illegal-states.md

practices-module-patterns.md

practices-runtime-validation.md

practices-type-first.md

types-conditional.md

types-generics.md

types-index-signatures.md

types-mapped.md

types-narrowing.md

types-template-literals.md

types-type-assertions.md

types-unions-intersections.md

utilities-custom-mapped-types.md

utilities-extract-exclude.md

utilities-key-remapping.md

utilities-nonnullable-awaited.md

utilities-partial-required.md

utilities-pick-omit.md

utilities-readonly-record.md

utilities-returntype-parameters.md