😅[TYPESCRIPT] Một ví dụ sử dụng TypeScript Namespaces, xuất file use on browser (ok)

https://www.javatpoint.com/typescript-namespaces

Một ví dụ sử dụng trong broser không dùng webpack :(

C:\Users\Administrator\Desktop\news\index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="pi.js"></script>
</head>
<body>
</body>
</html>

C:\Users\Administrator\Desktop\news\app.ts

/// <reference path = "./studentCalc.ts" /> 
let TotalFee = studentCalc.AnualFeeCalc(1500, 4);
console.log("Output: " + TotalFee);

C:\Users\Administrator\Desktop\news\studentCalc.ts

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 <namespace_name> {  
    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

/// <reference path = "./studentCalc.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.

$ tsc --target es6 app.ts --outfile out.js
$ node ./out.js

It produces the following output.

Output: 240

Previous[TYPESCRIPT] Employing “Namespaces” in TypeScript to encapsulate your data Next[NODEJS] object hóa một file trong javascript Nodejs - require, exports and module.exports

Last updated 1 year ago

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="pi.js"></script> </head> <body> </body> </html>

namespace invoiceCalc { export namespace invoiceAccount { export class Invoice { public calculateDiscount(price: number) { return price * .60; } } } }