TypeScript: أنواع الاتحاد وأنواع القيم الثابتة في TypeScript

let id: number | string;

id = 42;        // ✅ number Legal
id = "ABC";     // ✅ string Legal
id = true;      // ❌ boolean Not in a composite type

function printId(id: number | string) {
  console.log("YourID: ：" + id);
}

printId(42);       // ✅
printId("ABC");    // ✅
printId(true);     // ❌

function process(value: number | string) {
  // value.toString()   // ✅ number and string All of them toString
  // value.toUpperCase() // ❌ number None toUpperCase
  // value.toFixed(2)    // ❌ string None toFixed
}

let direction: "north" | "south" | "east" | "west";

direction = "north";    // ✅
direction = "up";       // ❌ "up" Not in a composite type

type HttpStatusCode = 200 | 301 | 404 | 500;

let code: HttpStatusCode = 200;   // ✅
let code2: HttpStatusCode = 201;  // ❌ 201 Not in a composite type

type YesNo = true | false;  // equivalent to boolean
type StrictTrue = true;     // It can only be true

type Role = "admin" | "editor" | "viewer";

function checkPermission(role: Role) {
  if (role === "admin") {
    console.log("Administrator：Full Access");
  } else if (role === "editor") {
    console.log("Editor：Editable Content");
  } else {
    console.log("Viewers：Read-only access");
  }
}

checkPermission("admin");   // ✅
checkPermission("editor");  // ✅
checkPermission("guest");   // ❌ Compilation Error——"guest" Not legal Role

Administrator：Full Access
Editor：Editable Content

function process(value: number | string) {
  if (typeof value === "string") {
    // In this branch，TypeScript knows value is string
    console.log(value.toUpperCase());  // ✅ string Methods
  } else {
    // In this branch，TypeScript knows value is number
    console.log(value.toFixed(2));     // ✅ number Methods
  }
}

function compare(a: string | number, b: string | boolean) {
  if (a === b) {
    // a and b equal，Their intersection type is string
    console.log(a.toUpperCase());  // ✅ Here a It must be string
  }
}

function process(input: { name: string } | { age: number }) {
  if ("name" in input) {
    console.log(input.name);  // ✅ Has name property，Inferred as { name: string }
  } else {
    console.log(input.age);   // ✅ None name，Inferred as { age: number }
  }
}

function processDate(value: Date | string) {
  if (value instanceof Date) {
    console.log(value.toISOString());  // ✅ Date Methods
  } else {
    console.log(value.toUpperCase());  // ✅ string Methods
  }
}

function formatValue(value: number | string | boolean): string {
  if (typeof value === "number") {
    return "Numbers：" + value.toFixed(2);
  } else if (typeof value === "string") {
    return "String：" + value.toUpperCase();
  } else {
    return "Boolean：" + value;
  }
}

console.log(formatValue(3.14159));
console.log(formatValue("hello"));
console.log(formatValue(true));

Numbers：3.14
String：HELLO
Boolean：true

interface Circle {
  kind: "circle";       // Identifiable Attributes
  radius: number;
}

interface Rectangle {
  kind: "rectangle";    // Identifiable Attributes
  width: number;
  height: number;
}

type Shape = Circle | Rectangle;

function getArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;   // ✅ Accessible radius
  } else {
    return shape.width * shape.height;     // ✅ Accessible width、height
  }
}

type Result = string | undefined;

function search(query: string): Result {
  if (query.length === 0) return undefined;
  return "Found：" + query;
}

let result = search("TypeScript");
if (result !== undefined) {
  console.log(result.toUpperCase());  // ✅ narrowed to string
}

type RequestStatus = "idle" | "loading" | "success" | "error";

interface RequestState {
  status: RequestStatus;
  data?: string;
  error?: string;
}

function renderState(state: RequestState): string {
  switch (state.status) {
    case "idle":
      return "Waiting......";
    case "loading":
      return "Loading......";
    case "success":
      return "Success：" + state.data;    // ✅ success in that state data Existence
    case "error":
      return "Error：" + state.error;   // ✅ error in that state error Existence
  }
}

type Shape = "circle" | "square";

function getIcon(shape: Shape): string {
  switch (shape) {
    case "circle": return "⭕";
    case "square": return "⬜";
    default:
      // If all case It's all taken care of.，shape Here, the type is never
      const _exhaustiveCheck: never = shape;  // ✅ If omitted case，An error will occur here
      return _exhaustiveCheck;
  }
}

type TrafficLight = "red" | "yellow" | "green";

function getAction(light: TrafficLight): string {
  switch (light) {
    case "red": return "Stop";
    case "yellow": return "Note";
    // Intentional omission "green" 's case
    default:
      // If you add the next line，TypeScript It will throw an error：
      // You cannot convert the type "green" Assignment to a Type "never"
      const exhaustive: never = light;
      return "Unknown";
  }
}

// Executed successfully