TypeScript — nền tảng hệ thống kiểu

// JavaScript: ai cũng gọi được, lỗi runtime
function greet(name) {
  return 'Xin chào, ' + name.toUpperCase();
}

greet('An');     // 'Xin chào, AN'
greet(42);       // 💥 TypeError: name.toUpperCase is not a function
greet();         // 💥 TypeError: Cannot read properties of undefined

// TypeScript: lỗi BẮT được trước khi chạy
function greet(name: string): string {
  return 'Xin chào, ' + name.toUpperCase();
}

greet('An');     // ✅ ok
greet(42);       // ❌ TS2345: Argument of type 'number' not assignable to 'string'
greet();         // ❌ TS2554: Expected 1 arguments, but got 0

# 1. Khởi tạo project Node
npm init -y

# 2. Cài TypeScript + tsx (chạy .ts trực tiếp, không build)
npm install -D typescript tsx @types/node

# 3. Sinh tsconfig.json
npx tsc --init

# 4. Tạo file hello.ts
echo 'const msg: string = "Hello TS"; console.log(msg);' > hello.ts

# 5. Chạy thử
npx tsx hello.ts        # Hello TS — không cần compile trước

# 6. Kiểm tra type (không build)
npx tsc --noEmit        # Báo lỗi type nếu có

# 7. Build thật ra .js (nếu cần deploy)
npx tsc                 # Sinh hello.js theo cấu hình tsconfig

{
  "compilerOptions": {
    "target": "ES2022",           // Output JS phiên bản nào
    "module": "NodeNext",         // Module system (Node hiện đại)
    "moduleResolution": "NodeNext",

    "strict": true,                // 🎯 Bật tất cả strict flags
    "noUncheckedIndexedAccess": true, // arr[0] có thể undefined
    "noImplicitOverride": true,

    "esModuleInterop": true,       // Cho import default từ CommonJS
    "skipLibCheck": true,          // Bỏ qua type check trong node_modules
    "forceConsistentCasingInFileNames": true,

    "outDir": "./dist",             // Nơi xuất .js
    "rootDir": "./src",            // Gốc source .ts
    "declaration": true,           // Xuất kèm .d.ts
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

let name: string = 'Việt';
let age: number = 22;
let active: boolean = true;
let big: bigint = 100n;
let uid: symbol = Symbol('id');
let nothing: null = null;
let notSet: undefined = undefined;

// Array
let nums: number[] = [1, 2, 3];
let names: Array<string> = ['a', 'b'];   // equivalent cú pháp generic

// Tuple — fixed length, fixed type per slot
let pair: [string, number] = ['age', 22];

// Verbose — không cần
let a: string = 'hello';

// Inference — TS tự biết a là string
let a = 'hello';            // inferred: string
const b = 'hello';          // inferred: 'hello' (literal!)

// Sau đó vẫn type-safe
a = 42;  // ❌ TS2322: Type 'number' not assignable to 'string'

let x: any = 'hello';
x = 42;                  // ok
x = { a: 1 };             // ok
x.toUpperCase();         // ok (TS không check, runtime sẽ 💥 vì 42 không có method này)
x.whatever().chain();   // ok ở compile, 💥 ở runtime

let x: unknown = JSON.parse('{"a":1}');

x.toUpperCase();         // ❌ Object is of type 'unknown'
x.a;                     // ❌ cùng lỗi

// Phải narrow trước
if (typeof x === 'string') {
  x.toUpperCase();       // ✅ x bây giờ là string
}

if (typeof x === 'object' && x !== null && 'a' in x) {
  console.log(x.a);     // ✅
}

// Function throw — không bao giờ return bình thường
function fail(msg: string): never {
  throw new Error(msg);
}

// Function vòng lặp vô hạn
function loop(): never {
  while (true) { }
}

// Exhaustiveness check — phổ biến nhất
type Shape = { kind: 'circle' } | { kind: 'square' };

function area(s: Shape) {
  switch (s.kind) {
    case 'circle': return 3.14;
    case 'square': return 1;
    default: {
      const _exhaustive: never = s;   // ❌ nếu thêm 'triangle' mà quên case
      return _exhaustive;
    }
  }
}

// Function không cần trả về
function log(msg: string): void {
  console.log(msg);
  // không return, hoặc return; (không có giá trị)
}

const result = log('hi');   // result: void (gán được vào biến void hoặc any)

const mode: 'dev' = 'dev';     // type là literal 'dev', không phải string

// const tự infer literal, let infer rộng
const a = 'hello';             // type: 'hello'
let b = 'hello';               // type: string

type Status = 'idle' | 'loading' | 'success' | 'error';

let s: Status = 'idle';    // ✅
s = 'loading';             // ✅
s = 'done';                // ❌ TS2322

// Hỗ trợ IDE: gõ s = '|' tự suggest 4 giá trị
// Refactor: đổi tên 'idle' → 'pending' chỉ 1 click

// Union nhiều type khác nhau
type Id = string | number;
function format(id: Id): string {
  return `ID-${id}`;
}

// type alias
type User = {
  id: string;
  name: string;
  age: number;
};

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

// Cả 2 dùng giống hệt:
const u: User = { id: '1', name: 'An', age: 22 };

interface User { id: string; }
interface User { name: string; }      // gộp lại
// Bây giờ User có { id, name }

const u: User = { id: '1', name: 'An' };  // ✅

// Với type — báo lỗi
type Cat = { name: string; };
type Cat = { age: number; };           // ❌ Duplicate identifier 'Cat'

type HasId = { id: string; };
type HasName = { name: string; };

type User = HasId & HasName;       // { id; name; }

const u: User = { id: '1', name: 'An' };    // ✅
const u2: User = { id: '1' };              // ❌ thiếu name

// Mix nhiều shape — pattern phổ biến (Mixin)
type Timestamped = { createdAt: Date; updatedAt: Date; };
type Soft = { deletedAt: Date | null; };

type AuditedUser = User & Timestamped & Soft;

// Tương đương:
interface Animal { name: string; }
interface Dog extends Animal { bark(): void; }

type Animal2 = { name: string; };
type Dog2 = Animal2 & { bark(): void; };

interface User {
  readonly id: string;     // gán 1 lần, không sửa
  name: string;
  age?: number;             // optional — có thể vắng mặt
}

const u: User = { id: '1', name: 'An' };  // ✅ age vắng được

u.name = 'Bình';       // ✅
u.id = '2';            // ❌ Cannot assign to 'id' because it is a read-only property

// Optional → type thực = T | undefined
u.age;                // number | undefined

// Readonly array
const nums: readonly number[] = [1, 2, 3];
nums.push(4);          // ❌ Property 'push' does not exist on type 'readonly number[]'
nums[0] = 9;           // ❌

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

// Arrow function
const mul = (a: number, b: number): number => a * b;

// Return type thường có thể bỏ — inference biết
const sub = (a: number, b: number) => a - b;  // inferred: number

// Optional parameter (?)
function greet(name: string, title?: string) {
  return title ? `${title} ${name}` : name;
}

// Default parameter (đồng thời optional)
function power(x: number, n: number = 2) {
  return x ** n;
}

// Rest parameter
function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0);
}

