// 我们明确告诉 TypeScript，`appName` 变量的类型必须是 `string`
let appName: string = "TypeScript Learning";

// 如果我们尝试给它赋一个非字符串的值，编译器会立刻报错
// appName = 123; // 错误: 不能将类型“number”分配给类型“string”。

// 我们没有写 `: number`，但 TypeScript 知道 `version` 是 number 类型
let version = 5; 

// 同样，尝试赋一个错误类型的值，依然会报错
// version = "5.0"; // 错误: 不能将类型“string”分配给类型“number”。

let frameworkName: string = "Vite";
let year: number = 2025;
let isProduction: boolean = false;

let user: null = null;
let config: undefined = undefined;

// symbol 类型的值是唯一的、不可变的
const uniqueKey: symbol = Symbol("id"); 
// bigint 用于表示超大整数
const bigIntValue: bigint = 9007199254740991n;

// any 类型放弃了所有类型检查，应极力避免使用
let anything: any = "可以是任何东西";
anything = 123;
anything.toFixed(2); // 不会报错，但运行时可能出错

// unknown 是一个更安全的选择
let safeAnything: unknown = "这是一个字符串";

// 直接操作 unknown 类型的变量是不被允许的
// safeAnything.toUpperCase(); // 错误: “safeAnything”的类型为“unknown”。

// 我们必须先进行类型检查，收窄其类型
if (typeof safeAnything === 'string') {
  // 在这个块里，TypeScript 知道它是 string
  console.log(safeAnything.toUpperCase());
}

function throwError(message: string): never {
  throw new Error(message);
}

// 定义一个函数，它接收两个 number 参数，并返回一个 number
function add(a: number, b: number): number {
  return a + b;
}

// 如果一个函数没有返回值，我们使用 : void 来明确表示
function logMessage(message: string): void {
  console.log(message);
}

// greeting 是一个带有默认值的参数
// name 是一个必选参数
function greet(name: string, greeting: string = "Hello"): string {
  return `${greeting}, ${name}!`;
}

// age 是一个可选参数
function userInfo(name: string, age?: number): void {
  if (age) {
    console.log(`${name} is ${age} years old.`);
  } else {
    console.log(`Name: ${name}`);
  }
}

// ...numbers 是一个 rest 参数，它将所有剩余的参数收集到一个数组中
function sum(...numbers: number[]): number {
  return numbers.reduce((total, current) => total + current, 0);
}

// 为 format 函数提供两个重载签名
function format(value: string): string;
function format(value: number): string;
// 这是函数的实现签名，它必须兼容所有的重载签名
function format(value: string | number): string {
  if (typeof value === "string") {
    return value.trim();
  }
  return value.toFixed(2);
}

const formattedString = format("  hello  "); // "hello"
const formattedNumber = format(123.456);   // "123.46"

// 方式一：类型 [] (推荐，更简洁)
const numbers: number[] = [1, 2, 3, 4];
const names: string[] = ["Alice", "Bob"];

// 方式二：Array <类型> (泛型语法，我们将在下一章深入)
const scores: Array<number> = [100, 99, 98];

// 定义一个元组类型，表示 HTTP 响应
let httpResponse: [number, string];
httpResponse = [200, "OK"];

// 尝试错误的顺序或长度都会导致编译时错误
// httpResponse = ["OK", 200];      // 错误：顺序不匹配
// httpResponse = [200, "OK", true]; // 错误：长度不匹配

// 清理 main.ts，并写入以下内容

import './style.css';

// 使用对象字面量类型为 state 定义初始形状
const state: {
  todos: any[]; // todos 数组里的对象还是 any，这是下一步要解决的
  currentFilter: string; // currentFilter 暂时还是一个普通的 string
} = {
  todos: [
    { id: 1, text: "学习 TypeScript 核心类型", completed: true },
    { id: 2, text: "编写一个 Todo List 应用", completed: false },
  ],
  currentFilter: "all"
};

console.log(state);

import './style.css';

// 1. 使用 interface 为我们的核心数据 Todo 项建立一个不可篡改的“契约”
interface Todo {
  readonly id: number;   // id 是只读的，一旦创建不可修改
  text: string;
  completed: boolean;
  dueDate?: Date;        // dueDate 是可选的，可以不存在
}

const state: {
  todos: Todo[]; // <-- 将 any [] 替换为我们刚刚创建的 Todo [] 契约！
  currentFilter: string;
} = {
  todos: [
    { id: 1, text: "学习 TypeScript 核心类型", completed: true },
    { id: 2, text: "编写一个 Todo List 应用", completed: false },
    // { id: 3, content: "...", done: "no" } // 任何不符合 Todo 接口的对象都会立刻报错！
  ],
  currentFilter: "all"
};

// 清理 main.ts，并写入以下内容

import './style.css';

// 1. 使用 interface 为我们的核心数据 Todo 项建立一个不可篡改的“契约”
interface Todo {
  readonly id: number;   // id 是只读的，一旦创建不可修改
  text: string;
  completed: boolean;
  dueDate?: Date;        // dueDate 是可选的，可以不存在
}


// 2. 使用 type 别名和字面量联合类型，为筛选状态创建一个精确的类型
type Filter = "all" | "active" | "completed";

// 3. 我们可以进一步用 type 把整个应用的状态也模型化
type AppState = {
  todos: Todo[];
  currentFilter: Filter;
}

const state: AppState = {
  todos: [
    { id: 1, text: "学习 TypeScript 核心类型", completed: true },
    { id: 2, text: "编写一个 Todo List 应用", completed: false },
  ],
  currentFilter: "all"
};

console.log(state);

enum FilterEnum {
  All = "ALL",
  Active = "ACTIVE",
  Completed = "COMPLETED"
}

// 应用
let currentFilter: FilterEnum = FilterEnum.All;
console.log(currentFilter); // 输出 "ALL"

const inputEl = document.querySelector('#todo-input');

// 🔴 编译错误！
// 属性“value”在类型“Element”上不存在。
console.log(inputEl.value); 

// 使用 as 关键字进行类型断言
const inputEl = document.querySelector('#todo-input') as HTMLInputElement;

// ✅ 正确！现在 TypeScript 知道 inputEl 是一个输入框元素
// 我们可以安全地访问它的 value 属性，并获得智能提示
if (inputEl) { // 做好 null 检查
  console.log(inputEl.value);
}

const inputEl = <HTMLInputElement>document.querySelector('#todo-input');

// 我们的断言是错误的，#todo-input 是一个 input，不是 img
const imgEl = document.querySelector('#todo-input') as HTMLImageElement;

// 这行代码可以通过编译，因为我们“欺骗”了 TypeScript
// 但在运行时，当 JS 引擎尝试在 input 元素上访问 src 属性时，
// 它会返回 undefined，或在后续操作中引发 TypeError。
console.log(imgEl.src);