> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/advanced/type-script/cach-de-compile-file-ts-sang-js-chay-luon-tren-trinh-duyet-ok.md).

# 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

```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>

<figure><img src="https://2086325979-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOfwU52oyTCInVkN26DVZ%2Fuploads%2FvZpiHEzvMMia0k3exT7S%2Fimage.png?alt=media&amp;token=2e801feb-4bb7-47f4-91d3-645edd7f17ff" alt=""><figcaption></figcaption></figure>

### 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ì.

<figure><img src="https://2086325979-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOfwU52oyTCInVkN26DVZ%2Fuploads%2FQwxHLgmfIjt3m6GXmPRf%2Fimage.png?alt=media&amp;token=9506fa5e-3f35-46ab-9187-7e1a7bc01f1a" alt=""><figcaption></figcaption></figure>

tsconfig.json

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

app.ts

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

add\add.ts

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

Sau khi build nó tạo ra

<figure><img src="https://2086325979-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOfwU52oyTCInVkN26DVZ%2Fuploads%2FVs41zpT6BdDBm2YGK2JE%2Fimage.png?alt=media&amp;token=5f7221a1-efea-4b75-99f8-efbfa83ac0cb" alt=""><figcaption></figcaption></figure>