// Type alias cho signature
type BinaryOp = (a: number, b: number) => number;

const add: BinaryOp = (a, b) => a + b;     // a, b auto suy number
const mul: BinaryOp = (a, b) => a * b;

// Interface cho function — ít dùng nhưng có
interface Compare<T> {
  (a: T, b: T): number;
}

function format(x: string | number): string {
  if (typeof x === 'string') {
    // trong nhánh này, x được narrow xuống string
    return x.toUpperCase();
  }
  // ở đây x chỉ còn là number
  return x.toFixed(2);
}

function describe(x: Date | string): string {
  if (x instanceof Date) {
    return x.toISOString();      // x: Date
  }
  return x;                       // x: string
}

type Fish = { swim(): void; };
type Bird = { fly(): void; };

function move(a: Fish | Bird) {
  if ('swim' in a) {
    a.swim();     // a: Fish
  } else {
    a.fly();      // a: Bird
  }
}

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

// Hàm kiểm tra runtime shape
function isUser(x: unknown): x is User {
  return (
    typeof x === 'object' &&
    x !== null &&
    'id' in x && typeof (x as any).id === 'string' &&
    'name' in x && typeof (x as any).name === 'string'
  );
}

function use(data: unknown) {
  if (isUser(data)) {
    console.log(data.name);    // ✅ data: User
  }
}

type Result<T> =
  | { ok: true;  value: T }
  | { ok: false; error: string };

function handle(r: Result<number>) {
  if (r.ok) {
    console.log(r.value);    // ✅ r: { ok: true; value: number }
  } else {
    console.log(r.error);    // ✅ r: { ok: false; error: string }
  }
}

// document.getElementById trả HTMLElement | null
// Ta biết đó là input → assert
const input = document.getElementById('email') as HTMLInputElement;
input.value = 'a@b.com';      // ✅ TS không phàn nàn

// Cú pháp cũ <Type> — không dùng trong .tsx vì xung đột JSX
const el = <HTMLInputElement>document.getElementById('email');

// Const assertion
const colors = ['red', 'green', 'blue'] as const;
// type: readonly ['red', 'green', 'blue']
// (không as const → string[])