let 变量名: 类型 = 值;

function 函数名(参数名: 参数类型): 返回值类型 {
  return 返回值;
}

type 类型名 = 类型结构;

interface 接口名 {
  属性名: 属性类型;
}

let username: string = "Alice";

function sayHello(name: string): string {
  return "Hello, " + name;
}

type User = {
  id: number;
  name: string;
};

type Product = {
  id: number;
  title: string;
  price: number;
};

function renderProduct(product: Product): string {
  return `${product.title}: ￥${product.price}`;
}

const product: Product = {
  id: 1,
  title: "键盘",
  price: 199,
};

console.log(renderProduct(product));

const message: string = "Hello TypeScript";
console.log(message);

function greet(name: string): string {
  return `Hello, ${name}`;
}

console.log(greet("Alice"));

let 变量名: 类型 = 值;
const 常量名: 类型 = 值;

let 字符串: string = "文本";
let 数字: number = 123;
let 布尔值: boolean = true;
let 空值: null = null;
let 未定义: undefined = undefined;
let 大整数: bigint = 100n;

let 变量名 = 值;

let 任意值: any = 值;
let 未知值: unknown = 值;

function 没有返回值(): void {}

function 永远不会正常结束(): never {
  throw new Error("错误");
}

let 对象值: object = {};

enum 枚举名 {
  成员1,
  成员2,
}

let name: string = "Tom";
let age: number = 18;
let isLogin: boolean = false;
let largeId: bigint = 9007199254740993n;

let city = "Shanghai";
let count = 10;

let value: unknown = "hello";

if (typeof value === "string") {
  console.log(value.toUpperCase());
}

function showMessage(message: string): void {
  console.log(message);
}

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

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

const input = document.querySelector("#username") as HTMLInputElement;

let username: string = input.value;
let usernameLength: number = username.length;
let isValid: boolean = usernameLength >= 3;

if (isValid) {
  console.log("用户名合法");
} else {
  console.log("用户名至少需要 3 个字符");
}

const rawData: unknown = JSON.parse('{"name":"Alice"}');

if (
  typeof rawData === "object" &&
  rawData !== null &&
  "name" in rawData
) {
  console.log("这是一个带 name 的对象");
}

type Theme = "light" | "dark";

let theme: Theme = "light";

let age: number = 18;
age = 20;
// age = "20"; // 错误：不能把 string 赋值给 number

let message = "提交成功";

let 数组名: 元素类型[] = [元素1, 元素2];
let 数组名: Array<元素类型> = [元素1, 元素2];

let 元组名: [类型1, 类型2] = [值1, 值2];

let scores: number[] = [90, 85, 100];
let names: Array<string> = ["Alice", "Bob"];

let userInfo: [string, number] = ["Tom", 18];

type Todo = {
  id: number;
  title: string;
  done: boolean;
};

const todos: Todo[] = [
  { id: 1, title: "学习 TypeScript", done: false },
  { id: 2, title: "完成练习", done: true },
];

const unfinishedTodos = todos.filter((todo) => !todo.done);

let nums: number[] = [1, 2, 3];
// nums.push("4"); // 错误：不能把 string 放进 number[]

let point: [number, number] = [100, 200];

function 函数名(参数名: 参数类型): 返回值类型 {
  return 返回值;
}

function 函数名(参数名?: 参数类型): 返回值类型 {
  return 返回值;
}

function 函数名(参数名: 参数类型 = 默认值): 返回值类型 {
  return 返回值;
}

const 函数名 = (参数名: 参数类型): 返回值类型 => {
  return 返回值;
};

function add(a: number, b: number): number {
  return a + b;
}

function greet(name: string = "Guest"): string {
  return `Hello, ${name}`;
}

const double = (num: number): number => {
  return num * 2;
};

function getInputValue(input: HTMLInputElement): string {
  return input.value.trim();
}

function validateUsername(username: string): boolean {
  return username.length >= 3 && username.length <= 12;
}

const usernameInput = document.querySelector("#username") as HTMLInputElement;
const username = getInputValue(usernameInput);

if (validateUsername(username)) {
  console.log("用户名格式正确");
}

function formatPrice(price: number): string {
  return `￥${price.toFixed(2)}`;
}

function logMessage(message: string): void {
  console.log(message);
}

let 对象名: {
  属性名: 属性类型;
  可选属性名?: 属性类型;
  readonly 只读属性名: 属性类型;
} = {
  属性名: 值,
  只读属性名: 值,
};

