TypeScript: تأكيدات الأنواع في TypeScript

// as Grammar（Recommendations，JSX "Must" must be used in）
let value: any = "hello";
let length1: number = (value as string).length;

// Angle Bracket Syntax（Cannot be in JSX Used in）
let length2: number = (<string>value).length;

// Narrow：From broad types to narrow types（Common）
let value: string | number = "hello";
let str = value as string;       // Tell the compiler"I'm sure this is string"
console.log(str.toUpperCase());  // ✅

// Broadening：From Narrow Types to Wide Types（Less commonly used）
let name = "Charlie" as string;    // "Charlie" Type from literal "Charlie" Generalize to string

let value: any = 42;
let str = value as string;       // The compile-time type is string
console.log(typeof str);         // "number" —— At runtime, it is still number！
// console.log(str.toUpperCase()); // Runtime Crash！number None toUpperCase

// getElementById Back HTMLElement | null
let input = document.getElementById("myInput") as HTMLInputElement;
// After the assertion, you can use it directly. HTMLInputElement Properties of
console.log(input.value);        // ✅
console.log(input.placeholder);  // ✅

// A Safer Way to Write It——Check first null
let inputEl = document.getElementById("myInput");
if (inputEl instanceof HTMLInputElement) {
  console.log(inputEl.value);    // ✅ instanceof narrow，No assertion required
}

interface User {
  id: number;
  name: string;
  email: string;
}

// JSON.parse Back any——Specify the type using an assertion
let response = JSON.parse('{"id":1,"name":"Charlie","email":"xiao@example.com"}') as User;
console.log(response.name);  // ✅ Type: string

// A Safer Way to Write It——Runtime Validation (See Lesson 26)
function isUser(obj: any): obj is User {
  return typeof obj.id === "number"
    && typeof obj.name === "string"
    && typeof obj.email === "string";
}

let data = JSON.parse('...');
if (isUser(data)) {
  console.log(data.name);  // ✅ Type Guard Narrowing，Safer than assertions
}

interface Config {
  host: string;
  port: number;
}

// Direct Assignment——Check for Unnecessary Attributes
// let cfg: Config = { host: "localhost", port: 3000, debug: true };  // ❌

// Method 1：Type Assertion Bypass
let cfg = { host: "localhost", port: 3000, debug: true } as Config;  // ✅

// Method 2：Assign a value to the variable first, then pass it（Using Structured Type Compatibility）
let options = { host: "localhost", port: 3000, debug: true };
let cfg2: Config = options;  // ✅ Variable assignments do not perform unnecessary property checks

type SuccessResponse = {
  status: "success";
  data: { id: number; name: string };
};

type ErrorResponse = {
  status: "error";
  error: { code: number; message: string };
};

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse) {
  if (response.status === "success") {
    // Type Narrowing（Recommendations）
    console.log(response.data.name);
  } else {
    // Type Narrowing（Recommendations）
    console.log(response.error.message);
  }

  // Not recommended——Replace Narrowing with Assertions
  // let data = (response as SuccessResponse).data;  // Danger！
}

// Executed successfully

// None as const——widening Inference
let obj = { host: "localhost", port: 3000 };
// Type：{ host: string; port: number }
obj.host = "other";  // ✅ Can be modified

// With as const — exact literals + readonly
let config = { host: "localhost", port: 3000 } as const;
// Type：{ readonly host: "localhost"; readonly port: 3000 }
// config.host = "other";  // ❌ readonly
// config.port = 8080;     // ❌ readonly

// Regular Arrays
let arr = [1, 2, 3];
// Type：number[]

// as const Array——become readonly Tuple
let tuple = [1, 2, 3] as const;
// Type：readonly [1, 2, 3]
// tuple[0] = 10;  // ❌ readonly
// tuple.push(4);  // ❌ readonly

// Redux Stylistic action Type Definitions
const INCREMENT = "INCREMENT" as const;
const DECREMENT = "DECREMENT" as const;

// None as const → INCREMENT The type is string（Too wide）
// With as const → INCREMENT typee is "INCREMENT"（Exact Literals）

type Action = {
  type: typeof INCREMENT;
  payload: number;
} | {
  type: typeof DECREMENT;
  payload: number;
};

function reducer(state: number, action: Action): number {
  switch (action.type) {
    case "INCREMENT": return state + action.payload;
    case "DECREMENT": return state - action.payload;
  }
}

let value: string | null = "hello";

// Non-empty assertion——Tell the compiler"The value is not null"
console.log(value!.toUpperCase());  // ✅ Compilation successful

// Equivalent to asserting that
console.log((value as string).toUpperCase());

// DOM Element
let el = document.getElementById("app");
el!.innerHTML = "Hello";  // Use ! to assert non-null

// Assignment After the Optional Chain
let user: { name?: string } = { name: "Charlie" };
let nameLength = user.name!.length;  // Assertion name No undefined

// Function Arguments
function process(value: string | undefined) {
  // We"Know"When called value It can't be... undefined
  console.log(value!.toUpperCase());
}

let value: string | null = null;

// Compilation successful！But it crashes during runtime——value Actually, it is null
// console.log(value!.toUpperCase());  // Runtime Error：Cannot read property of null

// ✅ A Safer Way to Write It——Check first
if (value !== null) {
  console.log(value.toUpperCase());  // Type Narrowing，Compilation+All operations are safe
}

let value: string = "hello";

// ✅ string → string | number（From subtype to supertype，Compatibility）
let wide = value as string | number;

// ✅ string | number → string（From Parent Type to Child Type，May not be safe, but allowed）
let narrow = wide as string;

// ❌ string → number（Completely unrelated，Not allowed）
// let num = value as number;

let value: string = "hello";

// Through any Transit——Double Assertion
let num = value as unknown as number;  // Compilation successful！

// But at runtime value It's still string
console.log(typeof num);  // "string"
// num.toFixed(2);         // Runtime Crash！

Type Narrowing（if/typeof/instanceof/in）  → Safest，Use as a priority
Type Guard（Custom is Function）           → Safety，Collapse Complex Types
Non-empty assertion !                          → Use with caution，When it is determined that the value is not empty
as Assertion                             → Use less，When there is a clear reason
as const                            → Recommended for constant definitions
Double Assertion as unknown as T            → Highly not recommended，99%This is incorrect usage.

interface User {
  id: number;
  name: string;
  email: string;
}

// ❌ Unsafe——Blind assertions API Response
function fetchUser1(id: number): User {
  let data = JSON.parse(localStorage.getItem(`user:${id}`) ?? "{}") as User;
  return data;  // data May not match User Structure
}

// ✅ Safety——Runtime Validation + Type Guard
function isUser(obj: any): obj is User {
  return obj
    && typeof obj.id === "number"
    && typeof obj.name === "string"
    && typeof obj.email === "string";
}

function fetchUser2(id: number): User | null {
  let raw = localStorage.getItem(`user:${id}`);
  if (!raw) return null;

  let data = JSON.parse(raw);
  if (isUser(data)) {
    return data;  // ✅ Type Guard: Return safely after confirmation
  }
  return null;
}

// Executed successfully

19
19

let value: unknown = "Hello, TypeScript!";

// as syntax (recommended — works in JSX/TSX)
let len1: number = (value as string).length;

// Angle-bracket syntax (cannot be used in JSX)
let len2: number = (<string>value).length;

console.log(len1);  // 19
console.log(len2);  // 19

// Both produce identical runtime code —
// the choice is purely about JSX compatibility

19
19