← スキル一覧に戻る
1.
2.
Browser Rules (
Node.js Rules (

build-free-types
by paulirish
build-free-typesは、other分野における実用的なスキルです。複雑な課題への対応力を強化し、業務効率と成果の質を改善します。
⭐ 4,295🍴 1,284📅 2026年1月22日
ユースケース
⚡
作業効率化
日常的な作業を効率化し、生産性を向上。
📋
プロジェクト管理
タスク管理やプロジェクト進捗の追跡を支援。
👥
チーム連携強化
チーム内のコミュニケーションと連携を改善。
SKILL.md
name: build-free-types description: This skill should be used when the user asks to "set up types without a build step", "use vanilla JS with types", "configure erasable syntax", or mentions "JSDoc type checking". It provides instructions for modern type safety using JSDoc in browsers and native TypeScript execution in Node.js.
Modern Type Checking (No Build Step)
Configure projects for type safety without a compilation step (tsc/build) by leveraging JSDoc for browser code and Erasable Syntax for Node.js.
Core Philosophy
- Browser (Client-side): Use pure
.jsfiles with JSDoc annotations. This ensures the code runs directly in the browser while maintaining full IDE type support and error checking. - Node.js (Server-side/Tooling): Use
.tsfiles with Erasable Syntax. This allows Node.js (v24.11.0+) to execute TypeScript files directly without a build step, provided they don't use non-erasable features like enums or namespaces.
Configuration Standards
Apply these settings to enable seamless type checking.
1. package.json
Ensure the project is an ES Module and specifies a modern Node.js version.
{
"type": "module",
"engines": {
"node": ">=24.11.0"
},
"scripts": {
"typecheck": "tsc --noEmit"
}
}
2. tsconfig.json
Configure the TypeScript compiler to check JavaScript files and enforce erasable syntax.
{
"compilerOptions": {
"target": "esnext",
"module": "nodenext",
/* Node.js - Native TS Execution Flags */
"erasableSyntaxOnly": true, /* Prevents using unsupported TypeScript features. */
"verbatimModuleSyntax": true, /* Enforces explicit type imports: https://nodejs.org/api/typescript.html#importing-types-without-type-keyword */
"allowImportingTsExtensions": true, /* Allows 'import x from "./file.ts"' */
"rewriteRelativeImportExtensions": true, /* Handle the import adjustment if compiling to JS */
/* Type Checking Strategy */
"noEmit": true,
"allowJs": true,
"checkJs": true,
"strict": true,
"skipLibCheck": true
}
}
Coding Rules
Follow these rules to maintain a build-free environment.
Browser Rules (.js files)
- Use JSDoc for all types: Define variable types, function signatures, and complex objects using JSDoc comments.
- Avoid TS-specific syntax: Do not use
interface,typealiases, or other TypeScript-only syntax in.jsfiles. - Import types correctly: Do NOT use the legacy typedef import (
/** @typedef {import('./types.js').User} User */). Use the modern TS 5.5+ style:/** @import {User} from './types.js' */.
Node.js Rules (.ts files)
- Strictly use Erasable Syntax: Avoid features that require transformation.
- ❌ No
enum - ❌ No
namespaces - ❌ No parameter properties in constructors
- ❌ No
experimentalDecorators
- ❌ No
- Include file extensions: Always include the
.tsextension in import paths:import { x } from './utils.ts'. - Use
import type: Explicitly mark type-only imports to satisfyverbatimModuleSyntax.
Example Files
examples/tsconfig.json- A complete type-checking configuration.
スコア
総合スコア
75/100
リポジトリの品質指標に基づく評価
✓SKILL.md
SKILL.mdファイルが含まれている
+20
○LICENSE
ライセンスが設定されている
0/10
○説明文
100文字以上の説明がある
0/10
✓人気
GitHub Stars 1000以上
+15
✓最近の活動
3ヶ月以内に更新
+5
✓フォーク
10回以上フォークされている
+5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
✓タグ
1つ以上のタグが設定されている
+5
レビュー
💬
レビュー機能は近日公開予定です



