# Typescript

> TypeScript conventions and rules for Graph Explorer, including branded types, function style preferences, and type safety patterns. Use when this capability is needed.

- Skill: `tomevault-io/typescript-11` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/typescript-11`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/typescript-11/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: DevOps & Infra
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/typescript-11

---


# TypeScript Conventions

## General Rules

- Do not change the VS Code setting `typescript.autoClosingTags`
- Prefer named function syntax over anonymous arrow functions for module-level declarations (e.g., `function handleClick() {}` over `const handleClick = () => {}`). Arrow functions within function scope are fine.
- Every commit should have no type errors
- Use explicit type aliases instead of `ReturnType<typeof ...>` when available (e.g., use `AppStore` instead of `ReturnType<typeof getAppStore>`)

## Branded Types

The project uses branded types from `@/utils` for type safety. These prevent accidental mixing of similar types at compile time.

| Type                     | Creator Function             | Location                                |
| ------------------------ | ---------------------------- | --------------------------------------- |
| `VertexId`               | `createVertexId()`           | `@/core/entities/vertex`                |
| `VertexType`             | `createVertexType()`         | `@/core/entities/vertex`                |
| `EdgeId`                 | `createEdgeId()`             | `@/core/entities/edge`                  |
| `EdgeType`               | `createEdgeType()`           | `@/core/entities/edge`                  |
| `EdgeConnectionId`       | `createEdgeConnectionId()`   | `@/core/StateProvider/edgeConnectionId` |
| `ConfigurationId`        | `createNewConfigurationId()` | `@/core/ConfigurationProvider/types`    |
| `RenderedVertexId`       | `toRenderedVertexId()`       | `@/core/StateProvider/renderedEntities` |
| `RenderedEdgeId`         | `toRenderedEdgeId()`         | `@/core/StateProvider/renderedEntities` |
| `IriNamespace`           | `splitIri()`                 | `@/utils/rdf`                           |
| `IriLocalValue`          | `splitIri()`                 | `@/utils/rdf`                           |
| `RdfPrefix`              | `generatePrefix()`           | `@/utils/rdf`                           |
| `NormalizedIriNamespace` | `normalizeNamespace()`       | `@/utils/rdf`                           |

Always use the appropriate branded type instead of `string` when working with these identifiers.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/aws) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->