TypeScript 入门 + 进阶训练

function greet(name: string): string {
  return "你好，" + name;
}

const msg: string = greet("小明");
console.log(msg);          // 你好，小明

npx tsc hello.ts      # 生成 hello.js（擦除类型后的纯 JS）
node hello.js         # 运行

# 或者一步到位（需要 deno / bun）
deno run hello.ts
bun run hello.ts

// tsconfig.json 关键项
{
  "compilerOptions": {
    "strict": true,            // 开启全部严格检查
    "noImplicitAny": true,     // 不允许隐式 any
    "strictNullChecks": true,  // null/undefined 不能随便赋值
    "noEmitOnError": true      // 有类型错误就不生成 JS
  }
}

npx tsc --noEmit        # 只检查类型，不生成 .js
npx tsc --noEmit --watch # 监听文件，保存即检查

let title: string = "课程";
let count: number = 10;
let flag: boolean = false;

let nums: number[] = [1, 2, 3];
let pair: [string, number] = ["age", 18];   // 元组：第一项是字符串，第二项是数字

console.log(title, count, flag, nums, pair);
console.log(pair[0].toUpperCase());          // AGE

let a: any = getData();
a.foo.bar.baz();        // 编译器不拦，运行时可能炸

let u: unknown = getData();
// u.trim();            // ❌ 不能直接调方法
if (typeof u === "string") {
  u.trim();             // ✅ 收窄成 string 后才能用
}

// 现代首选：字面量联合 + as const 常量对象
const ROLE = { ADMIN: "admin", USER: "user" } as const;
type Role = typeof ROLE[keyof typeof ROLE];   // "admin" | "user"
let r: Role = ROLE.ADMIN;

let x = 10;          // 推断为 number
x = "hi";            // ❌ 类型报错：number 不能赋给 string

const y = 10;        // 推断为字面量类型 10（不是 number！）
// y = 11;           // ❌ 字面量类型 10 不能变成 11

let z: number = 10;  // 显式标注为 number，才能再赋别的数
z = 11;              // ✅ OK

type Direction = "上" | "下" | "左" | "右";
let d: Direction = "上";     // ✅
// d = "前";                  // ❌ 不在集合里

type StatusCode = 200 | 404 | 500;
let code: StatusCode = 200;  // ✅

function double(n: number) {
  return n * 2;     // 推断返回 number
}

// 显式标注：若以后误返回 string，编译立即报错
function doubleSafe(n: number): number {
  return n * 2;
}

let mode = "dev";          // 推断 string（拓宽）
const opts = { mode: "dev" } as const;  // mode 锁成字面量 "dev"
type M = typeof opts.mode;  // "dev"（没被拓宽）

interface User {
  id: number;
  name: string;
  email?: string;        // ? 表示可选属性
  readonly role: string; // 只读：赋值后不能再改
}

const u: User = {
  id: 1,
  name: "小明",
  role: "admin"
};
// u.role = "user";      // ❌ 只读属性不能改
console.log(u.name);

interface StringMap {
  [key: string]: string;   // 任意字符串键，值都是 string
}
const m: StringMap = { a: "1", b: "2" };
console.log(m.a, m.b);

type Id = number | string;
type Point = { x: number; y: number };
type Named = { name: string };
type NamedPoint = Point & Named;   // 交叉：同时有 x/y/name

const p: NamedPoint = { x: 1, y: 2, name: "原点" };
console.log(p);

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

function join(...parts: string[]): string {   // 剩余参数
  return parts.join("-");
}

console.log(add(3));          // 3（b 用默认 0）
console.log(add(3, 4));       // 7
console.log(join("a", "b", "c")); // a-b-c

// 函数类型：把“长这样”的函数存进变量
const fn: (x: number) => number = (x) => x * 2;
console.log(fn(5));           // 10

function reverse(x: string): string;
function reverse(x: number): number;
function reverse(x: string | number): string | number {
  if (typeof x === "string") return x.split("").reverse().join("");
  return Number(x.toString().split("").reverse().join(""));
}
console.log(reverse("abc"));   // cba
console.log(reverse(123));     // 321

