TypeScript: الأسماء المستعارة للأنواع في TypeScript (type)

type ID = number;
type Name = string;
type Active = boolean;

let userId: ID = 42;
let userName: Name = "Charlie";
let isActive: Active = true;

type User = {
  name: string;
  age: number;
  email: string;
};

let user: User = {
  name: "Charlie",
  age: 20,
  email: "xiaoming@example.com"
};

type GreetFunction = (name: string) => string;

let greet: GreetFunction = (name) => `Hello，${name}！`;

console.log(greet("Charlie"));  // "Hello，Charlie！"

type Status = "pending" | "active" | "completed" | "cancelled";
type Role = "admin" | "editor" | "viewer";
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";

let orderStatus: Status = "pending";
let userRole: Role = "admin";
let method: HttpMethod = "GET";

type HttpStatus = 200 | 301 | 400 | 404 | 500;
type Bit = 0 | 1;

let code: HttpStatus = 200;
let flag: Bit = 1;

type Result = string | Error;
type Id = number | string | undefined;

let output: Result = "Success";
output = new Error("Failure");  // ✅ That's also legal

type ApiResponse<T> = {
  status: number;
  message: string;
  data: T;
};

type User = {
  id: number;
  name: string;
  email: string;
};

type UserResponse = ApiResponse<User>;

let response: UserResponse = {
  status: 200,
  message: "Achieve Success",
  data: { id: 1, name: "Charlie", email: "xiao@example.com" }
};

console.log(`Status：${response.status}`);
console.log(`User：${response.data.name}`);

Status：200
User：Charlie

type Named = { name: string };
type Aged = { age: number };
type Person = Named & Aged;

let person: Person = {
  name: "Charlie",
  age: 20
  // Both must be present name and age
};

type HasId = { id: number };
type Timestamped = { createdAt: Date; updatedAt: Date };
type SoftDeletable = { deletedAt: Date | null };

type Entity = HasId & Timestamped & SoftDeletable;

let article: Entity = {
  id: 1,
  createdAt: new Date(),
  updatedAt: new Date(),
  deletedAt: null
};

type A = { value: string };
type B = { value: number };
type C = A & B;

// C 's value The type is string & number = never
// No value can be both string and number
let c: C = { value: "" };  // ❌ You cannot string Assigned never

type Point = [x: number, y: number];
type KeyValuePair = [key: string, value: number];
type RGB = [red: number, green: number, blue: number];

let coord: Point = [10, 20];
let entry: KeyValuePair = ["score", 95];
let color: RGB = [255, 128, 0];

// Deconstruction
let [x, y] = coord;
let [key, val] = entry;

type EventName = "click" | "focus" | "blur";
type EventHandler = `on${Capitalize<EventName>}`;
// Results："onClick" | "onFocus" | "onBlur"

type CSSProperty = "margin" | "padding";
type CSSDirection = "top" | "right" | "bottom" | "left";
type CSSRule = `${CSSProperty}-${CSSDirection}`;
// Results："margin-top" | "margin-right" | ... | "padding-left"

type EventType = "click" | "change" | "submit";
type HandlerName = `on${Capitalize<EventType>}`;
// "onClick" | "onChange" | "onSubmit"

interface EventHandlers {
  onClick?: (x: number, y: number) => void;
  onChange?: (value: string) => void;
  onSubmit?: (data: FormData) => void;
}

// Usage——handler Type hints for names，I won't spell it wrong
let handlers: EventHandlers = {
  onClick: (x, y) => console.log(`Click：(${x}, ${y})`),
  onChange: (value) => console.log(`Value change：${value}`)
};

// Executed successfully

Required Features              → Select
───────────────────────────────
Composite Types A | B          → type
Aliases for Basic Types            → type
Tuple [A, B]            → type
Template Literal Types          → type
Object Shape + Inheritance Required     → interface
Object Shape + Statement Merger     → interface
Simple Object Shapes          → Either is fine，As long as the team is on the same page, that's fine.

type Method = "GET" | "POST" | "PUT" | "DELETE";
type Resource = "users" | "posts" | "comments";
type ApiEndpoint = `${Method} /api/${Resource}`;

// Valid values: "GET /api/users", "POST /api/posts", etc.
let endpoint: ApiEndpoint = "GET /api/users";

// Invalid — caught at compile time
// endpoint = "PATCH /api/users";  // ❌ PATCH not in Method
// endpoint = "GET /api/orders";   // ❌ orders not in Resource

type EventName = "click" | "focus";
type HandlerName = `on${Capitalize<EventName>}`;
// "onClick" | "onFocus"

let handler: HandlerName = "onClick";
console.log(handler);

onClick