TypeScript类中使用私有属性报错：提示值未使用

报错原因是你开启了noUnusedProperties编译选项，TypeScript会严格检查私有属性是否在类内部被使用——哪怕已经初始化，只要没被调用就会触发错误。以下是几种保留私有修饰符的解决办法：

1. 在类中实际使用属性 #

这是最合理的方案，既然定义了私有属性，通常后续会有使用场景，比如在构造函数或其他方法中调用：

class ProjectInput {
    private templateElement: HTMLTemplateElement;
    private hostElement: HTMLDivElement;

    constructor() {
        this.templateElement = document.getElementById('project-input')! as HTMLTemplateElement;
        this.hostElement = document.getElementById('app')! as HTMLDivElement;
        // 示例：使用属性完成模板挂载逻辑
        const templateContent = document.importNode(this.templateElement.content, true);
        this.hostElement.appendChild(templateContent);
    }
}

2. 修改编译配置关闭未使用属性检查 #

如果确实暂时不需要使用这些属性，可以调整tsconfig.json的编译选项，关闭未使用属性的检查：

{
  "compilerOptions": {
    "noUnusedProperties": false
  }
}

注意：此设置会关闭全局的未使用属性检查，可能导致其他无用代码无法被检测到。

3. 使用注释忽略单个属性的报错 #

可以在属性上方添加注释，明确忽略该属性的未使用报错：

class ProjectInput {
    // @ts-expect-error 该属性暂未使用，后续会补充逻辑
    private templateElement: HTMLTemplateElement;
    // @ts-expect-error 该属性暂未使用，后续会补充逻辑
    private hostElement: HTMLDivElement;

    constructor() {
        this.templateElement = document.getElementById('project-input')! as HTMLTemplateElement;
        this.hostElement = document.getElementById('app')! as HTMLDivElement;
    }
}

推荐用@ts-expect-error替代@ts-ignore，前者明确表示此处预期存在错误，不会误忽略其他类型的问题。

4. 下划线前缀命名（配合团队规则） #

部分团队会约定以下划线开头的私有属性允许暂时未使用，需要配合ESLint或TypeScript规则配置，比如在ESLint中设置：

{
  "rules": {
    "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }]
  }
}

之后将属性命名修改为下划线前缀：

class ProjectInput {
    private _templateElement: HTMLTemplateElement;
    private _hostElement: HTMLDivElement;

    constructor() {
        this._templateElement = document.getElementById('project-input')! as HTMLTemplateElement;
        this._hostElement = document.getElementById('app')! as HTMLDivElement;
    }
}

内容的提问来源于stack exchange，提问作者Abdalrahman Shatou