TypeScript中对象添加方法报错：Property 'saveCredentials'不存在于类型'{}'

你的代码报错是因为TypeScript会根据初始值{}推断storage的类型为空对象类型，这种类型不允许动态添加新属性。下面是几种可行的修复方案：

方案1：定义明确的接口类型（推荐） #

先声明一个描述storage结构的接口，再将storage指定为该类型：

interface StorageService {
  saveCredentials?: (token: any, id: any) => void;
  saveStatus?: (status: any) => void;
}

let storage: StorageService = {};

storage.saveCredentials = (token: any, id: any) => {
  localStorage.setItem('token', token);
  localStorage.setItem('userId', id);
};

storage.saveStatus = (status: any) => {
  localStorage.setItem('status', JSON.stringify(status));
};

export default storage;

如果要更严谨，可直接在接口里定义必填方法，声明时直接赋值实现：

interface StorageService {
  saveCredentials: (token: any, id: any) => void;
  saveStatus: (status: any) => void;
}

let storage: StorageService = {
  saveCredentials: (token: any, id: any) => {
    localStorage.setItem('token', token);
    localStorage.setItem('userId', id);
  },
  saveStatus: (status: any) => {
    localStorage.setItem('status', JSON.stringify(status));
  }
};

export default storage;

方案2：使用类型断言绕过类型检查（临时场景适用） #

如果只是快速临时修复，可把初始的{}断言为any类型，但这种方式会丢失TypeScript的类型校验优势：

let storage = {} as any;

storage.saveCredentials = (token: any, id: any) => {
  localStorage.setItem('token', token);
  localStorage.setItem('userId', id);
};

storage.saveStatus = (status: any) => {
  localStorage.setItem('status', JSON.stringify(status));
};

export default storage;

方案3：直接声明包含方法的对象 #

跳过先声明空对象再赋值的步骤，直接在声明时定义所有方法，TypeScript会自动推断对象类型：

const storage = {
  saveCredentials: (token: any, id: any) => {
    localStorage.setItem('token', token);
    localStorage.setItem('userId', id);
  },
  saveStatus: (status: any) => {
    localStorage.setItem('status', JSON.stringify(status));
  }
};

export default storage;

内容的提问来源于stack exchange，提问作者Lanre Afeez