我在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”在类型“{}”中缺失。
另一种方法是使用Pick实用程序类型并选择您希望设置为必需的属性。
interface IX {
a: string,
b: any,
c: AnotherType
}
let x: Pick<IX, 'a'> = {
a: 'abc'
}
然后当你想要声明真正的IX对象时,你只需将默认值与新值合并,如下所示:
const newX: IX = {
...x,
b: 'b',
c: () => {}
}
这个答案摘自“如何设置TypeScript接口的默认值?”
我使用下面的模式:
创建工具类型默认值<T>:
type OptionalKeys<T> = { [K in keyof T]-?: {} extends Pick<T, K> ? K : never }[keyof T];
type Defaults<T> = Required<Pick<T, OptionalKeys<T>>>
用选项/默认值声明类:
// options passed to class constructor
export interface Options {
a: string,
b?: any,
c?: number
}
// defaults
const defaults: Defaults<Options> = {
b: null,
c: 1
};
export class MyClass {
// all options in class must have values
options: Required<Options>;
constructor(options: Options) {
// merge passed options and defaults
this.options = Object.assign({}, defaults, options);
}
}
创建类实例:
const myClass = new MyClass({
a: 'hello',
b: true,
});
console.log(myClass.options);
// { a: 'hello', b: true, c: 1 }
虽然@Timar的答案是完美的空默认值(什么是被要求的),这里有另一个简单的解决方案,允许其他默认值:定义一个选项接口,以及一个根据常量包含默认值;在构造函数中,使用展开操作符设置options成员变量
interface IXOptions {
a?: string,
b?: any,
c?: number
}
const XDefaults: IXOptions = {
a: "default",
b: null,
c: 1
}
export class ClassX {
private options: IXOptions;
constructor(XOptions: IXOptions) {
this.options = { ...XDefaults, ...XOptions };
}
public printOptions(): void {
console.log(this.options.a);
console.log(this.options.b);
console.log(this.options.c);
}
}
现在你可以像这样使用这个类:
const x = new ClassX({ a: "set" });
x.printOptions();
输出:
set
null
1
我的解决方案:
我在对象上创建了包装器。指派以修复键入问题。
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;