TS文件|declare及namespace关键字声明区别,及export异同

文章探讨了在React项目中,TypeScript的命名空间(namespace)作为早期模块化解决方案,与ES6的模块系统的关系。它指出,尽管namespace是全局的,但需要通过export导出来访问。同时,declare用于声明全局变量或类型,不能包含实现,常用于.d.ts文件中为JavaScript库提供类型声明。文章通过示例展示了declarenamespace和exportnamespace的使用差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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命名空间声明效果类似

  • 相同点:An implementation cannot be declared in ambient contexts.(不能在上下文环境中声明已实现的如方法)`。const version = ‘1.0.8’; 这类静态常量定义方式均支持。
  • 不同点:[name].d.ts,专为js在ts中使用做类型声明的解释处理。为js做声明,变量仅定义声明,无赋值。
    举例验证,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();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值