vue-i18n从JS转换为TS（vue js）

17 浏览
0 Comments

vue-i18n从JS转换为TS（vue js）

这是我的代码的一部分：

const myObj: object = {}
const propname = 'propname'
myObj[propname] = 'string'

但是我收到了错误信息：

ERROR in path/to/file.ts(4,1)
TS7053: 元素隐式具有 'any' 类型，因为类型为 '"propname"' 的表达式无法用于类型 '{}' 的索引。
  属性 'propname' 在类型 '{}' 上不存在。

这里有什么问题，我该如何解决？

0

3 答案

0 Comments

问题出现的原因是在使用interface/class定义时，无法使用object[prop]来获取属性值，会抛出错误。解决方法是使用keyof关键字来解决该问题，代码如下：

interface SomeInterface {
  propertyA: string;
  propertyB: string;
}
const object: SomeInterface = {propertyA: 'A', propertyB: 'B'};
for ( const prop in object ) {
  const value = object[prop]; // <-- 会抛出错误
  const typedValue = object[prop as keyof SomeInterface]; // <-- 使用keyof关键字解决
}

另外一种解决方法是在interface/class中添加一个泛型属性，这样就可以通过object[prop]获取属性值了，但这会导致类型不安全。代码如下：

interface SomeInterface {
  propertyA: string;
  propertyB: string;
  [key: string]: any;
}

以上的代码行`const typedValue = object[property as keyof SomeInterface]`也是解决该问题的关键。这行代码也帮助了我，谢谢！

0
0 Comments

在上述内容中，出现了一个"TS7053 Element implicitly has an 'any' type"的错误。造成这个错误的原因是在通过数组访问方式访问属性时，元素的类型没有被明确指定。

解决这个问题的方法有以下几种：

解决方法1：隐式定义索引签名

const myObj: {[key: string]: any} = {}

const prop = 'propname'

myObj[prop] = 'string'

解决方法2：使用接口提供索引签名

interface IStringIndex {

[key: string]: any

}

const myObj: IStringIndex = {}

const prop = 'propname'

myObj[prop] = 'string'

解决方法3：使用接口并扩展<Record>实用类型

interface IStringIndex extends Record<string, any> {}

const myObj: IStringIndex = {}

const prop = 'propname'

myObj[prop] = 'string'

解决方法4：使用类型别名定义索引签名

type MyObject = {

[key: string]: any

propname?: any

}

const myObj: MyObject = {}

const prop = 'propname'

myObj[prop] = 'string'

解决方法5：结合接口描述索引签名和类型别名描述有效属性

interface IStringIndex extends Record<string, any> {}

type MyObject = IStringIndex & {

propname?: string

}

const myObj: MyObject = {}

const prop = 'propname'

myObj[prop] = 'string'

解决方法6：定义有效的（字符串）属性名列表

type ValidProps = 'propname' | 'value'

interface IStringIndex extends Record<ValidProps, any> {}

const myObj: IStringIndex = {

propname: 'my prop',

value: 123

}

const prop = 'propname'

myObj[prop] = 'string'

需要注意的是，在分配对象时，ValidProps列表中的所有属性都必须存在。

以上是解决"TS7053 Element implicitly has an 'any' type"错误的几种方法，其中解决方法3是有效的。

0
0 Comments

问题的出现原因是在定义对象的索引类型时没有明确指定是基于字符串的索引类型。

解决方法是通过给对象定义一个索引签名，指定索引类型为字符串，并将其值的类型设置为任意类型。可以使用以下两种方法来实现：

方法一：

const myObj: {[index: string]: any} = {}

方法二：

const myObj: Record = {}

以上两种方法都可以解决该问题。

0