let 对象名: {
  属性1: 类型;
  子对象: {
    属性2: 类型;
  };
};

let user: {
  readonly id: number;
  name: string;
  age?: number;
} = {
  id: 1,
  name: "Alice",
};

user.name = "Tom";
// user.id = 2; // 错误：id 是只读属性

let article: {
  id: number;
  title: string;
  author: {
    id: number;
    name: string;
  };
  tags?: string[];
} = {
  id: 1001,
  title: "TypeScript 入门",
  author: {
    id: 1,
    name: "小明",
  },
  tags: ["前端", "TypeScript"],
};

console.log(article.author.name);

age?: number;

if (article.tags) {
  console.log(article.tags.join(","));
}

class 类名 {
  readonly 只读属性: 类型;
  public 公共属性: 类型;
  protected 受保护属性: 类型;
  private 私有属性: 类型;

  constructor(参数: 类型) {
    this.属性 = 参数;
  }

  方法名(): 返回值类型 {
    return 返回值;
  }
}

class 子类 extends 父类 {
  constructor(参数: 类型) {
    super(父类参数);
  }

  重写方法(): 返回值类型 {
    return 返回值;
  }
}

class 类名 implements 接口名 {
  // 必须实现接口要求的属性和方法
}

abstract class 抽象类名 {
  abstract 方法名(): 返回值类型;
}

class Person {
  readonly id: number;
  public name: string;
  private age: number;

  constructor(id: number, name: string, age: number) {
    this.id = id;
    this.name = name;
    this.age = age;
  }

  sayHello(): void {
    console.log(`你好，我是 ${this.name}`);
  }

  getAge(): number {
    return this.age;
  }
}

const person = new Person(1, "Alice", 18);
person.sayHello();

interface StorageService {
  get(key: string): string | null;
  set(key: string, value: string): void;
}

class LocalStorageService implements StorageService {
  static prefix = "app:";

  get(key: string): string | null {
    return localStorage.getItem(LocalStorageService.prefix + key);
  }

  set(key: string, value: string): void {
    localStorage.setItem(LocalStorageService.prefix + key, value);
  }
}

const storage = new LocalStorageService();
storage.set("token", "abc123");
console.log(storage.get("token"));

abstract class Animal {
  constructor(protected name: string) {}

  abstract speak(): void;
}

class Dog extends Animal {
  speak(): void {
    console.log(`${this.name} 在叫`);
  }
}

const dog = new Dog("旺财");
dog.speak();

class Counter {
  private _value = 0;

  get value(): number {
    return this._value;
  }

  set value(value: number) {
    if (value >= 0) {
      this._value = value;
    }
  }
}

type 类型名 = 类型;

type 对象类型名 = {
  属性名: 属性类型;
};

type 联合类型名 = 类型1 | 类型2;

type UserId = number;
type Status = "pending" | "success" | "error";

type User = {
  id: UserId;
  name: string;
  status: Status;
};

type ButtonType = "button" | "submit" | "reset";

type ButtonConfig = {
  text: string;
  type: ButtonType;
  disabled: boolean;
};

const submitButton: ButtonConfig = {
  text: "提交",
  type: "submit",
  disabled: false,
};

type Point = {
  x: number;
  y: number;
};

function getDistance(point: Point): number {
  return Math.sqrt(point.x ** 2 + point.y ** 2);
}

interface 接口名 {
  属性名: 属性类型;
  可选属性名?: 属性类型;
}

interface 子接口名 extends 父接口名 {
  新属性名: 新属性类型;
}

class 类名 implements 接口名 {
  // 实现接口要求的属性和方法
}

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

const user: User = {
  id: 1,
  name: "Alice",
};

interface Logger {
  log(message: string): void;
}

class ConsoleLogger implements Logger {
  log(message: string): void {
    console.log(message);
  }
}

interface BaseResponse {
  code: number;
  message: string;
}

interface UserResponse extends BaseResponse {
  data: {
    id: number;
    name: string;
  };
}

const response: UserResponse = {
  code: 200,
  message: "ok",
  data: {
    id: 1,
    name: "Tom",
  },
};

interface Flyable {
  fly(): void;
}

class Bird implements Flyable {
  fly(): void {
    console.log("鸟在飞");
  }
}

function startFly(target: Flyable): void {
  target.fly();
}