interface User { address?: { city?: string } }
const u: User = {};
console.log(u.address?.city);          // undefined（不会报错）
console.log(u.address?.city ?? "未知"); // "未知"

const n = 0;
console.log(n ?? 10);   // 0（?? 只在 null/undefined 时兜底，不像 || 把 0 也兜底）
console.log(n || 10);   // 10（|| 把 0 当假值，常是坑）

interface Calculator {
  value: number;
  add(this: Calculator, n: number): void;
}
const calc: Calculator = {
  value: 0,
  add(n) { this.value += n; }
};
calc.add(5);
console.log(calc.value);   // 5

class Animal {
  protected legs: number = 4;     // 子类可见，外部不可见
  constructor(public name: string) {}  // 参数属性：自动建字段并赋值
  move(): void {
    console.log(this.name + " 用 " + this.legs + " 条腿走");
  }
}

class Dog extends Animal {
  bark(): void {
    console.log("汪汪，legs=" + this.legs);
  }
}

const d = new Dog("旺财");
d.move();     // 旺财 用 4 条腿走
d.bark();     // 汪汪，legs=4

abstract class Shape {
  abstract area(): number;     // 子类必须实现
  describe(): void {           // 已实现的方法
    console.log("面积=" + this.area());
  }
}
class Square extends Shape {
  constructor(private side: number) { super(); }
  area(): number { return this.side * this.side; }
}
new Square(3).describe();      // 面积=9

interface Loggable { log(): void; }
interface Serializable { toJSON(): string; }
class Model implements Loggable, Serializable {
  log() { console.log("log"); }
  toJSON() { return "{}"; }
}

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

const a = identity<string>("hi");   // a: string
const b = identity(123);            // 推断 b: number，可省略显式标注

// 泛型约束“容器里的第一个元素”
function first<T>(arr: T[]): T {
  return arr[0];
}
console.log(first([1, 2, 3]));      // 1
console.log(first(["x", "y"]));     // x

class Box<T = string> {       // 默认 T = string
  constructor(public value: T) {}
  get(): T { return this.value; }
}
const a = new Box("hi");        // T 推断为 string
const b = new Box<number>(10);  // 显式指定 number
console.log(a.get(), b.get());

// 泛型接口
interface Pair<K, V> { key: K; val: V; }
const p: Pair<string, number> = { key: "age", val: 18 };

function getProp<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];           // 返回值类型精确对应 key
}
const u = { id: 1, name: "x" };
const n: number = getProp(u, "id");    // 返回 number
const s: string = getProp(u, "name");  // 返回 string
// getProp(u, "age");        // ❌ "age" 不是 u 的键

type Id = number | string;     // 联合
function printId(id: Id): void {
  if (typeof id === "string") {
    console.log("字符串ID: " + id.toUpperCase());  // 这里 id 被收窄为 string
  } else {
    console.log("数字ID: " + id.toFixed(0));        // 这里 id 是 number
  }
}
printId(123);
printId("abc");

// 交叉：同时有 A 和 B 的字段
type A = { x: number };
type B = { y: number };
type C = A & B;            // { x: number; y: number }
const c: C = { x: 1, y: 2 };

interface A { type: "a"; a: number; }
interface B { type: "b"; b: string; }
type X = A | B;

function f(x: X) {
  if ("a" in x) {
    console.log(x.a);     // 收窄到 A
  } else {
    console.log(x.b);     // 收窄到 B
  }
}

class Cat { meow() {} }
class Dog { bark() {} }
function sound(p: Cat | Dog) {
  if (p instanceof Cat) p.meow();
  else p.bark();
}

// ❌ 返回 boolean，if 里不会收窄
function isFishWrong(x: unknown): boolean { return ... }

// ✅ 类型谓词，if 里 x 收窄为 Fish
function isFish(x: unknown): x is { name: string } {
  return typeof x === "object" && x !== null && "name" in x;
}

enum Color { Red, Green, Blue }   // 数字枚举：0,1,2
let c: Color = Color.Green;
console.log(c);                   // 1

