可以使用TypeScript相互转换YAML和属性吗?

huangapple go评论69阅读模式
英文:

is it possible to convert yaml and properties interact using typescript

问题

我尝试编写一个小工具,可以让我使用TypeScript相互转换YAML和Properties。我尝试做的是这样的,首先安装依赖项:

npm install js-yaml properties

然后编写一个类似这样的函数:

const convertYamlToProperties = () => {
    const yamlData = YAML.safeLoad('yaml字符串');
    const properties = stringify(yamlData);
    return (<div className="jwt-payload">{properties}</div>);
}

并像这样加载依赖项:

import * as YAML from 'js-yaml';
import { stringify } from 'properties';

也许"properties"库太旧,长时间没有维护,我无法顺利导入依赖项。在Visual Studio Code中显示以下错误:

Cannot find module 'properties' or its corresponding type declarations.ts(2307) No quick fixes available

React版本是18。要将YAML转换为Properties,你可以尝试升级"properties"库或使用其他替代库。以下是关键的版本信息:

"typescript": "^4.9.5",
"react": "^18.2.0"
英文:

I am tried to write a little tool that could let me convert the yaml and properties each other by using typescript. what I am tried to do like this, fisrt install dependencies:

npm install js-yaml properties

when write a function like this:

const convertYamlToProperties = () =&gt; {
        const yamlData = YAML.safeLoad(&#39;yaml string&#39;);
        const properties = stringify(yamlData);
        return (&lt;div className=&quot;jwt-payload&quot;&gt;{properties}&lt;/div&gt;);
    }

and load the dependencies like this:

import * as YAML from &#39;js-yaml&#39;;
import { stringify } from &#39;properties&#39;;

maybe the properties is too old and did not maintain for a long time, I could not import the dependencies smoothly. Shows error in Visual Studio Code like this:

Cannot find module &#39;properties&#39; or its corresponding type declarations.ts(2307)
No quick fixes available

The react version is 18. what should I do to convert the yaml to properties? this is the key version info:

&quot;typescript&quot;: &quot;^4.9.5&quot;,
&quot;react&quot;: &quot;^18.2.0&quot;,

答案1

得分: 1

没有现有的 @types/properties 在 NPM 上的定义。你可以自己提供类型。

你可以从 "any" 类型开始,以便立即使用它,但如果你想实现自动完成,你可能希望更加具体化你的类型。

这是 propertiesstringify 函数的一个示例:

declare module 'properties' {
  export interface StringifyOptions {
    path: string;
    comment: string
    separator: string
    unicode: boolean
    replacer(this: {
      isProperty: boolean;
      isSection: boolean;
      assert:() => any;
    }, key: string, value: unknown, section: string | null);
  }
  export function stringify(obj: object, options?: Partial<StringifyOptions>, callback: (error: any, value: string) => void);
}

要么将此放入 .ts 文件中,要么放入 .d.ts 文件中,两者都应以某种方式导入到项目中,可以使用 import 或将其添加到 tsconfig.jsonfilesinclude 中。

英文:

There doesn't seem to be an existing @types/properties definition on NPM. What you can do is supply your own types.

You can start with an "any" type to just allow you to use it immediately, but if you want to implement autocomplete you might want to be a bit more specific with your types.

Here is an example of the stringify function in properties:

declare module &#39;properties&#39; {
  export interface StringifyOptions {
    path: string;
    comment: string
    separator: string
    unicode: boolean
    replacer(this: {
      isProperty: boolean;
      isSection: boolean;
      assert:() =&gt; any;
    }, key: string, value: unknown, section: string | null);
  }
  export function stringify(obj: object, options?: Partial&lt;StringifyOptions&gt;, callback: (error: any, value: string) =&gt; void);
}

Either put this in a .ts file or a .d.ts file, either of which should be imported into the project in some way, either by using import or adding it into tsconfig.json's files or include

huangapple
  • 本文由 发表于 2023年4月4日 14:41:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/75926195.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定