// 第一步：定义契约
interface Product {
  title: string;
}

// 第二步：函数应用契约
function getProductTitle(product: Product): string {
  return product.title.toUpperCase();
}

// 尝试传入不符合契约的对象，编辑器会立刻报错！
// 错误: 类型“{ name: string; }”的参数不能赋给类型“Product”的参数。
// getProductTitle({ name: "一个没有 title 的商品" });

interface ReportConfig {
  title: string;
  includeCharts: boolean;
}

function createReport(config: ReportConfig): void {
  console.log(`正在创建报告: ${config.title}`);
}

// 尝试使用错误的属性名，编辑器会立刻报错并给出修正建议！
// 错误: 对象文字可以只指定已知属性，但“reportTitle”不在类型“ReportConfig”中。你是否指的是“title”?
/*
createReport({ 
  reportTitle: "2025 年度销售额报告",
  includeCharts: true
});
*/

// 在 "strict": false 的情况下
// 这段代码可以通过编译，但存在巨大的运行时风险
function getGreeting(name: string | null) {
  // 如果 name 是 null, .toUpperCase() 会在运行时抛出错误
  return `Hello, ${name.toUpperCase()}`; 
}

// 在 "strict": true 的情况下
function getGreetingStrict(name: string | null): string {
  // 编译器会立刻报错：'name' is possibly 'null'.
  // return `Hello, ${name.toUpperCase()}`; 

  // 我们必须处理 null 的情况，代码才能通过编译
  if (name) {
    return `Hello, ${name.toUpperCase()}`;
  } else {
    return "Hello, Guest";
  }
}

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
}) 

// 我们明确告诉 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); 

function printValue(value: string | number) {
  // 🔴 编译错误!
  // 属性“toUpperCase”在类型“string | number”上不存在。
  // 属性“toUpperCase”在类型“number”上不存在。
  console.log(value.toUpperCase()); 
  
  // 🔴 同样会编译错误!
  // 属性“toFixed”在类型“string | number”上不存在。
  // 属性“toFixed”在类型“string”上不存在。
  console.log(value.toFixed(2));
}

function printValue(value: string | number): void {
  // 使用 typeof 进行类型守护
  if (typeof value === "string") {
    // 在这个 if 代码块内，TypeScript 已经智能地将 value 的类型收窄为 `string`
    // 鼠标悬停在下面的 `value` 上，你会看到它的类型就是 string
    console.log(value.toUpperCase()); // ✅ 正确！
  } else {
    // 在 else 代码块内，TypeScript 推断出 value 的类型必定是剩下的 `number`
    console.log(value.toFixed(2));    // ✅ 正确！
  }
}

printValue("hello world");
printValue(123.456);

// 在 `src/types.ts` 中可以补充这些类型
interface Todo {
  id: number;
  text: string;
  completed: boolean;
  // Todo 特有的方法
  toggle(): void; 
}

interface Note {
  id: number;
  content: string;
  // Note 特有的属性
  color: 'yellow' | 'blue' | 'green';
}

type ListEntry = Todo | Note;

function processEntry(entry: ListEntry) {
  // 🔴 编译错误！属性 `toggle` 在类型 `Note` 上不存在
  entry.toggle(); 
  
  // 🔴 编译错误！属性 `color` 在类型 `Todo` 上不存在
  console.log(`Color is: ${entry.color}`);
}

function processEntry(entry: ListEntry): void {
  console.log(`Processing entry #${entry.id}`);
  
  // 使用 in 操作符进行类型守护
  if ("completed" in entry) {
    // 在这个块内，TypeScript 知道 entry 的类型是 Todo
    // 因为只有 Todo 类型拥有 "completed" 属性
    console.log(`Todo item: ${entry.text}`);
    // entry.toggle(); // 如果 toggle 方法已实现，这里就可以安全调用
  } else {
    // 在这个块内，TypeScript 推断 entry 的类型必定是剩下的 Note
    console.log(`Note with color ${entry.color}: ${entry.content}`);
  }
}

// 这个函数返回一个布尔值，但它的类型签名非常特殊
// `entry is Todo` 就是类型谓词
// 它告诉 TypeScript：如果这个函数返回 true，那么你就可以确信传入的 `entry` 参数是 `Todo` 类型
function isTodo(entry: ListEntry): entry is Todo {
  return (entry as Todo).completed !== undefined;
}

function processEntryWithCustomGuard(entry: ListEntry): void {
  console.log(`Processing entry #${entry.id}`);
  
  // 使用自定义类型守护函数
  if (isTodo(entry)) {
    // 在这个块内，TypeScript 同样能将 entry 的类型收窄为 Todo
    console.log(`Todo item: ${entry.text}`);
  } else {
    console.log(`Note with color ${entry.color}: ${entry.content}`);
  }
}

