TypeShade
A shader language that starts in TypeScript
What does TypeShade change?
TypeShade is not a runtime that executes ordinary TypeScript on the GPU. It starts from familiar TypeScript syntax and tooling, then interprets the file as a separate shader language with its own types and semantics.
use typeshade is the language boundary
The file-level "use typeshade" directive declares a TypeShade program. Once present, the compiler applies TypeShade shader semantics instead of treating the file as ordinary application code. Understanding this line is the first step to understanding the language.
What stays familiar from TypeScript?
Functions, type annotations, modules, expressions and control flow form the familiar authoring surface. That does not mean every TypeScript feature is available unchanged. TypeShade deliberately constrains features that do not map cleanly to the GPU execution model and reports those constraints statically.
Where does TypeScript end and TypeShade begin?
TypeScript describes general-purpose program types and execution. TypeShade additionally describes GPU values, vectors and matrices, resources, entry points, target capabilities and shader-specific restrictions. A familiar function or if still has to make sense for the target GPU program.
What does the compiler produce?
TypeShade source is lowered to one intermediate representation and then emitted as host-consumable shader source. The current targets are WGSL for WebGPU and GLSL ES 3.00 for WebGL2. A host hands that source to its own WebGPU or WebGL2 code, or loads the compiled program into the program runtime, typeshade/runtime.
Where should you go next?
Start with Quick start and make one real "use typeshade" file. Then use the Language guide to learn types, values and expressions, functions, control flow and GPU semantics. Move to Verification and the API reference once you know the authoring model.
Your TypeScript knowledge is the starting point
TypeShade keeps familiar language concepts, then makes the GPU-specific differences explicit instead of hiding them in generated shader strings.
| Concept | Familiar from TypeScript | What TypeShade adds |
|---|---|---|
| Functions | Declarations and calls | Shader functions and entry-point rules are added. |
| Types | Annotations and inference | GPU-native values plus vector and matrix types are added. |
| Modules | import / export | A shader file and the shader files it imports compile as one program. |
| Control flow | if / for and related syntax | The program must satisfy GPU execution and target constraints. |
| Execution | JavaScript runtime | The host executes generated code through WebGPU or WebGL2. |
Keep the TypeScript and JavaScript references nearby
TypeShade documentation focuses on what is different. When a TypeScript or JavaScript concept is new to you, use the language references below as the background layer.
- TypeScript Handbook — Everyday Types — Types, annotations, unions and other everyday TypeScript concepts
- TypeScript Handbook — Functions — Function declarations, parameters, return types and calls
- MDN — JavaScript Guide — The JavaScript background for expressions, control flow, functions and modules