enum Dir { Up = "UP", Down = "DOWN" }  // 字符串枚举，调试更友好
let d: Dir = Dir.Up;
console.log(d);                   // UP

// 字符串枚举（有运行时对象）
enum Status { Ok = "OK", Err = "ERR" }
let s: Status = Status.Ok;

// 字面量联合（零成本，推荐）
type Status2 = "OK" | "ERR";
let s2: Status2 = "OK";
console.log(s, s2);

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}
export const PI = 3.14159;

// main.ts
import { add, PI } from "./math";
console.log(add(1, 2));   // 3
console.log(PI);          // 3.14159

// 也可以整体导入
import * as M from "./math";
console.log(M.add(3, 4)); // 7

import type { User } from "./models";   // 仅类型，编译后消失
import { add } from "./math";           // 值，会保留

const u: User = { id: 1, name: "x" };
console.log(add(1, 2));

async function loadEditor() {
  const mod = await import("./editor");   // 运行时才加载该模块
  mod.open();
}

export { add } from "./math";          // 重导出值
export type { User } from "./models";  // 重导出类型
import { add as sum } from "./math";   // 导入时改名，避免冲突

const el = document.getElementById("app") as HTMLElement;  // 断言非空 DOM
const val = ("123" as unknown) as number;  // 双重断言：unknown 中转

// 非空断言 ! ：告诉编译器“这里绝不可能是 null/undefined”
function len(s: string | null): number {
  return s!.length;     // 若实际是 null 会运行时报错
}
console.log(len("hi"));

const a = "123" as number;   // ❌ 类型说是 number，值仍是字符串
const b = Number("123");     // ✅ 真正转成数字 123
console.log(typeof a, typeof b);  // string number

interface Point { x: number; y: number; }
interface Point3D { x: number; y: number; z: number; }

let p: Point;
const p3: Point3D = { x: 1, y: 2, z: 3 };
p = p3;        // ✅ Point3D 有 Point 要的所有字段，可赋给 Point
// p3 = p;     // ❌ 反过来不行：Point 缺 z

function draw(pt: Point) {}
draw({ x: 1, y: 2, z: 3 });   // ✅ 多余字段 ok（只要不缺）

// 约束：T 必须有 length 属性
function len<T extends { length: number }>(arg: T): number {
  return arg.length;
}
console.log(len("hello"));      // 5
console.log(len([1, 2, 3]));    // 3
// len(10);                      // ❌ number 没有 length

// 条件类型
type IsString<T> = T extends string ? "是字符串" : "不是字符串";
type A = IsString<string>;      // "是字符串"
type B = IsString<number>;      // "不是字符串"

type MyReturn<T> = T extends (...args: any[]) => infer R ? R : never;
function f(): number { return 1; }
type R = MyReturn<typeof f>;     // number

type Ele<T> = T extends (infer E)[] ? E : T;
type E = Ele<string[]>;          // string

type Mutable<T> = { -readonly [P in keyof T]: T[P] };       // 去只读
type Required2<T> = { [P in keyof T]-?: T[P] };             // 去可选（= Required）
interface RO { readonly id: number; name?: string; }
type M = Mutable<RO>;   // { id: number; name?: string }

interface Circle { kind: "circle"; r: number; }
interface Rect   { kind: "rect"; w: number; h: number; }
type Shape = Circle | Rect;       // 判别联合：都有 kind 标签

function area(s: Shape): number {
  switch (s.kind) {               // 用标签字段分流，TS 自动收窄
    case "circle": return 3.14 * s.r * s.r;   // 这里 s 是 Circle
    case "rect":   return s.w * s.h;          // 这里 s 是 Rect
  }
}
console.log(area({ kind: "circle", r: 2 }));  // 12.56
console.log(area({ kind: "rect", w: 3, h: 4 })); // 12

function isString(x: unknown): x is string {
  return typeof x === "string";
}
function foo(x: unknown) {
  if (isString(x)) {
    console.log(x.toUpperCase());  // 收窄为 string
  }
}

type Async<T> =
  | { status: "loading" }
  | { status: "ok"; data: T }
  | { status: "error"; msg: string };