// 我们之前定义的 Todo 和 Filter 类型也移到这里
export interface Todo {
    readonly id: number;
    text: string;
    completed: boolean;
    dueDate?: Date;
}

export type Filter = "all" | "active" | "completed";

// 新增 User 接口
export interface User {
    id: number;
    name: string;
    email: string;
}

export type AppState = {
    todos: Todo[];
    currentUser: User[] | null; // 用户可能存在，也可能未登录
    currentFilter: Filter;
}

import './style.css';
// 从 types.ts 导入类型
import type { Todo, User, AppState, Filter } from './types';

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

function findTodoById(id: number): Todo | undefined {
  return state.todos.find(todo => todo.id === id);
}

function findUserById(id: number): User | undefined {
  // 假设我们有一个用户列表
  const users: User[] = [state.currentUser!]; 
  return users.find(user => user.id === id);
}

function findItemById_any(items: any[], id: number): any {
  return items.find(item => item.id === id);
}

const foundTodo = findItemById_any(state.todos, 1);

// 灾难发生：
// 1. 类型丢失：foundTodo 的类型是 any，我们失去了所有代码提示。
// 2. 运行时风险：我们可以调用任何不存在的方法，编译器不会警告我们。
//    这行代码可以通过编译，但在运行时会因为 toUpperCase 不存在而崩溃。
console.log(foundTodo.text.toUpperCase()); 

// T 是一个类型变量，一个“占位符”。
// 这个函数接收一个 T 类型的数组和一个 number 类型的 id，
// 并返回一个 T 类型的值或 undefined。
export function findItemById<T>(items: T[], id: number): T | undefined {
  // 这里会出现一个编译错误，这是我们下一步要解决的
  return items.find(item => item.id === id); 
}

// 我们约束 T 必须是这样一个对象：它至少要有一个 number 类型的 id 属性。
export function findItemById<T extends { id: number }>(items: T[], id: number): T | undefined {
  // 现在 TypeScript 知道 item 上一定有 id 属性，错误消失了。
  return items.find(item => item.id === id);
}

import './style.css';
// 从 types.ts 导入类型
import type { Todo, User, AppState, Filter } from './types';
import { findItemById } from './utils'; // 导入我们的泛型函数

const state: AppState = {
  todos: [
    { id: 1, text: "学习 TypeScript 核心类型", completed: true },
    { id: 2, text: "编写一个 Todo List 应用", completed: false },
  ],
  currentUser: [
    { id: 1, name: "Prorise", email: "contact@prorise.com" },
    { id: 2, name: "John", email: "john@example.com" },
  ],
  currentFilter: "all"
};

// 调用泛型函数
// 1. 查找 Todo
const todo = findItemById(state.todos, 1);
// todo 的类型被正确推断为 Todo | undefined，拥有 text, completed 等属性

console.log(todo?.text);

// 2. 查找 User
const user = findItemById(state.currentUser!, 1);

console.log(user?.name);

// ... 其他类型定义 ...

// 定义一个通用的 API 响应“包装器”
// T 代表了 `data` 属性中具体的数据类型
export interface ApiResponse<T> {
  status: number;
  message: string;
  data: T;
}

import { Todo, User, ApiResponse } from './types';

// 模拟 API 地址
const API_BASE = "https://api.example.com";

// 获取 Todo 列表的函数
// 它的返回值是一个 Promise，Promise 的解析值符合 ApiResponse <Todo[]> 契约
export async function fetchTodos(): Promise<ApiResponse<Todo[]>> {
  // 实际项目中这里是真实的 fetch 调用
  // return fetch(`${API_BASE}/todos`).then(res => res.json());
  
  // 此处为模拟数据
  return Promise.resolve({
    status: 200,
    message: "Success",
    data: [
      { id: 1, text: "从 API 获取 Todo", completed: false }
    ]
  });
}

// 获取单个用户的函数
export async function fetchUser(id: number): Promise<ApiResponse<User>> {
    return Promise.resolve({
        status: 200,
        message: "Success",
        data: { id, name: "API User", email: "api@example.com" }
    });
}

// 确保存在如下的状态模型
export type AppState = {
    todos: Todo[];
    currentUser: User[] | null; // 用户可能存在，也可能未登录
    currentFilter: Filter;
}``

import { Todo, AppState, Filter } from './types'; // 引入 AppState

// ... state 定义 (请确保 state 符合 AppState 类型)
const state: AppState = {
  // ...
};

