# \[TYPESCRIPT] Một ví dụ sử dụng TypeScript Namespaces, xuất file use on browser (ok)
### Một ví dụ sử dụng trong broser không dùng webpack :(
C:\Users\Administrator\Desktop\news\index.html
```html
Document
```
C:\Users\Administrator\Desktop\news\app.ts
```typescript
///
let TotalFee = studentCalc.AnualFeeCalc(1500, 4);
console.log("Output: " + TotalFee);
```
C:\Users\Administrator\Desktop\news\studentCalc.ts
```typescript
namespace studentCalc {
export function AnualFeeCalc(feeAmount: number, term: number) {
return feeAmount * term;
}
}
```
```
yarn tsc app.ts --outfile pi.js && node pi.js
```
### Namespace Declaration
Chúng ta có thể tạo một không gian tên bằng cách sử dụng từ khoá không gian tên theo sau là tên\_không gian tên. Tất cả các giao diện, lớp, hàm và biến có thể được xác định trong dấu ngoặc nhọn {} bằng cách sử dụng từ khóa export. Từ khóa export giúp mỗi thành phần có thể truy cập được bên ngoài không gian tên. Chúng ta có thể khai báo vùng tên như bên dưới.
```
namespace {
export interface I1 { }
export class c1{ }
}
```
Để truy cập các giao diện, lớp, hàm và biến trong một không gian tên khác, chúng ta có thể sử dụng cú pháp sau.
```
namespaceName.className;
namespaceName.functionName;
```
Nếu không gian tên nằm trong tệp TypeScript riêng biệt, thì nó phải được tham chiếu bằng cách sử dụng cú pháp tham chiếu dấu gạch chéo ba (///).
```
/// < reference path = "Namespace_FileName.ts" />
```
Chương trình sau đây giúp chúng ta hiểu việc sử dụng không gian tên.
**Create Project and Declare files**
NameSpace file: **studentCalc.tsx**
```
namespace studentCalc{
export function AnualFeeCalc(feeAmount: number, term: number){
return feeAmount * term;
}
}
```
Main File: **app.tsx**
```
///
let TotalFee = studentCalc.AnualFeeCalc(1500, 4);
console.log("Output: " +TotalFee);
```
**Compiling and Executing Namespaces**
Open the terminal and go to the location where you stored your project. Then, type the following command.
```
$ tsc --target es6 app.ts
$ node app.js
```
We will see the output below: **studentCalc** is not defined.
Vì vậy, cách chính xác để biên dịch và thực thi đoạn mã trên, chúng ta cần sử dụng lệnh sau trong cửa sổ đầu cuối.
```
$ tsc --target es6 app.ts --outfile out.js
$ node ./out.js
```
Now, we can see the following output.
Hoặc sử dụng lệnh yarn
```
yarn tsc index.tsx --out pi.js && node pi.js
```
### Nested Namespaces
Không gian tên cũng cho phép chúng ta xác định một không gian tên này thành một không gian tên khác. Chúng ta có thể truy cập các thành viên của không gian tên lồng nhau bằng cách sử dụng toán tử dấu chấm (.). Ví dụ sau đây giúp chúng ta hiểu không gian tên lồng nhau rõ ràng hơn.
Nested NameSpace file: **StoreCalc.tsx**
```
namespace invoiceCalc {
export namespace invoiceAccount {
export class Invoice {
public calculateDiscount(price: number) {
return price * .60;
}
}
}
}
```
```
yarn tsc app.ts --outfile pi.js && node pi.js
```
Now **compile** and **execute** the above code with the below command.
1. $ tsc --target es6 app.ts --outfile out.js
2. $ node ./out.js
It produces the following output.
```
Output: 240
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://javascriptuse.gitbook.io/advanced/typescript-mot-vi-du-su-dung-typescript-namespaces-ok.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.