当前位置：首页 > news >正文

茂名网站制作推广模板网站免费

news 2026/4/6 8:06:05

茂名网站制作推广,模板网站免费,武汉城市建设集团,合肥做网站的的公司如今的前端开发typescript 已经成为一项必不可以少的技能了，但是频繁的定义Interface接口会给我带来许多工作量，我想了想如何来减少这些非必要且费时的工作量呢，于是决定写一个函数，将对象放进它自动帮我们转换成Interface接口&am…

如今的前端开发typescript
已经成为一项必不可以少的技能了，但是频繁的定义Interface接口会给我带来许多工作量，我想了想如何来减少这些非必要且费时的工作量呢，于是决定写一个函数，将对象放进它自动帮我们转换成Interface接口，接下来就是复制粘贴的工作了，当然了如果需要调整》我们可以在手动调一下，比起一个个的定义花费的时间肯定是短了很多的。我们还以自己去完善这个函数，以达到更多你想要的效果，动手能力强的小伙伴可以尝试起来了。

可以将以下代码放入ts文件中：

// 自写一个函数将js对象转为ts接口 （参数1 js对象，参数2 ts接口名）function generateInterface(obj: any,interfaceName: string = 'myGeneratedInterface'): string {const getType = (value: any): string => {if (value === null) {return 'any'} else if (Array.isArray(value)) {const arrayItemType = value.length > 0 ? getType(value[0]) : 'any'return `${arrayItemType}[]`} else if (typeof value === 'object') {// interfaceName + 'Item'return generateInterface(value, '')} else {if (typeof value === 'function') {return 'Function'}return typeof value}}const properties: string[] = []for (const key in obj) {if (obj.hasOwnProperty(key)) {const value = obj[key]const type = getType(value)properties.push(`${key}: ${type};`)}}// 最外层的添加 interface ${interfaceName}let interfaceCodeif (interfaceName) {interfaceCode = `interface ${interfaceName} {
${properties.join('\n    ')}
}`} else {interfaceCode = `{
${properties.join('\n    ')}
}`}return interfaceCode}// 用该对象测试const myObject = {name: 'John',age: 18,isStudent: true,hobbies: ['reading', 'coding'],address: {city: 'Example City',zipCode: 12345,hobbies2: ['reading', 'coding'],isStudent2: true,},nullValue: null,}// 打印测试下转换的结果如何console.log(generateInterface(myObject, 'Person'))// 最终打印结果：// interface Person {//     name: string;//     age: number;//     isStudent: boolean;//     hobbies: string[];//     address: {//         city: string;//         zipCode: number;//         hobbies2: string[];//         isStudent2: boolean;//     };//     nullValue: any;// }