TypeScript: متغيرات TypeScript واستنتاج الأنواع

let count = 0;
count = 1;        // ✅ let Variables can be reassigned

const MAX_SIZE = 100;
MAX_SIZE = 200;   // ❌ Error：Cannot be assigned to a constant

var x = 1;        // ⚠️ Available but not recommended——var There are issues with variable hoisting and scope leakage.

// Type Annotations——Tell me TypeScript What is the type of the variable?
let age: number = 25;

// Type Inference——TypeScript Automatically determine the type based on the initial value
let name = "Charlie";    // TypeScript Inferred as string
let active = true;    // TypeScript Inferred as boolean

let message = "hello";   // Inferred as string
let count = 42;          // Inferred as number
let flag = true;         // Inferred as boolean
let items = [1, 2, 3];   // Inferred as number[]

// let Inferred as a wide type（widening）
let x = "hello";     // Inferred as string
let n = 42;          // Inferred as number
let b = true;        // Inferred as boolean

// const Inferred as an exact literal type（no widening）
const x2 = "hello";  // Inferred as "hello"（Literal types，No string）
const n2 = 42;       // Inferred as 42（Literal types，No number）
const b2 = true;     // Inferred as true（Literal types，No boolean）

let something;        // Inferred as any（Danger！）
something = 42;       // any，Do not check
something = "hello";  // any，Do not check——Completely bypassed the type system

let arr = [1, "hello", true];
// Inferred as (number | string | boolean)[] —— Union Type Arrays

let arr2 = [1, 2, 3];
// Inferred as number[] —— All elements are of the same type，Inferred as an array of element types

// Experiment1：let vs const Differences in Inference
let dynamicText = "hello";
const fixedText = "hello";

dynamicText = "world";     // ✅ string Can accept another string
// fixedText = "world";    // ❌ const Cannot be reassigned

// Experiment2：Inference of Object Properties
let user = {
  name: "Charlie",
  age: 20
};
// Inferred as { name: string; age: number }
user.name = "Diana";        // ✅ string Properties can be assigned new values
user.age = 21;             // ✅ number Properties can be assigned new values

// Experiment3：const Object——The property can still be modified！
const config = {
  host: "localhost",
  port: 3000
};
config.host = "127.0.0.1";  // ✅ const Only reassigning the object itself is prohibited.，Non-freezing property
// config = { host: "x", port: 1 };  // ❌ You cannot reassign the entire object

// Executed successfully

let num: number = 42;
let big: bigint = 100n;

// num = big;    // ❌ bigint No number subtypes of
// big = num;    // ❌ number No bigint subtypes of

let text: string = "hello";    // string Type
const literal: "hello" = "hello";  // Literal types "hello"

text = literal;   // ✅ "hello" is a string subtype of，Can be assigned a value
// literal = text; // ❌ string No "hello" subtypes of

let a: any = "hello";
a = 42;          // ✅ any Can accept any type
a = true;        // ✅ any No tests will be performed

let b: string = a;  // ✅ any It can also be assigned to any type.（Danger！）

// Scene：DOM Type Inference for Elements
let input = document.getElementById("myInput");
// Inferred as HTMLElement | null——I don't know exactly what element it is.

let inputEl = document.getElementById("myInput") as HTMLInputElement;
// Assert that HTMLInputElement——Tell the compiler"I'm sure this is input Element"

// ❌ Redundancy
let name: string = "Charlie";
const MAX: number = 100;
function add(a: number, b: number): number { return a + b; }

// ✅ Concise
let name = "Charlie";
const MAX = 100;
function add(a: number, b: number) { return a + b; }  // The return type is inferred as number

interface User {
  name: string;
  age: number;
}

// When an object literal is assigned to a typed variable，Inference+Type checking takes effect simultaneously
let user: User = { name: "Charlie", age: 20 };  // ✅ Structural Matching
let bad: User = { name: "Charlie" };             // ❌ Missing age Properties

// Return Values of Complex Functions——It is recommended to explicitly label them.，Avoiding Fallacies in Reasoning
function getUserInfo(id: number): { name: string; age: number } | null {
  if (id <= 0) return null;
  return { name: "User" + id, age: 20 };
}

// Use as const assertion to make object properties read-only literal types
const THEME = {
  primary: "#4A90D9",
  secondary: "#7B51D9",
  fontSize: 14
} as const;

// Inference Results：
// { readonly primary: "#4A90D9"; readonly secondary: "#7B51D9"; readonly fontSize: 14 }
// Each property is of an exact literal type + readonly

// THEME.primary = "#000";  // ❌ readonly Properties cannot be modified
// THEME.fontSize = 16;     // ❌ readonly Properties cannot be modified

console.log(THEME.primary);   // "#4A90D9"
console.log(THEME.fontSize);  // 14

#4A90D9
14

// Array inference — element type is inferred automatically
let scores = [90, 85, 92];           // number[]
let names = ["Alice", "Bob"];        // string[]
let mixed = [1, "two", true];       // (number | string | boolean)[]

// Object inference — each property gets its own type
let point = { x: 10, y: 20 };       // { x: number; y: number }
let user = { name: "Eve", active: true }; // { name: string; active: boolean }

// Nested inference
let config = {
  server: { host: "localhost", port: 3000 },
  debug: true
};
// { server: { host: string; port: number }; debug: boolean }

console.log(config.server.host);    // "localhost"
console.log(typeof mixed[0]);       // "number"

localhost
number