如何允许模块中定义的类可以在模块外部访问?
在 typescript 中通过使用 import 语句,一个模块可以在另一个模块中使用。模块中声明的任何变量、类、方法或其他对象都不能在模块之外访问。关键字“export”可以用来构造一个模块,而“import”这个词可以用来将它导入另一个模块。让我们演示如何做到这一点。
导出:可以使用单独的.ts 文件来创建模块,该模块可以包含变量、方法和类。对于您打算包含在模块中并从其他模块访问的所有定义,必须在它们之前使用前缀 export 。
下面的代码保存在一个名为 student.ts 的打字稿文件中。该模块有两个变量和一个名为 student 的类。变量部分可以在另一个模块中使用,因为它以关键字“export”为前缀,但 student_name 变量不能在另一个模块中访问,因为它没有以关键字“export”为前缀。
Javascript
export let section: number = 9;
export class Student {
student_id: number;
name: string;
constructor(name: string, id: number) {
this.name = name;
this.student_id = id;
}
displayStudentDetails() {
console.log(
"student_id: " + `${this.student_id}` + ",
Student Name: " + this.name
);
}
}
let student_name: string = "aditi";
Javascript
import { Student } from "./student";
let Object = new Student("richa", 61);
console.log(Object.displayStudentDetails());
Javascript
import * as stu from "./student";
let Object = new stu.Student("richa", 61);
console.log(Object.displayStudentDetails());
let variable = stu.section;
console.log(variable);
Javascript
import * as stu from "./student";
// let Object = new stu.Student("richa", 61);
// console.log(Object.displayStudentDetails());
let variable = stu.student_name;
console.log(variable);
Javascript
import { Student as S } from "./three";
let Object = new S("richa", 61);
console.log(Object.displayStudentDetails());
导入:当前模块可以使用“import”关键字从其他类访问变量、类等。
句法:
Import { name_of_the_class_or_variable_being_exported } from "file_path"
file_path : file path should be specified without any extension.
我们只能导入那些以关键字“export”为前缀的方法、变量或类。
示例 1:
- 导入模块的单一导出:在本例中,Student 类是从 student.ts 模块导入的。不会导入来自 student.ts 的其他变量。该文件可以命名为 studentImport.ts。
Javascript
import { Student } from "./student";
let Object = new Student("richa", 61);
console.log(Object.displayStudentDetails());
输出:
student_id: 61, Student Name: richa
- 导入整个模块:在这个例子中,我们从模块中导入所有的导出。 * 语法用于导入前一个模块的所有导出。
Javascript
import * as stu from "./student";
let Object = new stu.Student("richa", 61);
console.log(Object.displayStudentDetails());
let variable = stu.section;
console.log(variable);
输出:
student_id: 61, Student Name: richa
undefined
9
如果我们尝试导入不以关键字 export 为前缀的 student_name 怎么办?打字稿编译器引发错误。
Javascript
import * as stu from "./student";
// let Object = new stu.Student("richa", 61);
// console.log(Object.displayStudentDetails());
let variable = stu.student_name;
console.log(variable);
输出:
error TS2339: Property 'student_name' does not exist on type 'typeof import("/Users/...")'.
6 let variable = stu.student_name;
更改模块导出的名称:这里,' as'关键字用于更改导出的名称。有时我们想将导出重命名为更简单的名称,在这种情况下,我们可以重命名导出,如下例所示。此代码在 studentImport.ts 中。
Javascript
import { Student as S } from "./three";
let Object = new S("richa", 61);
console.log(Object.displayStudentDetails());
输出:
student_id: 61, Student Name: richa
undefined
编译注意事项:首先必须在终端中编译具有 import 语句的 typescript 文件。
tsc studentImport.ts
然后必须使用以下命令编译创建的 javascript 文件:
node studentImport.js