[英]Typescript interface property to string
这个问题是6年前问的,我对Typescript了解很少! 我不想删除它,因为还有人在阅读这篇文章。
如果您希望变量的类型成为另一个的属性,则可以使用keyof
。
例子:
interface User {
name: string;
age: number;
}
const nameProperty: keyof User = 'name'; // ok
const ageProperty: keyof User = 'age'; // ok
const emailProperty: keyof User = 'email'; // not ok
如果你想要一个方法接受一个参数,它是另一个参数的属性,你可以使用泛型将两种类型链接在一起。
使用泛型 + keyof
:
const foo = <TObject extends object>(
object: TObject,
property: keyof TObject
) => {
// You can use object[property] here
};
foo({ a: 1, b: 2 }, 'a'); // ok
foo({ a: 1, b: 2 }, 'b'); // ok
foo({ a: 1, b: 2 }, 'c'); // not ok
使用泛型 + Record
示例:
const foo = <TKey extends string>(
object: Record<TKey, unknown>,
property: TKey
) => {
// You can use object[property] here
};
foo({ a: 1, b: 2 }, 'a'); // ok
foo({ a: 1, b: 2 }, 'b'); // ok
foo({ a: 1, b: 2 }, 'c'); // not ok
请不要使用此问题的答案! 如果您在某个时候重命名属性,Typescript 会自动告诉您存在错误。
客观的
我有一个接口 TypeScript :
interface IInterface{
id: number;
name: string;
}
我有一些方法可以输入属性的名称(字符串)。
例如:
var methodX = ( property: string, object: any ) => {
// use object[property]
};
我的问题是,当我调用methodX
,我必须在字符串中写入属性名称。
例如: methodX("name", objectX);
objectX 实现 IInterface 的地方
但这很糟糕:如果我重命名一个属性(假设我想将name
重name
为lastname
),我将不得不手动更新我的所有代码。
我不想要这种依赖。
由于打字稿接口没有 JS 实现,我不知道我怎么不能使用字符串。
我想要类似的东西: methodX(IInterface.name.propertytoString(), objectX);
我对 JS 很陌生,你有没有其他选择?
(可选)更多细节:为什么我需要将属性作为参数传递,为什么我不使用泛型方法?
我使用链接数据的方法:
linkData = <TA, TB>(
inputList: TA[],
inputId: string,
inputPlace: string,
outputList: TB[],
outputId: string ) => {
var mapDestinationItemId: any = {};
var i: number;
for ( i = 0; i < outputList.length; ++i ) {
mapDestinationItemId[outputList[i][outputId]] = outputList[i];
}
var itemDestination, itemSource;
for ( i = 0; i < inputList.length; ++i ) {
itemDestination = inputList[i];
itemSource = mapDestinationItemId[itemDestination[inputId]];
if ( itemSource ) {
itemDestination[inputPlace] = itemSource;
}
}
};
但是 TA 和 TB 可以有很多不同的 ID。 所以我不知道如何使它更通用。
2019 年更新:此答案已过时,请查看直接添加到问题中的更新。
basarat答案是个好主意,但它不适用于接口。
你不能写methodX(interfacePropertyToString(()=>interfaceX.porpertyname), objectX)
因为interfaceX
不是一个对象。
接口是抽象的,它们仅用于 TypeScript,它们不存在于 Javascript 中。
但是由于他的回答,我找到了解决方案:在方法中使用参数。
最后我们有:
interfacePropertyToString = ( property: (object: any) => void ) => {
var chaine = property.toString();
var arr = chaine.match( /[\s\S]*{[\s\S]*\.([^\.; ]*)[ ;\n]*}/ );
return arr[1];
};
我们必须使用[\\s\\S]
才能匹配多行,因为 Typescript 将(object: Interface) => {object.code;}
转换为多行函数。
现在你可以随意使用它:
interfacePropertyToString(( o: Interface ) => { o.interfaceProperty});
interfacePropertyToString( function ( o: Interface ) { o.interfaceProperty});
您可以编写一个函数来解析函数体以查找名称,例如:
methodX(getName(()=>something.name), objectX)
其中getName
将在函数体上执行toString
以获取形式为"function(){return something.name}"
的字符串,然后对其进行解析以获取"name"
。
注意:然而,这有一种破坏的趋势,这取决于你如何缩小它。
对于支持 Proxy 类的浏览器:
function propToString<T>(obj?: T): T {
return new Proxy({}, {
get({}, prop) {
return prop;
}
}) as T;
}
class Foo {
bar: string;
fooBar: string;
}
console.log(propToString<Foo>().bar, propToString(new Foo()).fooBar);
// Prints: bar fooBar
// Cache the values for improved performance:
const Foo_bar = propToString<Foo>().bar;
我稍微改变了basarat代码,因此我们可以将其用作通用代码:
const P = <T>( property: (object: T) => void ) => {
const chaine = property.toString();
const arr = chaine.match( /[\s\S]*{[\s\S]*\.([^\.; ]*)[ ;\n]*}/ );
return arr[1];
};
和示例用法:
console.log(P<MyInterface>(p => p.propertyName));
有点相关的问题 - 如何获取/设置属性路径的值。 我为此编写了两个类:
export class PropertyPath {
static paths = new Map<string, PropertyPath>()
static get<T, P>(lambda: (prop:T) => P) : PropertyPath {
const funcBody = lambda.toString();
var ret : PropertyPath = this.paths[funcBody];
if (!ret) {
const matches = funcBody.match( /(?:return[\s]+)(?:\w+\.)((?:\.?\w+)+)/ ); //first prop ignores
var path = matches[1];
ret = new PropertyPath(path.split("."));
this.paths[funcBody] = ret;
}
return ret;
};
path : Array<string>
constructor(path : Array<string>) {
this.path = path
}
getValue( context : any) {
const me = this;
var v : any;
return this.path.reduce( (previous, current, i, path) => {
try {
return previous[current];
}
catch (e) {
throw {
message : `Error getting value by path. Path: '${path.join(".")}'. Token: '${current}'(${i})`,
innerException: e
};
}
}, context)
}
setValue( context : any, value : any) {
const me = this;
var v : any;
this.path.reduce( (previous, current, i, path) => {
try {
if (i == path.length - 1) {
previous[current] = value
}
return previous[current];
}
catch (e) {
throw {
message : `Error setting value by path. Path: '${path.join(".")}'. Token: '${current}'(${i}). Value: ${value}`,
innerException: e
};
}
}, context)
}
}
用法示例:
var p = PropertyPath.get((data:Data) => data.person.middleName)
var v = p.getValue(data)
p.setValue(data, newValue)
加点糖:
export class PropertyPathContexted {
static get<T, P>(obj : T, lambda: (prop:T) => P) : PropertyPathContexted {
return new PropertyPathContexted(obj, PropertyPath.get(lambda));
};
context: any
propertyPath: PropertyPath
constructor(context: any, propertyPath: PropertyPath) {
this.context = context
this.propertyPath = propertyPath
}
getValue = () => this.propertyPath.getValue(this.context)
setValue = ( value : any) => {this.propertyPath.setValue(this.context, value) }
}
和用法:
var p = PropertyPathContexted.get(data, () => data.person.middleName)
var v = p.getValue()
p.setValue("lala")
我发现 React 中最新的双向数据绑定非常方便:
var valueLink = function<T, P>( context: T, lambda: (prop:T) => P) {
var p = PropertyPathContexted.get(context, lambda);
return {
value: p.getValue(),
requestChange: (newValue) => {
p.setValue(newValue);
}
}
};
render() {
var data = getSomeData()
//...
return (
//...
<input name='person.surnames' placeholder='Surnames' valueLink={valueLink(data, () => data.person.surnames)}/>
//...
)
}
如果您需要验证字符串,您可以根据interface
keyof
创建一个新type
。 如果你有一个对象,你可以使用keyof typeof
对象。
语言文件示例:
本地化服务.ts
import svSE from './languages/sv-SE';
import enUS from './languages/en-US';
import arSA from './languages/ar-SA';
import { ILanguageStrings } from './ILanguageStrings';
/*
If more languages are added this could be changed to:
"sv-SE": svSE,
"en-US": enUS,
"ar-SA": arSA
*/
export const messages = {
"sv": svSE,
"en": enUS,
"ar": arSA
};
//Identical types
export type IntlMessageID = keyof typeof messages.en;
export type IntlMessageID2 = keyof ILanguageStrings;
ILanguageStrings.ts
export interface ILanguageStrings {
appName: string
narration: string
language: string
"app.example-with-special-charactes": string
}
en-US.ts
import { ILanguageStrings } from '../ILanguageStrings';
const language: ILanguageStrings = {
appName: "App Eng",
narration: "Narration",
language: "Language",
"app.example-with-special-charactes": "Learn React."
}
export default language;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.