typescript 将json 转成 map
时间: 2024-01-24 10:12:33 浏览: 324
可以使用 TypeScript 内置的 Map 类型来实现将 JSON 转成 Map。具体实现代码如下:
```typescript
const json = '{"key1": "value1", "key2": "value2"}';
const map = new Map<string, string>(Object.entries(JSON.parse(json)));
console.log(map);
```
这里使用了 `Object.entries()` 方法将 JSON 对象转成一个二维数组,然后通过 `Map` 构造函数将其转成 `Map` 对象。
相关问题
typescript map序列化
在TypeScript中,使用JSON.stringify()方法对Map对象进行序列化时,会发现值始终为{}。这是因为JSON.stringify()方法默认只能序列化简单的数据类型,无法直接序列化Map对象。
为了解决这个问题,可以封装一个序列化工具类来处理Map对象的序列化。下面是一个示例代码:
```typescript
class MapSerializer {
static serialize(map: Map<any, any>): string {
const obj: { [key: string]: any } = {};
map.forEach((value, key) => {
obj[key] = value;
});
return JSON.stringify(obj);
}
}
// 使用示例
const map = new Map<string, string>();
map.set("lzp", "666");
map.set("编程小龙", "666");
console.log("序列化之前");
console.log(map);
const serializedMap = MapSerializer.serialize(map);
console.log("序列化之后");
console.log(serializedMap);
```
这段代码中,我们定义了一个MapSerializer类,其中的serialize()方法接收一个Map对象作为参数,并将其转换为一个普通的对象。然后,我们使用JSON.stringify()方法将该对象序列化为字符串。
vite+vue3+typescript环境,帮忙写typescript代码,动态按需加载typescript文件中的函数方法,根据json维护的顺序动态调用函数,不同函数传值个数不同,利用原子化,返回值类型也都不同
A:
首先,需要安装相关依赖:
1. vite
2. vue3
3. typescript
然后,在配置文件中,设置使用 typescript:
```javascript
// vite.config.js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [vue()],
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
jsxInject: `import { h, Fragment } from 'vue'`,
tsconfigRaw: {
compilerOptions: {
target: 'es2019',
module: 'esnext'
}
}
}
}
```
在 `tsconfig.json` 中设置 `allowSyntheticDefaultImports` 和 `esModuleInterop` 为 true:
```json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
}
}
```
接着,编写代码:
```typescript
// Function.ts
type Function<TArgs extends any[], TReturn> = (...args: TArgs) => TReturn
class FunctionLoader {
private cache = new Map<string, Function<any[], any>>()
loadFunction<TArgs extends any[], TReturn>(
path: string,
name: string
): Function<TArgs, TReturn> | undefined {
const fullPath = `${path}/${name}.ts`
if (!this.cache.has(fullPath)) {
try {
const module = import(fullPath)
const fn = module[name] as Function<TArgs, TReturn>
this.cache.set(fullPath, fn)
} catch (err) {
console.error(`Failed to load function "${name}"`, err)
return undefined
}
}
return this.cache.get(fullPath)
}
}
// Json.ts
type FunctionConfig<TArgs extends any[], TReturn> = {
name: string
args: TArgs
returns: TReturn
}
type Json<TFunctions extends FunctionConfig<any[], any>> = TFunctions[]
function callFunctions<TFunctions extends FunctionConfig<any[], any>>(
json: Json<TFunctions>,
functions: FunctionLoader
) {
return json.map(({ name, args, returns }) => {
const fn = functions.loadFunction<typeof args, typeof returns>('.', name)
if (!fn) return undefined
return fn(...args)
})
}
// main.ts
const functions = new FunctionLoader()
const json = [
{ name: 'add', args: [1, 2], returns: 3 },
{ name: 'sleep', args: [1000], returns: undefined }
] as const
const results = callFunctions(json, functions)
console.log(results) // [3, undefined]
```
在 `Function.ts` 中,我们定义了一个 `FunctionLoader` 类,用于加载函数。它会缓存已经加载的函数,避免多次加载。
在 `Json.ts` 中,我们定义了一些类型,包括 `FunctionConfig` 和 `Json`。`FunctionConfig` 用于描述一个函数的参数和返回值类型。`Json` 表示一组函数的描述。
`callFunctions` 函数会根据传入的 `Json`,动态调用相应的函数。它会依次遍历 `Json` 中的每个函数描述对象,调用 `FunctionLoader` 的 `loadFunction` 方法加载函数,并调用该函数。调用结果会保存在一个数组中,作为 `callFunctions` 的返回值。
在 `main.ts` 中,我们创建一个 `FunctionLoader` 实例,创建一个 `Json` 对象,并调用 `callFunctions` 函数进行函数调用。函数调用的结果保存在 `results` 中,然后被打印出来。
阅读全文