typescript 如何在项目中全局声明类型(打字稿)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/42025767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to declare a type globally in a project (typescript)
提问by Manu
In a typescript project,
is there any way to declare a type and share it across all files, in the same way we have access to types defined globally at node.d.ts
?
在打字稿项目中,有没有办法声明一个类型并在所有文件中共享它,就像我们可以访问全局定义的类型一样node.d.ts
?
For example, let's say that in my project a IUser
is something such as
例如,假设在我的项目中 aIUser
是这样的
interface IUser {
name: string,
mail: string
}
Ok, I can create that interface in a common/interfaces.ts
file and import it every time I need it... but would be so nice to be able to declare such interfaces globally for the whole project and have quick access to them without importing any file
好的,我可以在common/interfaces.ts
文件中创建该接口并在每次需要时导入它......但是能够为整个项目全局声明这些接口并且无需导入任何文件即可快速访问它们真是太好了
回答by John Weisz
You can create a definition file, ending with the .d.ts
extension, and place it in your project where you'd like:
您可以创建一个以扩展名结尾的定义文件,.d.ts
并将其放置在您想要的项目中:
user.d.ts
用户.d.ts
interface IUser {
name: string,
mail: string
}
This is also a good way to fill missing global types. I have a lib/global
folder per project to place these files.
这也是一种填补缺失的全局类型的好方法。我lib/global
每个项目都有一个文件夹来放置这些文件。
This only works with type definitions, not actual code, as (1) that actual code would have to be imported some way, (2) .d.ts
is ambient. Also, for types defined this way to be globally visible, the corresponding declaration file should not contain top-level exports(otherwise the declaration file will be regarded as a module, requiring an import to access its types).
这仅适用于类型定义,而不适用于实际代码,因为 (1) 必须以某种方式导入实际代码,(2).d.ts
是环境代码。此外,对于以这种方式定义为全局可见的类型,相应的声明文件不应包含顶级导出(否则声明文件将被视为模块,需要导入才能访问其类型)。
You can also declare modules:
您还可以声明模块:
declare module "my-module" {
export declare class Something {
public something: number;
}
}
And then TypeScript will allow the following:
然后 TypeScript 将允许以下内容:
import { Something } from "my-module";
回答by Sefe
You can define types in multiple files and use them in other files. There are two possble ways:
您可以在多个文件中定义类型并在其他文件中使用它们。有两种可能的方式:
- The files are using the same namespace. In this case the type can be reused directly.
- The files are using different namespaces. In this case the reusable type has to be marked with
export
. It can then be used in other namespaces. With theimport
statement you can avoid having to use the namespace prefix.
- 这些文件使用相同的命名空间。在这种情况下,类型可以直接重用。
- 这些文件使用不同的命名空间。在这种情况下,可重用类型必须标有
export
。然后可以在其他命名空间中使用它。使用该import
语句,您可以避免使用命名空间前缀。
In any case, you have to add a reference to the filewhose types you want to reuse.
Same namespace
相同的命名空间
File 1:
文件 1:
namespace Example {
export interface IUser {
name: string,
mail: string
}
}
File 2:
文件2:
/// <reference path="./File1.ts" />
namespace Example {
class User implements IUser {
name: string,
mail: string
}
}
Different namespaces
不同的命名空间
File 1:
文件 1:
namespace Example {
export interface IUser {
name: string,
mail: string
}
}
File 2 (no import):
文件 2(无导入):
/// <reference path="./File1.ts" />
class User implements Example.IUser {
name: string,
mail: string
}
File 2 (with import):
文件 2(带导入):
/// <reference path="./File1.ts" />
import IUser = Example.IUser;
class User implements IUser {
name: string,
mail: string
}
回答by Dieter Gribnitz
Create global.d.ts in your project root.
在您的项目根目录中创建 global.d.ts。
Here is an example of how to declare global types constants and interfaces that will be understood globally
这是一个如何声明全局类型常量和接口的示例,这些常量和接口将被全局理解
//example import for externally loaded library
//this will not form part of the bundle but will allow typescript to understand external libraries throughout the project
import _ from 'lodash';
declare global {
//Example global constant for libraries served via webpack externals. example webpack config:: externals: { _: 'lodash' }
//This assumes lodash was already load in DOM for example in <head> via CDN link before main.js is loaded.
const _: typeof _;
//example of custom types
type JSONPrimitive = string | number | boolean | null;
type JSONValue = JSONPrimitive | JSONObject | JSONArray;
type JSONObject = { [member: string]: JSONValue };
//example of custom interface
interface JSONArray extends Array<JSONValue> {}
}