function render<T>(s: Async<T>): string {
  switch (s.status) {
    case "loading": return "加载中...";
    case "ok": return "数据:" + JSON.stringify(s.data);
    case "error": return "出错:" + s.msg;
  }
}
console.log(render({ status: "ok", data: [1, 2] }));

function Log(target: any, key: string, desc: PropertyDescriptor) {
  const old = desc.value;
  desc.value = function (...args: any[]) {
    console.log("调用 " + key + "，参数:", args);
    return old.apply(this, args);
  };
}

class Calc {
  @Log
  add(a: number, b: number): number {
    return a + b;
  }
}
new Calc().add(1, 2);   // 打印日志后返回 3

function Version(v: string) {
  return function (ctor: Function) {
    ctor.prototype.version = v;
  };
}
@Version("1.0")
class Service {}
console.log((new Service() as any).version);   // 1.0

interface User { id: number; }
interface User { name: string; }   // 同名 interface 自动合并
// 合并后等价于 { id: number; name: string }
const u: User = { id: 1, name: "x" };

// 常见用途：给第三方库的类型“偷偷加字段”
interface Window {
  myConfig: { theme: string };
}
window.myConfig = { theme: "dark" };

// my-augment.d.ts
import "some-lib";
declare module "some-lib" {
  export interface Options {
    timeout?: number;
  }
}

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

type UserPreview = Pick<User, "id" | "name">;   // { id; name }
type UserNoEmail = Omit<User, "email">;          // { id; name }
type UserInput = Partial<User>;                   // 全部可选，适合“更新表单”

const map: Record<string, number> = { a: 1, b: 2 };

type T = { a: number; b: string };
type K = keyof T;                 // "a" | "b"

// 映射类型：把每个属性变成只读
type ReadonlyT = { readonly [P in keyof T]: T[P]; };

type MyPartial<T> = { [P in keyof T]?: T[P]; };
type MyReadonly<T> = { readonly [P in keyof T]: T[P]; };
type MyPick<T, K extends keyof T> = { [P in K]: T[P]; };
type MyRecord<K extends keyof any, V> = { [P in K]: V; };

interface U { id: number; name: string; }
const a: MyPartial<U> = {};            // 全部可选
const b: MyReadonly<U> = { id: 1, name: "x" }; // 只读

type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};
interface Cfg { db: { host: string; port: number }; debug: boolean; }
const patch: DeepPartial<Cfg> = { db: { port: 5432 } };  // 嵌套也能局部填

type Shape = { kind: "circle" } | { kind: "rect" };

function area(s: Shape): number {
  switch (s.kind) {
    case "circle": return 1;
    case "rect":   return 2;
    default:
      // 若以后 Shape 加了 "triangle"，这里 s 不再是 never，编译报错
      const _exhaustive: never = s;
      return _exhaustive;
  }
}

function fail(msg: string): never {
  throw new Error(msg);   // 永不返回
}

type MyExclude<T, U> = T extends U ? never : T;
type A = MyExclude<"a" | "b" | "c", "a">;   // "b" | "c"

type MyExtract<T, U> = T extends U ? T : never;
type B = MyExtract<string | number, string>; // string

// 去掉数组的嵌套：DeepFlatten
type DeepFlatten<T extends any[]> =
  T extends [infer Head, ...infer Tail]
    ? Head extends any[]
      ? [...DeepFlatten<Head>, ...DeepFlatten<Tail>]
      : [Head, ...DeepFlatten<Tail>]
    : [];

type R = DeepFlatten<[[1], [2, [3]]]>;   // [1, 2, 3]

// 模板字面量 + 条件：把 "getUser" 变成 "GetUser"
type CapitalizeKeys<K extends string> =
  K extends `get${infer Rest}` ? `Get${Capitalize<Rest>}` : K;
type A = CapitalizeKeys<"getUser">;     // "GetUser"

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "Bundler",   // Vite/webpack 用 Bundler
    "strict": true,
    "noUnusedLocals": true,           // 未用变量报错
    "noUnusedParameters": true,       // 未用参数报错
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "skipLibCheck": true,             // 跳过 .d.ts 检查，提速
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}