CtrlK
BlogDocsLog inGet started
Tessl Logo

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%

Does it follow best practices?

Validation for skill structure

Overview
Skills
Evals
Files

types-type-assertions.mdreferences/

Type Assertions & Type Compatibility

Type Assertions

Type assertions tell TypeScript to treat a value as a specific type.

as Syntax (Preferred)

const value: unknown = "hello";
const strLength = (value as string).length;

// DOM elements
const input = document.querySelector('input') as HTMLInputElement;
input.value = 'text';

Angle Bracket Syntax (JSX-incompatible)

const value: unknown = "hello";
const strLength = (<string>value).length;

Note: Use as syntax - it works in JSX/TSX files.

Non-null Assertion (!)

function getUser(id: string) {
  const user = users.find(u => u.id === id);
  // Assert user is not null/undefined
  return user!.name;
}

// Optional chaining is safer
return users.find(u => u.id === id)?.name;

Warning: Only use ! when you're certain the value exists. Prefer optional chaining.

Const Assertions

// Infer literal types instead of widening
const config = {
  endpoint: '/api/users',
  method: 'GET'
} as const;
// Type: { readonly endpoint: "/api/users"; readonly method: "GET"; }

// Array becomes readonly tuple
const colors = ['red', 'green', 'blue'] as const;
// Type: readonly ["red", "green", "blue"]

// Use in function parameters
function request<T extends string>(method: T) {
  // method is the literal type, not string
}
request(config.method); // ✅ method is "GET"

Satisfies Operator (TypeScript 4.9+)

// Validate type without widening
const config = {
  endpoint: '/api/users',
  method: 'GET',
  timeout: 5000
} satisfies Config;

// config.method is still "GET", not string
// Unlike 'as Config', satisfies preserves literal types

type Color = { r: number; g: number; b: number } | string;

const palette = {
  red: { r: 255, g: 0, b: 0 },
  blue: '#0000FF'
} satisfies Record<string, Color>;

// palette.red.r is accessible (object structure preserved)
// With 'as Record<string, Color>', red.r would error

Type Compatibility

TypeScript uses structural typing (shape-based).

Structural Typing

interface Point {
  x: number;
  y: number;
}

class Point2D {
  constructor(public x: number, public y: number) {}
}

const point: Point = new Point2D(10, 20); // ✅ Compatible

Function Compatibility

type Handler = (msg: string, code: number) => void;

// ✅ Fewer parameters is compatible
const handler: Handler = (msg: string) => {
  console.log(msg);
};

// ❌ More parameters is not compatible
const handler2: Handler = (msg: string, code: number, extra: boolean) => {};

Bivariance in Method Parameters

interface Animal { name: string; }
interface Dog extends Animal { breed: string; }

class Vet {
  treat(animal: Animal) {}
}

class DogVet extends Vet {
  // ⚠️ Allowed but unsound
  treat(dog: Dog) {}
}

Best Practices

  1. Prefer type guards over assertions - Type guards are type-safe
  2. Use satisfies for validation without widening - Preserves literal types
  3. Const assertions for literal types - Use as const for immutable literal types
  4. Avoid non-null assertion (!) - Use optional chaining or type guards instead
  5. Double assertions as last resort - value as unknown as TargetType indicates design issue

Common Pitfalls

  • Overusing as - Defeats type checking, prefer narrowing
  • Non-null assertion on uncertain values - Can cause runtime errors
  • Ignoring structural compatibility - Extra properties can cause issues with fresh object literals

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

SKILL.md

tile.json