startFly(new Bird());

interface AdminUser extends User {
  role: "admin";
}

let 变量名: 类型1 | 类型2;

let 变量名: "固定值1" | "固定值2";

type 状态类型 = "状态1" | "状态2" | "状态3";

let id: string | number;

id = 1001;
id = "user-1001";

type RequestStatus = "idle" | "loading" | "success" | "error";

let status: RequestStatus = "loading";

type ToastType = "success" | "error" | "warning";

function showToast(message: string, type: ToastType): void {
  console.log(`[${type}] ${message}`);
}

showToast("保存成功", "success");
showToast("保存失败", "error");
// showToast("未知状态", "danger"); // 错误：danger 不在 ToastType 中

type TabKey = "home" | "profile" | "settings";
type Theme = "light" | "dark";

if (typeof 变量 === "string") {
  // 这里变量会被收窄为 string
}

if ("属性名" in 对象) {
  // 这里可以确认对象中存在某个属性
}

if (变量 !== null) {
  // 这里变量不是 null
}

if (Array.isArray(变量)) {
  // 这里变量是数组
}

function printId(id: string | number): void {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(0));
  }
}

type TextMessage = {
  type: "text";
  content: string;
};

type ImageMessage = {
  type: "image";
  url: string;
};

type Message = TextMessage | ImageMessage;

function renderMessage(message: Message): string {
  if (message.type === "text") {
    return message.content;
  }

  return `<img src="${message.url}" alt="图片消息">`;
}

function getLength(value: string | string[]): number {
  if (Array.isArray(value)) {
    return value.length;
  }

  return value.length;
}

值 as 类型

const 元素 = document.querySelector("选择器") as 具体元素类型;

const 元素 = document.querySelector("选择器");

if (元素) {
  // 这里可以安全使用元素
}

const value: unknown = "hello";
const text = value as string;

console.log(text.toUpperCase());

const input = document.querySelector("#email") as HTMLInputElement;
const button = document.querySelector("#submit") as HTMLButtonElement;

button.addEventListener("click", () => {
  console.log(input.value);
});

const input = document.querySelector("#email");

if (input instanceof HTMLInputElement) {
  console.log(input.value);
}

const num = "123" as unknown as number;

function 函数名<T>(参数: T): T {
  return 参数;
}

interface 接口名<T> {
  属性名: T;
}

Promise<数据类型>

function 函数名<T extends 约束类型>(参数: T): 返回值类型 {
  return 返回值;
}

class 类名<T> {
  属性名: T;
}

function identity<T>(value: T): T {
  return value;
}

const num = identity<number>(100);
const text = identity<string>("hello");

const result = identity("TypeScript");

function getLength<T extends { length: number }>(value: T): number {
  return value.length;
}

getLength("hello");
getLength([1, 2, 3]);

interface ApiResponse<T> {
  code: number;
  message: string;
  data: T;
}

type User = {
  id: number;
  name: string;
};

const userResponse: ApiResponse<User> = {
  code: 200,
  message: "ok",
  data: {
    id: 1,
    name: "Alice",
  },
};

class DataStore<T> {
  private data: T[] = [];

  add(item: T): void {
    this.data.push(item);
  }

  getAll(): T[] {
    return this.data;
  }
}

const userStore = new DataStore<User>();
userStore.add({ id: 1, name: "Alice" });

ApiResponse<User>
ApiResponse<Product>
ApiResponse<string[]>

const 元素 = document.querySelector("选择器") as HTMLElement;

const 输入框 = document.querySelector("选择器") as HTMLInputElement;

元素.addEventListener("click", (event: MouseEvent) => {
  // 事件处理
});

表单.addEventListener("submit", (event: SubmitEvent) => {
  event.preventDefault();
});

const button = document.querySelector("#btn") as HTMLButtonElement;

button.addEventListener("click", (event: MouseEvent) => {
  console.log(event.clientX, event.clientY);
});

const form = document.querySelector("#login-form") as HTMLFormElement;
const usernameInput = document.querySelector("#username") as HTMLInputElement;
const passwordInput = document.querySelector("#password") as HTMLInputElement;

form.addEventListener("submit", (event: SubmitEvent) => {
  event.preventDefault();

  const username = usernameInput.value.trim();
  const password = passwordInput.value.trim();

  if (!username || !password) {
    console.log("请填写用户名和密码");
    return;
  }

  console.log("提交登录", username, password);
});

