Decorators don't work in TypeScript after following Developer Preview guide

[jparta]

Description

Steps to Reproduce

I followed this guide: https://developer.salesforce.com/docs/platform/lwc/guide/ts.html

import { LightningElement, api } from 'lwc';

export default class Test extends LightningElement {
  @api testTesting;
}

Expected Results

Typescript accepts the decorator @api

Actual Results

In VS Code, I get the following TypeScript error:

Unable to resolve signature of property decorator when called as an expression.
  Argument of type 'ClassFieldDecoratorContext<Enhancer, any> & { name: "testTesting"; private: false; static: false; }' is not assignable to parameter of type 'string | symbol'.ts(1240)

(alias) const api: PropertyDecorator
import api

Decorator to mark public reactive properties

This prevents deploying to org.

Version

{
  "name": "salesforce-app",
  "private": true,
  "version": "1.0.0",
  "description": "Salesforce App",
  "scripts": {
    "lint": "eslint **/{aura,lwc}/**/*.js",
    "test": "npm run test:unit",
    "test:unit": "sfdx-lwc-jest",
    "test:unit:watch": "sfdx-lwc-jest --watch",
    "test:unit:debug": "sfdx-lwc-jest --debug",
    "test:unit:coverage": "sfdx-lwc-jest --coverage",
    "prettier": "prettier --write \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
    "prettier:verify": "prettier --check \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
    "postinstall": "husky install",
    "precommit": "lint-staged",
    "ts-build": "tsc --project force-app/main/default/lwc",
    "build-and-deploy": "npm run ts-build && sfdx project deploy start"
  },
  "devDependencies": {
    "@lwc/eslint-plugin-lwc": "^1.8.2",
    "@prettier/plugin-xml": "^3.2.2",
    "@salesforce/eslint-config-lwc": "^3.2.3",
    "@salesforce/eslint-plugin-aura": "^2.0.0",
    "@salesforce/eslint-plugin-lightning": "^1.0.0",
    "@salesforce/lightning-types": "^0.2.1",
    "@salesforce/sfdx-lwc-jest": "^3.1.0",
    "eslint": "^8.11.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jest": "^27.6.0",
    "husky": "^8.0.3",
    "lint-staged": "^15.1.0",
    "lwc": "^8.8.0",
    "prettier": "^3.1.0",
    "prettier-plugin-apex": "^2.0.1",
    "typescript": "^5.6.3"
  },
  "lint-staged": {
    "**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}": [
      "prettier --write"
    ],
    "**/{aura,lwc}/**/*.js": [
      "eslint"
    ]
  }
}

• LWC: 8.12.2

[nolanlawson]

Thanks for opening the issue! By any chance could you share a Git repo / Gist / TypeScript playground / etc to help repro?

[jparta]

@nolanlawson

I used the code snippet I wrote above and the TS guide to create this repro: https://github.com/jparta/LWC_decorator_repro

You'll still have to follow the TS guide to get your environment to the state that I have it in.

TS guide again: https://developer.salesforce.com/docs/platform/lwc/guide/ts.html