TypeScript cơ bản (phần 1)

function add(num1, num2) {
  return num1 + num2;
}

console.log(add(1, 6));    // 7 ✅
console.log(add('1', '6')); // 16 ❌

function add(num1: number, num2: number) {
  return num1 + num2;
}

console.log(add(1, 6));      // 7 ✅
console.log(add('1', '6'));  // ❌ Lỗi ngay lúc compile

let age: number = 25;
let price: number = 9.99;
let temperature: number = -3;

age = '25'; // ❌ Lỗi: không thể gán string vào number

let name: string = 'Alex';
let greeting: string = `Xin chào, ${name}!`;

name = 42; // ❌ Lỗi

let isLoggedIn: boolean = false;
let hasPermission: boolean = true;

isLoggedIn = 1; // ❌ Lỗi: 1 không phải boolean

// Khai báo type inline
let user: { name: string; age: number } = {
  name: 'Alex',
  age: 25,
};

user.name = 'Bình';  // ✅
user.age = 'hai mươi'; // ❌ Lỗi: age phải là number
user.email = 'a@b.com'; // ❌ Lỗi: email không có trong type

let scores: number[] = [9, 8, 10];       // cách phổ biến hơn
let names: Array<string> = ['An', 'Bình']; // cách viết generic

scores.push(7);    // ✅
scores.push('A');  // ❌ Lỗi: 'A' không phải number

let mixed: (string | number)[] = ['hello', 1, 'world', 2];

let data: any = 'hello';
data = 42;        // ✅ không lỗi
data = true;      // ✅ không lỗi
data.foo.bar();   // ✅ không lỗi — nhưng có thể vỡ lúc runtime

let message = 'Hello'; // TypeScript tự hiểu đây là string
message = 123;         // ❌ Lỗi: không thể gán number vào string

const num1El = document.getElementById('num1') as HTMLInputElement;
const num1 = num1El.value; // type: string

const num1 = parseFloat(num1El.value); // hoặc +num1El.value

const num1El = document.getElementById('num1') as HTMLInputElement;
const num1 = num1El.value; // type: string

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

add(num1, 5); // ❌ Lỗi: Argument of type 'string' is not assignable to parameter of type 'number'

const btn = document.getElementById('btn');
btn.addEventListener('click', handler); // ❌ btn có thể null

// Cách 1: kiểm tra null trước
if (btn) {
  btn.addEventListener('click', handler);
}

// Cách 2: dùng ! để khẳng định "phần tử này chắc chắn tồn tại"
const btn = document.getElementById('btn')!;
btn.addEventListener('click', handler); // ✅

{
  "target": "ES2020",      // Compile TypeScript sang phiên bản JS nào
  "module": "ESNext",      // Hệ thống module: CommonJS, ESNext, NodeNext...
  "moduleResolution": "Bundler", // Cách resolve import — quan trọng với Vite/bundler
  "lib": ["ES2020", "DOM"],      // TypeScript biết những API nào tồn tại
  "outDir": "./dist",      // Thư mục chứa file JS sau khi compile
  "rootDir": "./src",      // Thư mục chứa file TypeScript nguồn
  "noEmit": true,          // Không tạo file JS (dùng khi bundler tự xử lý)
  "skipLibCheck": true     // Bỏ qua kiểm tra type trong node_modules
}

{
  "target": "ES2022",
  "module": "ESNext",
  "moduleResolution": "Bundler",
  "lib": ["ES2022"],       // Không có "DOM" — Workers không có browser API
  "noEmit": true,
  "skipLibCheck": true
}

// @ts-ignore
const result = someWeirdFunction(data); // TypeScript bỏ qua dòng này

{
  "strict": false  // tắt strict mode trước
}

{
  "noImplicitAny": false,  // cho phép biến không khai báo type
  "strictNullChecks": false // bỏ qua kiểm tra null/undefined
}