// ... 其他函数 函数 ...

// “天真”的 updateTodo 函数
function updateTodo(id: number, updatedTodo: Todo): void {
  const todoToUpdate = state.todos.find(todo => todo.id === id);
  if (todoToUpdate) {
    // 通过传入进来的新对象合并我们的旧对象
    Object.assign(todoToUpdate, updatedTodo);
  }
}

// 场景：只想把 id 为 2 的 todo 标记为完成
const todoToUpdate = findItemById(state.todos, 2);

if (todoToUpdate) {
  // 痛点来了！
  // 为了只修改 `completed` 属性，我们却被迫传入一个完整的 Todo 对象，
  // 甚至不得不把旧的 `text` 和 `id` 也带上。
  updateTodo(2, {
    ...todoToUpdate,
    completed: true
  });
}

// ... 其他代码 ...

// 重构后的 updateTodo 函数
// 我们将第二个参数的类型从 Todo 改为 Partial <Todo>
function updateTodo(id: number, payload: Partial<Todo>): void {
  const todoToUpdate = state.todos.find(todo => todo.id === id);
  if (todoToUpdate) {
    // payload 中有什么属性，就更新什么属性
    Object.assign(todoToUpdate, payload);
    console.log(`新更新的state.todos ${JSON.stringify(state.todos)}`);
  }
}

// 现在，调用变得无比优雅和精确
updateTodo(2, { completed: true }); // 只想更新 completed，就只传 completed
updateTodo(1, { text: "学习 TypeScript 高级类型" }); // 只更新 text

import { Todo } from './types';

// 使用 keyof 获取 Todo 接口的所有键
type TodoKeys = keyof Todo; 

// 鼠标悬停在 TodoKeys 上，你会看到它的类型是：
// "id" | "text" | "completed" | "dueDate"

let key: TodoKeys = "text"; // 正确
// key = "description"; // 错误: "description" 不在 TodoKeys 联合类型中

// ... 其他类型 ...

// 使用 Pick 创建一个只包含 text 和 completed 的“预览”类型
export type TodoPreview = Pick<Todo, "text" | "completed">;

function renderTodoPreview(preview: TodoPreview): void {
  console.log(`[预览] ${preview.text} - ${preview.completed ? '已完成' : '未完成'}`);
  // 这一行就会编译错误了
  // console.log(preview.id);
}

const todo = findItemById(state.todos, 1);
if (todo) {
  // preview 对象上没有 id 属性，访问会导致编译错误
  // 但是我没呢 findItemById 是返回的一个完整的 todo 对象，所以他是可以访问 id 属性的
  renderTodoPreview(todo);
}

// 定义一个条件类型
type Processable = string | number;
type ProcessResult<T> = T extends Processable ? T : never;

function process<T>(value: T): ProcessResult<T> {
  if (typeof value === 'string' || typeof value === 'number') {
    return value as ProcessResult<T>;
  }
  throw new Error("Invalid value");
}

let result1 = process("hello"); // result1 的类型是 string
let result2 = process(123);     // result2 的类型是 number
// let result3 = process(true);    // 编译错误！因为 ProcessResult <boolean> 是 never

function addTodo(text: string, dueDate?: Date): number {
  const newTodo: Todo = {
    id: Date.now(),
    text,
    completed: false,
    dueDate
  };
  state.todos.push(newTodo);
  return newTodo.id;
}

// 捕获 addTodo 函数的参数类型
type AddTodoParams = Parameters<typeof addTodo>;
// AddTodoParams 的类型是: [text: string, dueDate?: Date | undefined]

// 捕获 addTodo 函数的返回类型
type AddTodoReturn = ReturnType<typeof addTodo>;
// AddTodoReturn 的类型是: number

// F 必须是一个函数类型
export function logFunctionCall<F extends (...args: any[]) => any>(
  fn: F, 
  ...args: Parameters<F> // ...args 的类型被精确地定义为 F 的参数类型
): ReturnType<F> { // 返回值类型被精确地定义为 F 的返回类型
  
  console.log(`${fn.name} 被调用，参数:`, ...args);
  const result = fn(...args);
  console.log(`${fn.name} 返回:`, result);
  
  return result;
}

import { logFunctionCall } from './utils';
// ...

// 使用 logFunctionCall 来包装 addTodo
const newId = logFunctionCall(addTodo, "完成第四章笔记");

// 尝试使用错误的参数类型，会立刻得到编译时错误！
// logFunctionCall(addTodo, 123); // 错误: 类型“number”的参数不能赋给类型“string”的参数。