typescript 将一个接口的脚本副本键入到另一个接口,但仅限于所选字段

6vl6ewon  于 2022-12-01  发布在  TypeScript
关注(0)|答案(2)|浏览(99)

我刚开始学习 typescript 。我只是想知道我是否可以复制一个界面数据到另一个,但只能得到特定的数据。

interface user {
 first_name: string;
 last_name: string;
}

interface user_detail {
 email: string;
 username: string;
 first_name: string;
 last_name: string;
}

const data : user_detail ={
 email: "test@gmail.com";
 username: "test";
 first_name: "test";
 last_name: "test";
}

const _data : user = data;
console.log('_data ->', _data);

我想要的是_data只包含用户的名字和姓氏
先谢过了

h7wcgrx3

h7wcgrx31#

TypeScript只是一个用类型信息注解代码的工具。它可以帮助您在代码运行之前捕获错误并增强IDE,但TypeScript背后的基本原理之一是,当代码从TypeScript编译为JavaScript时,它只对代码进行最小的更改。大多数情况下,在编译过程中所做的唯一更改是删除TypeScript的类型注解。
要完成上述任务,需要编写自己的函数,该函数接受user_detail类型的对象并返回user类型的对象,然后通过该函数传递data变量以删除不需要的属性。就像常规JavaScript一样,但要在其上标注类型信息:

interface user {
 first_name: string;
 last_name: string;
}

interface user_detail {
 email: string;
 username: string;
 first_name: string;
 last_name: string;
}

const data : user_detail ={
 email: "test@gmail.com",
 username: "test",
 first_name: "test",
 last_name: "test",
}

function getUser(userDetail: user_detail): user {
  const user: user = {
    first_name: userDetail.first_name,
    last_name: userDetail.last_name,
  };

  return user;
}

const _data : user = getUser(data);
console.log('_data ->', _data);

TypeScriptPlayground

3zwjbxry

3zwjbxry2#

基于Mark Hanna's answerthis amazing answer using Object Destructuring构建:

interface user_detail {
  email: string;
  username: string;
  first_name: string;
  last_name: string;
}

const getUser = ({first_name, last_name}: user_detail) => ({first_name, last_name});

type user = ReturnType<typeof getUser>;

上述方法通过首先创建一个复制字段子集的函数,然后使用其返回类型定义user,从而减少了重复字段名称的数量。
ReturnType是TypeScript的“实用程序类型”之一。如果只需要定义user类型,那么Pick实用程序类型可能会有所帮助:

type user = Pick<user_detail, "first_name" | "last_name">;

相关问题