React项目中:“react”: “18.2.0”、 “@typescript-eslint/eslint-plugin”:“5.40.0”
[name].ts文件中
namespace 是 ts 早期时为了解决模块化而创造的关键字,中文称作命名空间。
由于历史遗留原因,早期没有 ES6 时,ts 提供了一种模块化方案,使用 module 关键字表示内部模块。但后来 ES6 也使用了 module 关键字,ts 为兼容 ES6,使用 namespace 替代了自己的 module,更名为命名空间。
实例验证, tsc myTest.ts
查看编译是否ok
/// 文件目录:@/pages/test1/myTsTest.ts
namespace myTsTest {
const version = '1.9.6';
const simpleName = 'myTsTest';
function getVertion(): string {
return version;
}
export function getTsSimpleName() {
return simpleName;
}
}
/// 文件目录:@/pages/test-dir/myTest.ts
/** 预期结果(不尽人意) */
export function main() {
myTsTest.getTsSimpleName(); // 成功
myTsTest.getVertion(); // Error:Cannot find name 'getVersion'
}
main();
/** 实际结果 */
// error TS2503:Cannot find name 'myTsTest'
如果要达到预期结果,必须使用export将模块导出才可,且使用位置须import引入。
/// 文件目录:@/pages/test1/myTsTest.ts
export namespace myTsTest {
const version = '1.9.6';
const simpleName = 'myTsTest';
function getVertion(): string {
return version;
}
export function getTsSimpleName() {
return simpleName;
}
}
TS文件中,namespace模块化的对象myTsTest
虽是全局的,但必须使用export将模块导出才能访问到,且对象中属性需要export
外部才能访问到。
[name].ts文件中
declare namespace 用来表示全局变量是一个对象,包含很多子属性。
举例验证,tsc myTest.ts
查看编译是否ok
/// 文件目录:@/pages/test1/myTsDeclareTest.ts
export declare namespace myTsDeclareTest {
const version = '1.10.2';
const simpleName = 'myTsDecTest';
type Bird = {
age: number,
gender: string,
name: string
}
//实现过的方法不能在这里声明(在java语言中,称作只能使用抽象方法)
//function getVertion(): string {
// return version;
//}
//export function getTsSimpleName() {
// return simpleName;
//}
// 正确的声明方式如下:(抽象方法)
function getVertion(): string;
}
An implementation cannot be declared in ambient contexts.(不能在上下文环境中声明已实现的**)
因此不能在命名空间中使用已实现的方法。同java语言类比,declare声明过的类似interface接口,内部方法只能使用抽象方法。且变量建议使用const修饰的静态常量。
/// 文件目录:@/pages/test-dir/myTest.ts
/** 预期结果(成功) */
import { myTsDeclareTest } from '@/pages/test1/myTsDeclareTest.ts'
export function main() {
const _sName = myTsDeclareTest.simpleName;
const guguBird: simpleName.Bird = {
age: 2, gender: 'mud', name: 'gugu'
}; // Error:Cannot find name 'getVersion'
console.log('日志:', `${_sName} ${guguBird}`); // 成功
}
main();
const关键字修饰的静态常量,以及声明定义的类型均可直接访问,无需export。因此文件类型[name].ts下
,无declare修饰的namespace与有declare修饰的相比,就是能不能声明实现属性(如function)了。
[name].d.ts文件中
declare namespace 用来表示局部变量是一个对象,包含很多子属性。[解释] 使用 declare 不再会声明一个全局变量,而只会在当前文件中声明一个局部变量。只有在声明文件中使用 export 导出,然后在使用方 import 导入后,才会应用到这些类型声明。
[name].ts使用declare修饰的,与[name].d.ts命名空间声明效果类似
tsc myTest.ts
查看编译是否ok/// 文件目录:@/pages/test1/myTsDeclareTest$d.js
export default function myTsDeclareDTest$d() {
const version = '1.10.2';
const simpleName = 'myTsDecTest';
function getVertion() {
return version;
}
}
/// 文件目录:@/pages/test1/myTsDeclareTest$d.d.ts
declare namespace myTsDeclareDTest$d {
const version: string;
const simpleName: string;
const ifVersioin = '测试是否能用';
// 抽象方法
function getVertion(): string;
}
export = myTsDeclareTest$d;
声明文件[name].d.ts,中的任何属性,无须export(当前整个模块已export)。外部import即可直接使用。
/// 文件目录:@/pages/test-dir/myTest.ts
/** 预期结果(成功) */
import { myTsDeclareTest$d } from '@/pages/test1/myTsDeclareTest$d.ts'
export function main() {
const _ifVersion = myTsDeclareTest$d.ifVersion;
const _oldVersion = myTsDeclareTest$d.getVertion();
console.log('日志:', `${_ifVersion} ${_oldVersion}`); // 成功
}
main();