使用TypeScript实现YAML与Properties互转遇依赖问题求方案

问题原因 #

你使用的properties库长期未维护，没有提供官方TypeScript类型声明，因此VS Code会抛出找不到模块类型的错误。以下是几个可行的解决办法：

办法1：补全properties的类型声明 #

如果不想更换依赖库，先安装社区维护的类型声明包：

npm install --save-dev @types/properties

安装完成后，重启VS Code的TypeScript服务（按Ctrl+Shift+P，选择「TypeScript: Restart TS Server」），类型错误即可消除。

办法2：换用维护活跃的带类型库 #

推荐替换为@humanwhocodes/properties，这个库原生支持TypeScript，维护状态良好，用法和旧库基本一致：

1. 安装依赖：

npm install js-yaml @humanwhocodes/properties

2. 导入依赖：

import * as YAML from 'js-yaml';
import { parse as parseProperties, stringify as stringifyProperties } from '@humanwhocodes/properties';

3. 编写双向转换函数：

// YAML转Properties
const convertYamlToProperties = (yamlString: string): string => {
  const yamlData = YAML.load(yamlString) as Record<string, any>;
  return stringifyProperties(yamlData);
};

// Properties转YAML
const convertPropertiesToYaml = (propertiesString: string): string => {
  const propertiesData = parseProperties(propertiesString);
  return YAML.dump(propertiesData);
};

4. React组件使用示例：

import { useState } from 'react';

const YamlPropertiesConverter = () => {
  const [yamlInput, setYamlInput] = useState('');
  const [propertiesOutput, setPropertiesOutput] = useState('');

  const handleConvert = () => {
    try {
      setPropertiesOutput(convertYamlToProperties(yamlInput));
    } catch (err) {
      alert('YAML格式有误，请检查');
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <textarea
        value={yamlInput}
        onChange={(e) => setYamlInput(e.target.value)}
        placeholder="输入YAML内容"
        rows={10}
        style={{ width: '100%', marginBottom: '10px' }}
      />
      <button onClick={handleConvert}>YAML转Properties</button>
      <pre className="jwt-payload" style={{ marginTop: '10px', padding: '10px', backgroundColor: '#f5f5f5' }}>
        {propertiesOutput}
      </pre>
    </div>
  );
};

export default YamlPropertiesConverter;

办法3：手动编写类型声明（临时方案） #

如果找不到合适的类型包，也可以自定义类型声明：

在项目根目录创建types/properties/index.d.ts文件，写入以下内容：

declare module 'properties' {
  export function stringify(obj: Record<string, any>, options?: any): string;
  export function parse(str: string, options?: any): Record<string, any>;
}

然后修改tsconfig.json，让TypeScript识别自定义类型：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./types"]
  }
}

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