TS在项目中应用

1  指定某个值的类型与对象中某个特定键的值的类型相同

在 TypeScript 中,如果你想要指定某个值的类型与对象中某个特定键的值的类型相同,你可以使用映射类型和索引类型来实现这一点。这里有一个基本的步骤来完成这个任务:

  1. 定义一个类型来表示对象
  2. 使用映射类型来创建一个新的类型,其中包含你感兴趣的键
  3. 使用索引类型来访问那个键的类型
  4. 将这个类型应用于你想要限制的值

让我们通过一个例子来说明这个过程:

假设我们有一个对象 Person,它有多个属性,其中一个属性是 age,我们希望有一个变量 myAge 的类型就是 Person 对象中 age 键的类型。

interface Person {
  name: string;
  age: number;
  isStudent: boolean;
}

// 创建一个映射类型,只包含我们感兴趣的键
type AgePropertyOf<T> = T extends { age: infer Age } ? Age : never;

// 现在我们可以定义一个变量,其类型为 Person 中 age 键的类型
let myAge: AgePropertyOf<Person>;

// 这里 myAge 的类型就是 number

上面的 AgePropertyOf 类型定义使用了条件类型和索引类型。T extends { age: infer Age } 是一个条件类型,它检查类型 T 是否具有一个 age 属性,如果是,则使用 infer 关键字推断出 age 属性的类型,并命名为 Age。如果 T 不具有 age 属性,则结果类型是 never

然而,这种方法只适用于确切知道键名的情况。如果键名是动态的,你可以使用字符串字面量类型或者模板字面量类型来定义键名,然后使用索引类型来访问对象中对应的值类型。

例如,如果键名是动态的,你可以这样做:

type KeyOfPerson = keyof Person; // "name" | "age" | "isStudent"

function getValueByKey<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const person: Person = { name: "Alice", age: 30, isStudent: false };
const age: AgePropertyOf<Person> = getValueByKey(person, "age"); // age 的类型是 number

在这个例子中,getValueByKey 函数接受一个对象和一个键名,返回键名对应的值。由于键名 K 被限制为 T 的键,所以返回值的类型是 T[K],即对象 T 上由 K 指定的键的值的类型。

 2 如果你想要指定一个值必须是对象中特定两个键的类型,而排除其他键。

在 TypeScript 中,如果你想要指定一个值必须是对象中特定两个键的类型,而排除其他键,你可以使用 keyof 和类型交集来实现。首先,你需要定义一个接口或类型别名来描述对象的结构,然后使用 keyof 获取所有可能的键,并通过类型交集 & 来限制到你感兴趣的那两个键。

例如,假设我们有一个如下的对象类型:

interface MyObject {
    name: string;
    age: number;
    location: string;
}

如果我们要确保一个变量只能是 'name' 或 'age' 键,我们可以这样做:

type NameOrAge = 'name' | 'age';

function getSpecificProperty<T extends MyObject>(obj: T, key: NameOrAge): T[NameOrAge] {
    return obj[key];
}

const myObj: MyObject = {
    name: "Alice",
    age: 30,
    location: "Wonderland"
};

const nameOrAgeValue = getSpecificProperty(myObj, 'name'); // 正确
const locationValue = getSpecificProperty(myObj, 'location'); // 错误,因为 'location' 不是 NameOrAge 类型

在这个例子中,NameOrAge 是一个类型别名,它只包括 'name' 和 'age'getSpecificProperty 函数的第二个参数被限制为 NameOrAge 类型,这确保了你只能传入这两个键之一。

然而,如果你想使用 keyof 和类型交集来实现,可以这样:

type SpecificKey = keyof MyObject & ('name' | 'age');

function getSpecificPropertyUsingKeyOf<T extends MyObject>(obj: T, key: SpecificKey): T[SpecificKey] {
    return obj[key];
}

const specificValue = getSpecificPropertyUsingKeyOf(myObj, 'name'); // 正确
const wrongKey = getSpecificPropertyUsingKeyOf(myObj, 'location'); // 错误,因为 'location' 不是 SpecificKey 类型

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-i18n 是一个用于在 Vue.js 应用程序实现国际化的库。它提供了一种简单而灵活的方式来处理多语言的需求。在 TypeScript 使用 vue-i18n,你可以按照以下步骤进行配置和应用: 1. 安装 vue-i18n:在项目使用 npm 或者 yarn 安装 vue-i18n。 2.***json` 和 `en-US.json` 文件,分别用于存放文和英文的翻译内容。 3. 配置 vue-i18n:在项目的入口文件,引入 vue-i18n 并进行配置。你可以创建一个 `i18n.ts` 文件,内容如下: ```typescript import Vue from 'vue'; import VueI18n from 'vue-i18n'; Vue.use(VueI18n); const messages = { 'zh-CN': require('./locales/zh-CN.json'), 'en-US': require('./locales/en-US.json'), }; const i18n = new VueI18n({ locale: 'zh-CN', // 默认语言 fallbackLocale: 'en-US', // 当当前语言不存在时使用的语言 messages, }); export default i18n; ``` 4. 在组件使用翻译:在需要翻译的组件使用 `$t` 方法来获取翻译内容。例如: ```vue <template> <div> <p>{{ $t('message.welcome') }}</p> </div> </template> <script> export default { name: 'MyComponent', }; </script> ``` 5. 在语言文件定义翻译内容:在 `zh-CN.json` 和 `en-US.json` 文件,定义对应的翻译内容。例如: ```json // zh-CN.json { "message": { "welcome": "欢迎使用 Vue-i18n" } } // en-US.json { "message": { "welcome": "Welcome to Vue-i18n" } } ``` 这样,你就可以根据当前的语言环境来动态显示对应的翻译内容了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值