{"id":18877,"library":"typescript-template-language-service-decorator","title":"TypeScript Template Language Service Decorator","description":"Framework for decorating a TypeScript language service with support for languages embedded inside template strings. Current stable version is 2.3.2, released July 2021. This library abstracts the complexity of handling template string nodes, allowing developers to focus on the embedded language's content. It is primarily used to build TypeScript language service plugins for tagged template literals (e.g., styled-components, lit-html). Unlike custom language service implementations, this decorator seamlessly integrates with TypeScript's existing infrastructure, handling offset mapping and template context automatically. It ships with TypeScript types and is ESM-and-CJS compatible. Release cadence is low; updates are infrequent and focus on maintenance.","status":"active","version":"2.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/Microsoft/typescript-template-language-service-decorator","tags":["javascript","TypeScript","typescript server","plugin","typescript"],"install":[{"cmd":"npm install typescript-template-language-service-decorator","lang":"bash","label":"npm"},{"cmd":"yarn add typescript-template-language-service-decorator","lang":"bash","label":"yarn"},{"cmd":"pnpm add typescript-template-language-service-decorator","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Named import; also available via default import but named is recommended.","wrong":"const decorateWithTemplateLanguageService = require('typescript-template-language-service-decorator').decorateWithTemplateLanguageService","symbol":"decorateWithTemplateLanguageService","correct":"import { decorateWithTemplateLanguageService } from 'typescript-template-language-service-decorator'"},{"note":"This is a type/interface; use `import type` in TypeScript to avoid runtime import.","wrong":"import { TemplateLanguageService } from 'typescript-template-language-service-decorator'","symbol":"TemplateLanguageService","correct":"import type { TemplateLanguageService } from 'typescript-template-language-service-decorator'"},{"note":"TemplateContext is an interface; use `import type`.","wrong":"","symbol":"TemplateContext","correct":"import type { TemplateContext } from 'typescript-template-language-service-decorator'"}],"quickstart":{"code":"import * as ts from 'typescript/lib/tsserverlibrary';\nimport { decorateWithTemplateLanguageService, TemplateLanguageService, TemplateContext } from 'typescript-template-language-service-decorator';\n\nclass EchoTemplateLanguageService implements TemplateLanguageService {\n    getCompletionsAtPosition(\n        context: TemplateContext,\n        position: ts.LineAndCharacter\n    ): ts.CompletionInfo {\n        const line = context.text.split(/\\n/g)[position.line];\n        return {\n            isGlobalCompletion: false,\n            isMemberCompletion: false,\n            isNewIdentifierLocation: false,\n            entries: [\n                {\n                    name: line.slice(0, position.character),\n                    kind: '',\n                    kindModifiers: 'echo',\n                    sortText: 'echo'\n                }\n            ]\n        };\n    }\n}\n\nexport = (mod: { typescript: typeof ts }) => {\n    return {\n        create(info: ts.server.PluginCreateInfo): ts.LanguageService {\n            return decorateWithTemplateLanguageService(\n                mod.typescript,\n                info.languageService,\n                info.project,\n                new EchoTemplateLanguageService(),\n                { tags: ['echo'] }\n            );\n        }\n    };\n};","lang":"typescript","description":"Shows a complete TypeScript server plugin that adds echo completions to template strings tagged with `echo`."},"warnings":[{"fix":"Import from 'typescript/lib/tsserverlibrary' instead of 'typescript'.","message":"The library requires 'typescript/lib/tsserverlibrary' as a peer dependency; using 'typescript' alone will fail.","severity":"gotcha","affected_versions":">=2.0"},{"fix":"Implement the new optional method or update the interface to include it.","message":"In version 2.3.0, `getDefinitionAndBoundSpan` was added; plugins that override this method may need to update their interface.","severity":"breaking","affected_versions":"=2.3.0"},{"fix":"Parse text using `context.text.split(/\\n/g)` or similar to get lines.","message":"TemplateContext.text is the raw text of the template string; newlines are preserved and positions are relative to this raw text.","severity":"gotcha","affected_versions":">=2.0"},{"fix":"Update to use `ts.LineAndCharacter` object.","message":"The old method `getCompletionsAtPosition` used to accept a `string` for relativePosition; now it expects `ts.LineAndCharacter`.","severity":"deprecated","affected_versions":"<2.0"},{"fix":"Use `import pkg from 'typescript-template-language-service-decorator'` with `esModuleInterop` enabled.","message":"If using CommonJS, you must default-import the module due to ESM/CJS interop.","severity":"gotcha","affected_versions":">=2.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Change import to `import * as ts from 'typescript/lib/tsserverlibrary'`.","cause":"Using 'typescript' instead of 'typescript/lib/tsserverlibrary'.","error":"TypeError: Cannot read property 'getLanguageService' of undefined"},{"fix":"Use `import type { TemplateLanguageService } from 'typescript-template-language-service-decorator'`.","cause":"Using non-type import on a type-only export; likely missing 'type' keyword.","error":"Module '\"typescript-template-language-service-decorator\"' has no exported member 'TemplateLanguageService'."},{"fix":"Use `{ tags: ['myTag'], enabled: true }`.","cause":"TemplateSettings expects `tags` as `string[]`, but also requires other properties like `enabled`. Provide full object.","error":"error TS2345: Argument of type '{ tags: string[]; }' is not assignable to parameter of type 'TemplateSettings'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}