码迷,mamicode.com
首页 > 其他好文 > 详细

[TypeScript] Model Alternatives with Discriminated Union Types in TypeScript

时间:2017-11-13 19:58:54      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:cat   paypal   location   red   union   number   ons   show   edit   

TypeScript’s discriminated union types (aka tagged union types) allow you to model a finite set of alternative object shapes in the type system. The compiler helps you introduce fewer bugs by only exposing properties that are known to be safe to access at a given location. This lesson shows you how to define a generic Result<T> type with a success case and a failure case. It also illustrates how you could use discriminated unions to model various payment methods.

 

In the example, we make Result type restrict the return type, if success, it should return value, if not, return error prop.

type Result<T> =
  | { success: true; value: T }
  | { success: false; error: string };

function tryParseInt(text: string): Result<number> {
  if (/^-?\d+$/.test(text)) {
    return {
        success: true,
        value: parseInt(text, 10)
    };
  }
  return {
    success: false,
    error: "Invalid number format"
  };
}

const result = tryParseInt("42");

if (result.success) {
 result; // refer to success case only
 console.log(result.value)
} else {
  result; // refer to error case only
}

 

interface Cash {
kind: "cash";
}

interface PayPal {
kind: "paypal";
email: string;
}

interface CreditCard {
kind: "creditcard";
cardNumber: string;
securityCode: string;
}

type PaymentMethod = Cash | PayPal | CreditCard;

function stringifyPaymentMethod(method: PaymentMethod): string {
switch (method.kind) {
    case "cash":
        return "Cash";
    case "paypal":
        return `PayPal (${method.email})`;
    case "creditcard":
        return "Credit Card";
}
}

const myPayment = {
kind: "paypal",
email: "typescript@egghead.io"
}

console.log(stringifyPaymentMethod(myPayment))

 

[TypeScript] Model Alternatives with Discriminated Union Types in TypeScript

标签:cat   paypal   location   red   union   number   ons   show   edit   

原文地址:http://www.cnblogs.com/Answer1215/p/7827395.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!