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

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

你可能感兴趣的:(ReactJs,android,typescript,javascript)