一文读懂TypeScript 核心特性

// 变量类型注解：格式为“变量名: 类型”
let username: string = "zhangsan"; // 字符串类型
let age: number = 25; // 数字类型（含整数、浮点数）
let isActive: boolean = true; // 布尔类型
let emptyValue: null = null; // null类型
let undefinedValue: undefined = undefined; // undefined类型

// 核心优势：类型错误实时提示
username = 123; // 报错：Type 'number' is not assignable to type 'string'

// 函数参数类型 + 返回值类型（返回值可省略，TS会自动推导）
function add(a: number, b: number): number {
  return a + b; // 若返回字符串，会直接报错
}

// 无返回值的函数（void类型）
function logInfo(msg: string): void {
  console.log(msg);
}

// 调用时类型不匹配，IDE直接报错
add(10, "20"); // 报错：Argument of type 'string' is not assignable to parameter of type 'number'

// 写法1：类型[]
let numArr: number[] = [1, 2, 3];
numArr.push("4"); // 报错：类型不匹配

// 写法2：Array<类型>（泛型语法，后续详解）
let strArr: Array<string> = ["a", "b", "c"];

// 联合类型数组（允许多种类型）
let mixedArr: (number | string)[] = [1, "a", 2];

// 定义用户接口（规定必须包含的属性及类型）
interface User {
  id: number; // 必选属性
  name: string;
  age?: number; // 可选属性（?表示可缺省）
  readonly role: string; // 只读属性（初始化后不可修改）
}

// 符合接口规范的对象（正确）
const user1: User = {
  id: 1,
  name: "zhangsan",
  role: "admin"
};

// 缺少必选属性（报错）
const user2: User = {
  name: "lisi",
  role: "user" // 报错：Property 'id' is missing in type
};

// 修改只读属性（报错）
user1.role = "superadmin"; // 报错：Cannot assign to 'role' because it is a read-only property

// 定义接口描述函数格式
interface Calculate {
  (a: number, b: number): number;
}

// 实现接口（函数参数和返回值必须符合接口规范）
const multiply: Calculate = (x, y) => x * y;
const subtract: Calculate = (x, y) => x - y;

multiply(3, 4); // 正确，返回12
multiply(3, "4"); // 报错：参数类型不匹配

// 基础接口
interface BaseUser {
  id: number;
  name: string;
}

// 继承BaseUser，新增属性
interface AdminUser extends BaseUser {
  role: "admin";
  permissions: string[];
}

// 符合AdminUser接口的对象
const admin: AdminUser = {
  id: 2,
  name: "wangwu",
  role: "admin",
  permissions: ["create", "delete"]
};

// 泛型函数：用<T>表示类型占位符，使用时指定具体类型
function identity<T>(value: T): T {
  return value; // 输入类型与返回类型一致
}

// 使用时指定类型（或让TS自动推导）
const str = identity<string>("hello"); // 类型为string
const num = identity(123); // 自动推导为number类型

// 实用场景：处理数组的通用函数
function getFirstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

const firstNum = getFirstElement([1, 2, 3]); // 类型为number
const firstStr = getFirstElement(["a", "b"]); // 类型为string

// 泛型接口：定义可复用的结构模板
interface Result<T> {
  code: number;
  message: string;
  data: T; // 数据类型动态指定
}

// 后端返回用户列表的响应格式
type UserListResult = Result<User[]>;
const userRes: UserListResult = {
  code: 200,
  message: "success",
  data: [{ id: 1, name: "zhangsan" }, { id: 2, name: "lisi" }]
};

// 后端返回单个商品的响应格式
type GoodsResult = Result<{ id: number; price: number }>;
const goodsRes: GoodsResult = {
  code: 200,
  message: "success",
  data: { id: 100, price: 99 }
};

// 1. 简化基本类型（无太大意义，仅示例）
type MyString = string;
let str: MyString = "hello";

// 2. 简化联合类型（常用）
type Status = "pending" | "success" | "failed";
let taskStatus: Status = "pending";
taskStatus = "error"; // 报错：不在允许的类型范围内

// 3. 简化交叉类型（合并多个类型）
type Name = { name: string };
type Age = { age: number };
type Person = Name & Age; // 同时包含name和age属性

const person: Person = {
  name: "zhangsan",
  age: 25
};

// 4. 简化函数类型
type AddFunc = (a: number, b: number) => number;
const add: AddFunc = (x, y) => x + y;

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

// Partial<User> 等价于 { id?: number; name?: string; age?: number }
type PartialUser = Partial<User>;

const updateUser = (user: User, changes: PartialUser): User => {
  return { ...user, ...changes }; // 仅更新传入的属性
};

const user = { id: 1, name: "zhangsan", age: 25 };
updateUser(user, { age: 26 }); // 正确，仅修改age
updateUser(user, { gender: "male" }); // 报错：属性gender不存在

interface PartialUser {
  id?: number;
  name?: string;
}

// Required<PartialUser> 等价于 { id: number; name: string }
type RequiredUser = Required<PartialUser>;

const user: RequiredUser = {
  id: 1 // 报错：缺少必选属性name
};

type ReadonlyUser = Readonly<User>;
const user: ReadonlyUser = { id: 1, name: "zhangsan", age: 25 };
user.age = 26; // 报错：无法修改只读属性

function formatValue(value: string | number) {
  if (typeof value === "string") {
    // 代码块内TS自动识别value为string类型
    return value.toUpperCase();
  }
  // 代码块内TS自动识别value为number类型
  return value.toFixed(2);
}

formatValue("hello"); // 输出 "HELLO"
formatValue(123.456); // 输出 "123.46"

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Dog extends Animal {
  bark() {
    console.log("wangwang");
  }
}

class Cat extends Animal {
  meow() {
    console.log("miaomiao");
  }
}

function animalAction(animal: Animal) {
  if (animal instanceof Dog) {
    // 识别为Dog类型，可调用bark方法
    animal.bark();
  } else if (animal instanceof Cat) {
    // 识别为Cat类型，可调用meow方法
    animal.meow();
  }
}

animalAction(new Dog("旺财")); // 输出 "wangwang"

interface Fish {
  swim: () => void;
}

interface Bird {
  fly: () => void;
}

// 自定义类型守卫：返回值为 boolean，参数类型为类型谓词
function isFish(animal: Fish | Bird): animal is Fish {
  return (animal as Fish).swim !== undefined;
}

function animalMove(animal: Fish | Bird) {
  if (isFish(animal)) {
    animal.swim();
  } else {
    animal.fly();
  }
}

// user.ts：导出类型和函数
export interface User {
  id: number;
  name: string;
}

export function getUser(): User {
  return { id: 1, name: "zhangsan" };
}

// main.ts：导入使用
import { User, getUser } from "./user";

const user: User = getUser();

// utils.d.ts：声明JS库的类型
declare module "utils" {
  export function formatDate(date: Date): string;
  export const version: string;
}

// 使用时自动获得类型提示
import { formatDate } from "utils";
formatDate(new Date()); // 正确，IDE提示参数类型