Building your own TypeScript node | typescript-transformer | Spatie SPATIE TypeScript Transformer ========================= spatie.be/open-source [Docs](https://spatie.be/docs) [Typescript-transformer](https://spatie.be/docs/typescript-transformer/v3) Typescript-nodes Building your own TypeScript node Version v3 v2 v1 Other versions for crawler [v3](https://spatie.be/docs/typescript-transformer/v3) [v2](https://spatie.be/docs/typescript-transformer/v2) [v1](https://spatie.be/docs/typescript-transformer/v1) Building your own TypeScript node - [ Introduction ](https://spatie.be/docs/typescript-transformer/v3/introduction) - [ Postcardware ](https://spatie.be/docs/typescript-transformer/v3/postcardware) - [ Installation ](https://spatie.be/docs/typescript-transformer/v3/installation) - [ Questions & issues ](https://spatie.be/docs/typescript-transformer/v3/questions-and-issues) - [ Changelog ](https://spatie.be/docs/typescript-transformer/v3/changelog) - [ About us ](https://spatie.be/docs/typescript-transformer/v3/about-us) Getting started --------------- - [ Setting up ](https://spatie.be/docs/typescript-transformer/v3/getting-started/setting-up) - [ Running TypeScript Transformer for the first time ](https://spatie.be/docs/typescript-transformer/v3/getting-started/first-run) - [ Special attributes ](https://spatie.be/docs/typescript-transformer/v3/getting-started/attributes) - [ Typing properties ](https://spatie.be/docs/typescript-transformer/v3/getting-started/typing-properties) - [ Replacing common types ](https://spatie.be/docs/typescript-transformer/v3/getting-started/replacing-types) - [ Formatters ](https://spatie.be/docs/typescript-transformer/v3/getting-started/formatters) Laravel ------- - [ Installation and setup ](https://spatie.be/docs/typescript-transformer/v3/laravel/installation-and-setup) - [ Laravel Data ](https://spatie.be/docs/typescript-transformer/v3/laravel/laravel-data) - [ Controllers ](https://spatie.be/docs/typescript-transformer/v3/laravel/controllers) - [ Routes ](https://spatie.be/docs/typescript-transformer/v3/laravel/routes) - [ Route filters ](https://spatie.be/docs/typescript-transformer/v3/laravel/route-filters) - [ Watch mode ](https://spatie.be/docs/typescript-transformer/v3/laravel/watch-mode) Custom transformers ------------------- - [ Getting started ](https://spatie.be/docs/typescript-transformer/v3/transformers/getting-started) - [ Class transformer ](https://spatie.be/docs/typescript-transformer/v3/transformers/class-transformer) - [ Enum transformer ](https://spatie.be/docs/typescript-transformer/v3/transformers/enum-transformer) Transformed providers --------------------- - [ Getting started ](https://spatie.be/docs/typescript-transformer/v3/providers/getting-started) - [ Using different writers in providers ](https://spatie.be/docs/typescript-transformer/v3/providers/writers-in-providers) - [ Logging in providers ](https://spatie.be/docs/typescript-transformer/v3/providers/logging) - [ Referencing types ](https://spatie.be/docs/typescript-transformer/v3/providers/references) - [ Helpers ](https://spatie.be/docs/typescript-transformer/v3/providers/helpers) TypeScript nodes ---------------- - [ Introduction ](https://spatie.be/docs/typescript-transformer/v3/typescript-nodes/introduction) - [ Building your own TypeScript node ](https://spatie.be/docs/typescript-transformer/v3/typescript-nodes/custom-nodes) - [ Visiting TypeScript nodes ](https://spatie.be/docs/typescript-transformer/v3/typescript-nodes/visitor) - [ Node reference ](https://spatie.be/docs/typescript-transformer/v3/typescript-nodes/reference) Watch mode ---------- - [ How does it work? ](https://spatie.be/docs/typescript-transformer/v3/watch-mode/how-it-works) - [ Setting up the runner ](https://spatie.be/docs/typescript-transformer/v3/watch-mode/setting-up-the-runner) - [ Watch events ](https://spatie.be/docs/typescript-transformer/v3/watch-mode/watch-events) - [ PHP Nodes ](https://spatie.be/docs/typescript-transformer/v3/watch-mode/php-nodes) Advanced -------- - [ Extensions ](https://spatie.be/docs/typescript-transformer/v3/advanced/extensions) - [ Managing transformers ](https://spatie.be/docs/typescript-transformer/v3/advanced/managing-transformers) - [ Loggers ](https://spatie.be/docs/typescript-transformer/v3/advanced/loggers) - [ Custom writers ](https://spatie.be/docs/typescript-transformer/v3/advanced/custom-writers) Building your own TypeScript node ================================= The package comes with a lot of TypeScript nodes, but sometimes it might be necessary to build your own. A TypeScript node is a regular PHP class that implements the `TypeScriptNode` interface: ``` use Spatie\TypeScriptTransformer\Data\WritingContext; use Spatie\TypeScriptTransformer\TypeScriptNodes\TypeScriptNamedNode; use Spatie\TypeScriptTransformer\TypeScriptNodes\TypeScriptNode; class PickNode implements TypeScriptNode, TypeScriptNamedNode { public function __construct( private TypeScriptNode $type, private array $properties, ) {} public function write(WritingContext $context): string { return 'Pick'; } public function getName(): string { return 'Pick'; } } ``` The write method is responsible for transforming the TypeScript node to a string, the `WritingContext` object is passed to lower level TypeScript nodes to reference other TypeScript types and can generally be ignored. Some TypeScript nodes represent a type with a name like an interface, enum, ... these nodes should implement the `TypeScriptNamedNode` interface. The `getName` method should return the name of the TypeScript node so that it can be referenced by other TypeScript nodes. When you've got a node which itself contains another TypeScript node that can be a `TypeScriptNamedNode` we recommend you to implement `TypeScriptForwardingNamedNode`. This interface requires you to implement the `getForwardedNamedNode`method which should return the TypeScript node that either is another `TypeScriptForwardingNamedNode`or `TypeScriptNamedNode`. An example of such a node is the `TypeScriptAlias`: ``` class TypeScriptAlias implements TypeScriptForwardingNamedNode, TypeScriptNode { public function __construct( public TypeScriptIdentifier|TypeScriptGeneric $identifier, public TypeScriptNode $type, ) { } public function write(WritingContext $context): string { return "type {$this->identifier->write($context)} = {$this->type->write($context)};"; } public function getForwardedNamedNode(): TypeScriptNamedNode|TypeScriptForwardingNamedNode { return $this->identifier; } } ``` Lastly, the package also provides some tooling to visit a tree of all TypeScript nodes. When your custom node encapsulates other TypeScript nodes, you should mark those properties with the `#[NodeVisitable]` attribute so the visitor knows to traverse them. This works for both single node properties and arrays of nodes: ``` use Spatie\TypeScriptTransformer\Attributes\NodeVisitable; class TypeScriptGeneric implements TypeScriptForwardingNamedNode, TypeScriptNode { /** * @param array $genericTypes */ public function __construct( #[NodeVisitable] public TypeScriptIdentifier|TypeScriptReference $type, #[NodeVisitable] public array $genericTypes, ) { } // .... } ``` A good match? ------------- ### What we do best - All things Laravel - Custom frontend components - Building APIs - AI-powered features - Simplifying things - Clean solutions - Integrating services ### Not our cup of tea - WordPress themes - Cutting corners - Free mockups to win a job - "Just execute the briefing" In short: we'd like to be a **substantial part** of your project. [ Get in touch via email ](mailto:info@spatie.be?subject=A%20good%20match%21&body=Tell%20us%20as%20much%20as%20you%20can%20about%0A-%20your%20online%20project%0A-%20your%20planning%0A-%20your%20budget%0A-%20%E2%80%A6%0A%0AAnything%20that%20helps%20us%20to%20start%20straightforward%21)