我在TypeScript中有以下接口:
interface IX {
a: string,
b: any,
c: AnotherType
}
我声明了一个该类型的变量并初始化了所有属性
let x: IX = {
a: 'abc',
b: null,
c: null
}
然后在稍后的init函数中为它们赋值
x.a = 'xyz'
x.b = 123
x.c = new AnotherType()
但我不喜欢在声明对象时为每个属性指定一堆默认空值，因为它们稍后将被设置为实值。我能告诉接口默认属性我不提供为空吗?是什么让我这样做:
let x: IX = {
a: 'abc'
}
而不会产生编译器错误。现在它告诉我了
TS2322:类型“{}”不能赋值给类型 “九”。属性“b”在类型“{}”中缺失。
当前回答
您可以使用两个单独的配置。一个作为具有可选属性的输入(将具有默认值)，另一个仅具有必需的属性。这可以通过&和Required来方便:
interface DefaultedFuncConfig {
b?: boolean;
}
interface MandatoryFuncConfig {
a: boolean;
}
export type FuncConfig = MandatoryFuncConfig & DefaultedFuncConfig;
export const func = (config: FuncConfig): Required<FuncConfig> => ({
b: true,
...config
});
// will compile
func({ a: true });
func({ a: true, b: true });
// will error
func({ b: true });
func({});
其他回答
您可以使用两个单独的配置。一个作为具有可选属性的输入(将具有默认值)，另一个仅具有必需的属性。这可以通过&和Required来方便:
interface DefaultedFuncConfig {
b?: boolean;
}
interface MandatoryFuncConfig {
a: boolean;
}
export type FuncConfig = MandatoryFuncConfig & DefaultedFuncConfig;
export const func = (config: FuncConfig): Required<FuncConfig> => ({
b: true,
...config
});
// will compile
func({ a: true });
func({ a: true, b: true });
// will error
func({ b: true });
func({});
你不能在接口中设置默认值，但是你可以通过使用可选属性来完成你想做的事情:
简单地将界面更改为:
interface IX {
a: string,
b?: any,
c?: AnotherType
}
你可以这样做:
let x: IX = {
a: 'abc'
}
如果没有设置这些属性，则使用init函数为x.b和x.c分配默认值。
我的解决方案:
我在对象上创建了包装器。指派以修复键入问题。
export function assign<T>(...args: T[] | Partial<T>[]): T {
return Object.assign.apply(Object, [{}, ...args]);
}
用法:
env.base.ts
export interface EnvironmentValues {
export interface EnvironmentValues {
isBrowser: boolean;
apiURL: string;
}
export const enviromentBaseValues: Partial<EnvironmentValues> = {
isBrowser: typeof window !== 'undefined',
};
export default enviromentBaseValues;
env.dev.ts
import { EnvironmentValues, enviromentBaseValues } from './env.base';
import { assign } from '../utilities';
export const enviromentDevValues: EnvironmentValues = assign<EnvironmentValues>(
{
apiURL: '/api',
},
enviromentBaseValues
);
export default enviromentDevValues;
另一种方法是使用https://www.npmjs.com/package/merge 这和上一个答案是一样的，但是更简洁一些。
让我们安装合并
yarn add -D merge
接下来让我们创建一个带有一些选项的接口。 我们把它放到 / / index.ts类型
export interface ExampleOpts {
opt1: string,
opt2: string,
opt3: string,
}
接下来让我们创建一组默认值 你可以把它放在同一个文件中，但让我们保持类型分离，并将其放入 / config / index.ts
import { ExampleOpts } from '../types'
// Defaults
export const ExampleOptsDefault : ExampleOpts = {
opt1: 'default value 1',
opt2: 'default value 2',
opt3: 'default value 3',
}
接下来让我们用一个函数将它们全部连接在一起 。/ index.ts
import { ExampleOpts } from './types'
import { ExampleOptsDefault } from './config'
import merge from 'merge'
// The ? makes the parameter optional
export function test1(options?: ExampleOpts) {
// merge tries to load in the defaults first, then options next if it's defined
const merged_opts: ExampleOpts = merge.recursive(ExampleOptsDefault, options)
// log the result to the console
console.log(merged_opts)
}
你可以用一个类实现接口，然后你可以在构造函数中初始化成员:
class IXClass implements IX {
a: string;
b: any;
c: AnotherType;
constructor(obj: IX);
constructor(a: string, b: any, c: AnotherType);
constructor() {
if (arguments.length == 1) {
this.a = arguments[0].a;
this.b = arguments[0].b;
this.c = arguments[0].c;
} else {
this.a = arguments[0];
this.b = arguments[1];
this.c = arguments[2];
}
}
}
另一种方法是使用工厂函数:
function ixFactory(a: string, b: any, c: AnotherType): IX {
return {
a: a,
b: b,
c: c
}
}
然后你可以简单地:
var ix: IX = null;
...
ix = new IXClass(...);
// or
ix = ixFactory(...);
