Question

我想知道c函数中的类型printTypeOf。这是我的代码：

type Email ={
    email:string,
}
type Phone ={
    phone:string,
}
type ContactInfo = Email | Phone;

function printTypeOf(c: ContactInfo) {
    console.log(typeof c)
}

const x: Email = { email: "X" };
printTypeOf(x);

当前输出为object，但我需要确定它是Email还是Phone

Answer 1

您无法打印类型名称，因为一旦将TypeScript转换为JavaScript，所有类型信息都会丢失。它会打印object，因为一旦运行代码，TypeScript便会变成'='。

Answer 2

您无法打印该类型，因为该类型在运行时中不存在。此时仅存在类型表示形式，在您的情况下，假设Email的表示形式是对象{ email: string}。真的就是您所拥有的一切。

typeof只会以主类型名称typeof的形式输出字符串。因此，该运算符不可能为您提供有关自定义类型的任何线索。

为了在运行时区分结构，它们需要有所不同（发现是什么）。它们已经存在，一个拥有email，另一个拥有phone。这些道具足以做条件和检查，就像其他答案所说的那样。但是更好的方法是创建特殊属性，即判别式discriminant in tagged union。这种特殊属性使您可以：

通过检查应用自定义逻辑
运行时类型表示之间有明显的区别

在下面的代码中，这种判别式具有_type属性的形式，但是您可以选择任何对您有意义的属性。

  type Email = {
    email: string,
    _type: 'Email' // discriminant
  }

  const makeEmail = (email: string): Email => ({
    email,
    _type: 'Email'
  }); // value constructor, very handy for DRY

  type Phone = {
    phone: string,
    _type: 'Phone' // discriminant
  }

  const makePhone = (phone: string): Phone => ({
    phone,
    _type: 'Phone'
  }); // value constructor, very handy for DRY


  type ContactInfo = Email | Phone;

  function printTypeOf(c: ContactInfo) {
    console.log(c._type); // we log discriminant
  }

  const email = makeEmail('X');
  const phone = makePhone('99');
  printTypeOf(email); // logs Email
  printTypeOf(phone); // logs Phone

Answer 3

type Email ={
    email: string,
    type: 'email',
}
type Phone ={
    phone: string,
    type: 'phone'
}
type ContactInfo = Email | Phone;

function printTypeOf(c: ContactInfo) {
    console.log(c.type); // 'email' or 'phone' 
    switch (c.type) { 
        case 'email':
            console.log(c.email);
            break;
        case 'phone':
            console.log(c.phone);
    }
}

只需添加类型信息。但是您将在该类型的初始化中定义它：

const contactInfo: ContactInfo = {
    type: 'email',
    email: 'email'
}

playground

Answer 4

我相信您可以做这样的事情，

function printTypeOf(c: ContactInfo) {
    if(c.hasOwnProperty('email')){
        console.log('email');
    } else if(c.hasOwnProperty('phone')){
        console.log('phone');
    }
}

打字稿查找联合类型的类型

4 个答案: