😀Cách để compile file ts sang js chạy luôn trên trình duyệt (ok)

Đọc bài này có giải pháp tốt hơn: https://learnreact.gitbook.io/learnreact/type-script/cau-hinh-nay-rat-quan-trong-lib-no-giup-chay-js-truc-tiep-trong-trinh-duyet-ok

package.json

{
  "name": "typescript",
  "version": "1.0.0",
  "main": "app.ts",
  "scripts": {
    "build": "tsc",
    "dev": "npx tsx app.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/systemjs": "^6.15.1",
    "@types/typescript": "^2.0.0",
    "tsx": "^4.19.2",
    "typescript": "^5.7.3"
  },
  "dependencies": {
    "@types/react": "^19.0.8",
    "react": "^19.0.0"
  }
}

Chú ý 1: Không sử dụng CommonJS vì nếu sử dụng CommonJS nó sẽ compile ra require mà trình duyệt không hỗ trợ, trình duyệt chỉ hỗ trợ import

Nếu muốn sử dụng CommonJS thì có 1 bài hướng dẫn rồi đọc thêm: https://learnreact.gitbook.io/learnreact/advanced-javascript/trinh-duyet-khong-co-require-nhung-node.js-thi-co.-voi-browserify-de-trinh-duyet-cung-co-ok

Chú ý 2: Ghi thêm đuôi .js nhưng thực chất nó sẽ gọi file add.ts mục đích sau khi đuôi .js nó sẽ compile ra cũng đuôi .js như import {add} from "./add/add.js" còn nếu không ghi nó chỉ sinh ra như sau import {add} from "./add/add" trên trình duyệt nó sẽ không hiểu là gì.

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "target": "es2016",
    "module": "ES2022",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "declaration": true,
    "skipLibCheck": true,
    "outDir": "./dist",
  }
}

app.ts

import { add } from "./add/add.js"
const result = add(1, 4)
console.log(result) // Output: 5

add\add.ts

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

Sau khi build nó tạo ra