const input = document.querySelector("#keyword") as HTMLInputElement;
console.log(input.value);

input.addEventListener("input", (event: Event) => {
  const target = event.target;

  if (target instanceof HTMLInputElement) {
    console.log(target.value);
  }
});

async function 函数名(): Promise<返回数据类型> {
  return 数据;
}

interface ApiResponse<T> {
  code: number;
  message: string;
  data: T;
}

const response = await fetch("接口地址");
const data = await response.json();

async function getNumber(): Promise<number> {
  return 100;
}

async function getMessage(): Promise<string> {
  return "请求成功";
}

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

interface ApiResponse<T> {
  code: number;
  message: string;
  data: T;
}

async function fetchUser(id: number): Promise<ApiResponse<User>> {
  const response = await fetch(`/api/users/${id}`);
  const data = (await response.json()) as ApiResponse<User>;
  return data;
}

async function renderUser(): Promise<void> {
  const result = await fetchUser(1);
  console.log(result.data.name);
}

async function fn(): Promise<string> {
  return "hello";
}

export const 变量名 = 值;

export function 函数名() {
  // 函数内容
}

export type 类型名 = 类型结构;

export interface 接口名 {
  属性名: 属性类型;
}

import { 名称 } from "./文件路径";

import type { 类型名 } from "./文件路径";

// user.ts
export type User = {
  id: number;
  name: string;
};

export function getUserName(user: User): string {
  return user.name;
}

// main.ts
import { getUserName } from "./user";
import type { User } from "./user";

const user: User = {
  id: 1,
  name: "Alice",
};

console.log(getUserName(user));

// types.ts
export interface Todo {
  id: number;
  title: string;
  done: boolean;
}

// todo.ts
import type { Todo } from "./types";

export function createTodo(title: string): Todo {
  return {
    id: Date.now(),
    title,
    done: false,
  };
}

// main.ts
import { createTodo } from "./todo";

const todo = createTodo("学习 TS 模块化");
console.log(todo);

import type { User } from "./user";

let 文本: string = "内容";

文本.length;
文本.trim();
文本.includes("关键词");
文本.slice(开始索引, 结束索引);
文本.replace("旧内容", "新内容");
文本.split("分隔符");

const 模板字符串: string = `文本 ${表达式}`;

const message: string = "  TypeScript  ";

const cleanMessage: string = message.trim();
const upperMessage: string = cleanMessage.toUpperCase();
const hasScript: boolean = cleanMessage.includes("Script");
const chars: string[] = cleanMessage.split("");

function normalizeKeyword(keyword: string): string {
  return keyword.trim().toLowerCase();
}

function highlightKeyword(title: string, keyword: string): string {
  const cleanKeyword = normalizeKeyword(keyword);

  if (!cleanKeyword) {
    return title;
  }

  return title.replace(cleanKeyword, `<mark>${cleanKeyword}</mark>`);
}

const 新数组 = 数组.map((元素) => 返回值);
const 筛选结果 = 数组.filter((元素) => 条件);
const 查找结果 = 数组.find((元素) => 条件);
const 累积结果 = 数组.reduce((累积值, 当前值) => 新累积值, 初始值);

const numbers: number[] = [1, 2, 3, 4];

const doubled: number[] = numbers.map((num) => num * 2);
const evens: number[] = numbers.filter((num) => num % 2 === 0);
const firstLarge: number | undefined = numbers.find((num) => num > 2);
const sum: number = numbers.reduce((total, num) => total + num, 0);

type Product = {
  id: number;
  title: string;
  price: number;
  stock: number;
};

const products: Product[] = [
  { id: 1, title: "鼠标", price: 99, stock: 10 },
  { id: 2, title: "键盘", price: 199, stock: 0 },
];

const visibleProducts = products.filter((product) => product.stock > 0);
const productTitles = visibleProducts.map((product) => product.title);
const totalPrice = visibleProducts.reduce((total, product) => total + product.price, 0);

const 日期对象: Date = new Date();
const 时间戳: number = Date.now();

function 函数名(date: Date): string {
  return 格式化结果;
}

const now: Date = new Date();
const year: number = now.getFullYear();
const month: number = now.getMonth() + 1;
const timestamp: number = now.getTime();

function padZero(value: number): string {
  return String(value).padStart(2, "0");
}

