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

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

typescript 复制代码

/// 文件目录：@/pages/test1/myTsTest.ts
namespace myTsTest {
	const version = '1.9.6';
	const simpleName = 'myTsTest';
	function getVertion(): string {
		return version;
	}
	export function getTsSimpleName() {
		return simpleName;
	}
}

typescript 复制代码

/// 文件目录：@/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引入。

typescript 复制代码

/// 文件目录：@/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

typescript 复制代码

/// 文件目录：@/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修饰的静态常量。

typescript 复制代码

/// 文件目录：@/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

javascript 复制代码

/// 文件目录：@/pages/test1/myTsDeclareTest$d.js
export default function myTsDeclareDTest$d() {
	const version = '1.10.2';
	const simpleName = 'myTsDecTest';
	function getVertion() {
		return version;
	}
}

typescript 复制代码

/// 文件目录：@/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即可直接使用。

typescript 复制代码

/// 文件目录：@/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();