ts中如何得到一个类型中所有类型为number的属性名
时间: 2024-03-19 07:44:50 浏览: 26
可以使用 TypeScript 中的 `keyof` 操作符和 `infer` 关键字,结合条件类型来实现。
以下是一个示例代码:
```typescript
type NumberKeys<T> = {
[K in keyof T as T[K] extends number ? K : never]: K;
}[keyof T];
interface Person {
name: string;
age: number;
address: string;
salary: number;
}
type PersonNumberKeys = NumberKeys<Person>; // "age" | "salary"
```
在这个例子中,我们定义了一个泛型类型 `NumberKeys<T>`,它会返回类型 `T` 中所有属性名组成的联合类型中,类型为 `number` 的属性名组成的联合类型。
具体实现是通过使用映射类型和条件类型来实现的。我们首先遍历 `T` 的所有属性名,然后使用条件类型判断该属性对应的属性值是否为 `number` 类型。如果是 `number` 类型,则将该属性名保留在返回的联合类型中,否则将它映射为 `never` 类型,最后我们使用索引类型查询 `keyof T`,得到所有保留下来的属性名组成的联合类型。
在上面的示例中,`PersonNumberKeys` 的类型就是 `"age" | "salary"`。
相关问题
ts中如何声明一个类型,它是由另一个类型中的属性构成的联合类型
在 TypeScript 中,我们可以使用交叉类型(Intersection Types)来表示一个类型由多个类型组成。而要声明一个类型,它是由另一个类型中的属性构成的联合类型,我们可以使用索引访问类型(Index Access Types)和联合类型的组合来实现。
例如,假设有一个类型 `Person`,它有 `name` 和 `age` 两个属性:
```typescript
type Person = {
name: string;
age: number;
}
```
现在我们想要声明一个类型,它是由 `Person` 类型中的 `name` 和 `age` 属性构成的联合类型。可以使用索引访问类型和联合类型的组合来实现:
```typescript
type PersonProps = Person[keyof Person]; // 等价于 string | number
```
上面的代码中,`keyof Person` 表示获取 `Person` 类型的所有属性名,即 `"name"` 和 `"age"`。然后通过索引访问类型获取这些属性对应的类型,即 `Person["name"]` 和 `Person["age"]`。最后使用联合类型将这些属性的类型连接起来,得到的类型即为 `string | number`,表示一个变量可以是字符串或数字类型中的一种。
Store中定义ts类型,然后引入到vue文件中使用
当你在 Vue 的项目中使用 Vuex 进行状态管理时,可以通过在 Store 中定义 TypeScript 类型,并将其引入到 Vue 文件中进行使用。下面是一个示例:
先,在 Vuex 的 Store 文件中定义类型:
```typescript
// store.ts
import { createStore } from 'vuex';
interface RootState {
count: number;
todos: string[];
}
export default createStore<RootState>({
state: {
count: 0,
todos: [],
},
mutations: {
// mutations...
},
actions: {
// actions...
},
getters: {
// getters...
},
});
```
在上述示例中,我们定义了 `RootState` 类型,表示整个 Vuex store 的根状态。然后,我们使用 `createStore<RootState>()` 函数创建了一个 Vuex store,并传入了 `RootState` 类型参数。
接下来,在 Vue 文件中使用该 Store:
```vue
<template>
<div>
<p>Count: {{ count }}</p>
<ul>
<li v-for="todo in todos" :key="todo">{{ todo }}</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
computed: {
count(): number {
return this.$store.state.count;
},
todos(): string[] {
return this.$store.state.todos;
},
},
});
</script>
```
在上述示例中,我们使用 `useStore` 函数从 Vuex 中获取 store 实例,并通过 `$store.state` 访问其中的状态。根据在 Store 中定义的类型,我们可以在计算属性中指定相应的类型,以确保类型安全。
通过以上步骤,我们可以在 Vuex Store 中定义 TypeScript 类型,并在 Vue 组件中使用这些类型来获得类型检查和自动补全的好处。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)