function formatDate(date: Date): string {
  const year = date.getFullYear();
  const month = padZero(date.getMonth() + 1);
  const day = padZero(date.getDate());

  return `${year}-${month}-${day}`;
}

console.log(formatDate(new Date()));

const timerId: ReturnType<typeof setTimeout> = setTimeout(() => {
  // 延迟执行
}, 毫秒数);

clearTimeout(timerId);

const intervalId: ReturnType<typeof setInterval> = setInterval(() => {
  // 重复执行
}, 毫秒数);

clearInterval(intervalId);

const timerId: ReturnType<typeof setTimeout> = setTimeout(() => {
  console.log("2 秒后执行");
}, 2000);

clearTimeout(timerId);

function debounce<Args extends unknown[]>(
  fn: (...args: Args) => void,
  delay: number
): (...args: Args) => void {
  let timerId: ReturnType<typeof setTimeout> | undefined;

  return (...args: Args) => {
    if (timerId) {
      clearTimeout(timerId);
    }

    timerId = setTimeout(() => {
      fn(...args);
    }, delay);
  };
}

const search = debounce((keyword: string) => {
  console.log("搜索：", keyword);
}, 300);

search("typescript");

const img: HTMLImageElement = new Image();

img.onload = () => {
  // 加载成功
};

img.onerror = () => {
  // 加载失败
};

img.src = 图片地址;

const img: HTMLImageElement = new Image();

img.onload = () => {
  console.log("图片加载成功");
};

img.onerror = () => {
  console.log("图片加载失败");
};

img.src = "/avatar.png";

function loadImage(src: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = new Image();

    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`图片加载失败：${src}`));
    img.src = src;
  });
}

async function renderAvatar(src: string, container: HTMLElement): Promise<void> {
  try {
    const img = await loadImage(src);
    container.appendChild(img);
  } catch {
    container.textContent = "头像加载失败";
  }
}

try {
  // 可能出错的代码
} catch (error: unknown) {
  if (error instanceof Error) {
    console.log(error.message);
  }
}

try {
  JSON.parse("{ 错误 JSON }");
} catch (error: unknown) {
  if (error instanceof Error) {
    console.log(error.message);
  }
}

async function safeFetchJson<T>(url: string): Promise<T | null> {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }

    return (await response.json()) as T;
  } catch (error: unknown) {
    if (error instanceof Error) {
      console.error("请求失败：", error.message);
    }

    return null;
  }
}

throw "错误字符串";
throw 123;
throw new Error("错误对象");

// 第一步：给数据结构起类型
type 数据类型 = {
  属性: 类型;
};

// 第二步：给函数参数和返回值加类型
function 函数名(参数: 参数类型): 返回值类型 {
  return 返回值;
}

// 第三步：给异步结果加 Promise 类型
async function 异步函数(): Promise<结果类型> {
  return 结果;
}

function add(a: number, b: number): number {
  return a + b;
}

type LoginResponse = {
  token: string;
  user: {
    id: number;
    name: string;
  };
};

async function login(username: string, password: string): Promise<LoginResponse> {
  const response = await fetch("/api/login", {
    method: "POST",
    body: JSON.stringify({ username, password }),
  });

  return (await response.json()) as LoginResponse;
}

function 装饰器名(target: Function): void {
  // target 是被装饰的类
}

@装饰器名
class 类名 {}

function 装饰器工厂(参数: 参数类型) {
  return function (target: Function): void {
    // 装饰逻辑
  };
}

@装饰器工厂(参数)
class 类名 {}

// 类装饰器
function ClassDecorator(target: Function): void {}

// 属性装饰器
function PropertyDecorator(target: object, propertyKey: string | symbol): void {}

// 方法装饰器
function MethodDecorator(
  target: object,
  propertyKey: string | symbol,
  descriptor: PropertyDescriptor
): void {}

// 参数装饰器
function ParameterDecorator(
  target: object,
  propertyKey: string | symbol | undefined,
  parameterIndex: number
): void {}

function LogClass(target: Function): void {
  console.log("类被定义了：", target.name);
}

@LogClass
class Person {
  constructor(public name: string) {}
}

interface User {
  introduce(): void;
}

function AddIntroduce(target: Function): void {
  target.prototype.introduce = function (): void {
    console.log(`我是 ${this.name}`);
  };
}

@AddIntroduce
class User {
  constructor(public name: string) {}
}

const user = new User("Alice");
user.introduce();