W3Schools Tryit Editor

// Literal Types with Objects Example
// This demonstrates how literal types can be used with objects in TypeScript

// In TypeScript, we would define these types:
// type HTTPSuccess = {
//   status: 200 | 201 | 204;
//   statusText: "OK" | "Created" | "No Content";
//   data: any;
// };
// 
// type HTTPError = {
//   status: 400 | 401 | 403 | 404 | 500;
//   statusText: "Bad Request" | "Unauthorized" | "Forbidden" | "Not Found" | "Internal Server Error";
//   error: string;
// };
//
// type HTTPResponse = HTTPSuccess | HTTPError;

// Validate HTTP success response
function isHTTPSuccess(response) {
  const validStatuses = [200, 201, 204];
  const validTexts = ["OK", "Created", "No Content"];
  
  return (
    validStatuses.includes(response.status) && 
    validTexts.includes(response.statusText) && 
    response.data !== undefined
  );
}

// Function to handle both success and error responses
function handleResponse(response) {
  if (response.status >= 200 && response.status < 300) {
    console.log(`Success: ${response.statusText}`);
    console.log(response.data);
  } else {
    console.log(`Error ${response.status}: ${response.statusText}`);
    console.log(`Message: ${response.error}`);
  }
}

// Example success response
const successResponse = {
  status: 200,
  statusText: "OK",
  data: { username: "john_doe", email: "john@example.com" }
};

// Example error response
const errorResponse = {
  status: 404,
  statusText: "Not Found",
  error: "User not found in database"
};

// Handle both types of responses
console.log("Success response example:");
handleResponse(successResponse);

console.log("\nError response example:");
handleResponse(errorResponse);

// Example of an invalid response (would cause TypeScript compile error)
console.log("\nInvalid response example (would be caught at compile time in TypeScript):");
try {
  const invalidResponse = {
    status: 299, // Invalid status in our type definition
    statusText: "Custom Status", // Invalid statusText in our type definition
    data: { result: "some data" }
  };
  
  if (!isHTTPSuccess(invalidResponse)) {
    throw new Error(`Invalid HTTP success response: status ${invalidResponse.status} with text "${invalidResponse.statusText}" is not defined in our types`);
  }
  
  handleResponse(invalidResponse);
} catch (error) {
  console.log(error.message);
}

// In TypeScript this would be enforced by the type system
console.log("\nIn TypeScript, this would be enforced at compile time:");
console.log("// Invalid: status must be one of: 200, 201, 204");
console.log("const badResponse: HTTPSuccess = {");
console.log("  status: 202, // Error: Type '202' is not assignable to type '200 | 201 | 204'");
console.log("  statusText: \"OK\",");
console.log("  data: {}");
console.log("};");

Success response example:
Success: OK
{ username: 'john_doe', email: 'john@example.com' }

Error response example:
Error 404: Not Found
Message: User not found in database

Invalid response example (would be caught at compile time in TypeScript):
Invalid HTTP success response: status 299 with text "Custom Status" is not defined in our types

In TypeScript, this would be enforced at compile time:
// Invalid: status must be one of: 200, 201, 204
const badResponse: HTTPSuccess = {
  status: 202, // Error: Type '202' is not assignable to type '200 | 201 | 204'
  statusText: "OK",
  data: {}
};