Nếu tôi muốn lập trình gán một thuộc tính cho một đối tượng trong Javascript, tôi sẽ làm như thế này:

var obj = {};
obj.prop = "value";

Nhưng trong TypeScript, điều này tạo ra một lỗi:

Thuộc tính 'prop' không tồn tại trên giá trị của loại '{}'

Làm thế nào tôi có thể gán bất kỳ thuộc tính mới nào cho một đối tượng trong TypeScript?

Có thể biểu thị objlà any, nhưng điều đó đánh bại toàn bộ mục đích sử dụng bản thảo. obj = {}ngụ ý objlà một Object. Đánh dấu nó là anykhông có ý nghĩa. Để thực hiện tính nhất quán mong muốn, một giao diện có thể được xác định như sau.

interface LooseObject {
    [key: string]: any
}

var obj: LooseObject = {};

HOẶC để làm cho nó nhỏ gọn:

var obj: {[k: string]: any} = {};

LooseObjectcó thể chấp nhận các trường với bất kỳ chuỗi nào là khóa và anynhập dưới dạng giá trị.

obj.prop = "value";
obj.prop2 = 88;

Sự thanh lịch thực sự của giải pháp này là bạn có thể bao gồm các trường loại an toàn trong giao diện.

interface MyType {
    typesafeProp1?: number,
    requiredProp1: string,
    [key: string]: any
}

var obj: MyType ;
obj = { requiredProp1: "foo"}; // valid
obj = {} // error. 'requiredProp1' is missing
obj.typesafeProp1 = "bar" // error. typesafeProp1 should be a number

obj.prop = "value";
obj.prop2 = 88;

Trong khi điều này trả lời câu hỏi Ban đầu, câu trả lời ở đây của @GreeneCreations có thể đưa ra một quan điểm khác về cách tiếp cận vấn đề.

Hoặc tất cả trong một lần:

  var obj:any = {}
  obj.prop = 5;

Tôi có xu hướng đặt anyở phía bên kia tức là var foo:IFoo = <any>{};một cái gì đó như thế này vẫn an toàn:

interface IFoo{
    bar:string;
    baz:string;
    boo:string;     
}

// How I tend to intialize 
var foo:IFoo = <any>{};

foo.bar = "asdf";
foo.baz = "boo";
foo.boo = "boo";

// the following is an error, 
// so you haven't lost type safety
foo.bar = 123; 

Ngoài ra, bạn có thể đánh dấu các thuộc tính này là tùy chọn:

interface IFoo{
    bar?:string;
    baz?:string;
    boo?:string;    
}

// Now your simple initialization works
var foo:IFoo = {};

Dùng thử trực tuyến

Giải pháp này rất hữu ích khi đối tượng của bạn có Loại cụ thể. Giống như khi lấy đối tượng sang nguồn khác.

let user: User = new User();
(user as any).otherProperty = 'hello';
//user did not lose its type here.

Mặc dù trình biên dịch phàn nàn nó vẫn nên xuất nó như bạn yêu cầu. Tuy nhiên, điều này sẽ làm việc.

var s = {};
s['prop'] = true;

Thêm một lựa chọn nữa là truy cập vào tài sản dưới dạng bộ sưu tập:

var obj = {};
obj['prop'] = "value";

Tôi ngạc nhiên khi không có câu trả lời nào tham khảo Object.assign vì đó là kỹ thuật tôi sử dụng bất cứ khi nào tôi nghĩ về "thành phần" trong JavaScript.

Và nó hoạt động như mong đợi trong TypeScript:

interface IExisting {
    userName: string
}

interface INewStuff {
    email: string
}

const existingObject: IExisting = {
    userName: "jsmith"
}

const objectWithAllProps: IExisting & INewStuff = Object.assign({}, existingObject, {
    email: "jsmith@someplace.com"
})

console.log(objectWithAllProps.email); // jsmith@someplace.com

Ưu điểm

• loại an toàn xuyên suốt vì bạn không cần sử dụng any loại này
• sử dụng loại tổng hợp của TypeScript (như được biểu thị bằng &khi khai báo loại objectWithAllProps), thông báo rõ ràng rằng chúng tôi đang soạn thảo một loại mới đang hoạt động (tức là động)

Những điều cần chú ý

1. Object.assign có các khía cạnh độc đáo của riêng nó (được biết đến với hầu hết các nhà phát triển JS có kinh nghiệm) nên được xem xét khi viết TypeScript.
   • Nó có thể được sử dụng theo cách biến đổi hoặc theo cách bất biến (tôi chứng minh cách bất biến ở trên, có nghĩa là existingObjectkhông bị ảnh hưởng và do đó không có emailtài sản. Đối với hầu hết các lập trình viên theo phong cách chức năng, đó là một điều tốt vì kết quả là sự thay đổi mới duy nhất).
   • Object.assign hoạt động tốt nhất khi bạn có các đối tượng phẳng hơn. Nếu bạn đang kết hợp hai đối tượng lồng nhau có chứa các thuộc tính nullable, bạn có thể ghi đè lên các giá trị trung thực không xác định. Nếu bạn coi chừng thứ tự của các đối số Object.assign, bạn sẽ ổn thôi.

Bạn có thể tạo đối tượng mới dựa trên đối tượng cũ bằng toán tử trải

interface MyObject {
    prop1: string;
}

const myObj: MyObject = {
    prop1: 'foo',
}

const newObj = {
    ...myObj,
    prop2: 'bar',
}

console.log(newObj.prop2); // 'bar'

TypeScript sẽ suy ra tất cả các trường của đối tượng ban đầu và VSCode sẽ tự động hoàn thành, v.v.

Đơn giản nhất sẽ được theo sau

const obj = <any>{};
obj.prop1 = "value";
obj.prop2 = "another value"

Có thể thêm một thành viên vào một đối tượng hiện có bằng cách

1. mở rộng loại (đọc: mở rộng / chuyên về giao diện)
2. truyền đối tượng ban đầu sang loại mở rộng
3. thêm thành viên vào đối tượng

interface IEnhancedPromise<T> extends Promise<T> {
    sayHello(): void;
}

const p = Promise.resolve("Peter");

const enhancedPromise = p as IEnhancedPromise<string>;

enhancedPromise.sayHello = () => enhancedPromise.then(value => console.info("Hello " + value));

// eventually prints "Hello Peter"
enhancedPromise.sayHello();

Vì bạn không thể làm điều này:

obj.prop = 'value';

Nếu trình biên dịch TS và kẻ nói dối của bạn không nghiêm khắc với bạn, bạn có thể viết điều này:

obj['prop'] = 'value';

Nếu trình biên dịch hoặc trình phân tích TS của bạn nghiêm ngặt, một câu trả lời khác sẽ là typecast:

var obj = {};
obj = obj as unknown as { prop: string };
obj.prop = "value";

Lưu trữ bất kỳ thuộc tính mới nào trên bất kỳ loại đối tượng nào bằng cách đánh máy nó thành 'bất kỳ':

var extend = <any>myObject;
extend.NewProperty = anotherObject;

Sau này, bạn có thể truy xuất nó bằng cách chuyển đối tượng mở rộng của mình trở lại 'any':

var extendedObject = <any>myObject;
var anotherObject = <AnotherObjectType>extendedObject.NewProperty;

Để đảm bảo rằng loại là một Object(tức là cặp khóa-giá trị ), hãy sử dụng:

const obj: {[x: string]: any} = {}
obj.prop = 'cool beans'

• Trường hợp 1:

  var car = {type: "BMW", model: "i8", color: "white"}; car['owner'] = "ibrahim"; // You can add a property:

• Trường hợp 2:

  var car:any = {type: "BMW", model: "i8", color: "white"}; car.owner = "ibrahim"; // You can set a property: use any type

bạn có thể sử dụng cái này:

this.model = Object.assign(this.model, { newProp: 0 });

Bạn có thể thêm tuyên bố này để im lặng cảnh báo.

declare var obj: any;

Thực hành tốt nhất là sử dụng gõ an toàn, tôi khuyên bạn:

interface customObject extends MyObject {
   newProp: string;
   newProp2: number;
}

Để duy trì loại trước đó của bạn, tạm thời bỏ đối tượng của bạn vào bất kỳ

  var obj = {}
  (<any>obj).prop = 5;

Thuộc tính động mới sẽ chỉ khả dụng khi bạn sử dụng diễn viên:

  var a = obj.prop; ==> Will generate a compiler error
  var b = (<any>obj).prop; ==> Will assign 5 to b with no error;

Đây là một phiên bản đặc biệt Object.assign, tự động điều chỉnh loại biến với mỗi thay đổi thuộc tính. Không cần thêm biến, xác nhận kiểu, loại rõ ràng hoặc bản sao đối tượng:

function assign<T, U>(target: T, source: U): asserts target is T & U {
    Object.assign(target, source)
}

const obj = {};
assign(obj, { prop1: "foo" })
//  const obj now has type { prop1: string; }
obj.prop1 // string
assign(obj, { prop2: 42 })
//  const obj now has type { prop1: string; prop2: number; }
obj.prop2 // number

//  const obj: { prop1: "foo", prop2: 42 }

Lưu ý: Mẫu sử dụng các hàm xác nhận TS 3.7 . Loại trả về assignlà void, không giống như Object.assign.

Nếu bạn đang sử dụng Bản mô tả, có lẽ bạn muốn sử dụng loại an toàn; trong trường hợp đó, đối tượng trần trụi và 'bất kỳ' bị phản đối.

Tốt hơn là không sử dụng Object hoặc {}, nhưng một số loại được đặt tên; hoặc bạn có thể đang sử dụng API với các loại cụ thể mà bạn cần mở rộng với các trường của riêng bạn. Tôi đã tìm thấy điều này để làm việc:

class Given { ... }  // API specified fields; or maybe it's just Object {}

interface PropAble extends Given {
    props?: string;  // you can cast any Given to this and set .props
    // '?' indicates that the field is optional
}
let g:Given = getTheGivenObject();
(g as PropAble).props = "value for my new field";

// to avoid constantly casting: 
let k:PropAble = getTheGivenObject();
k.props = "value for props";

tự động gán các thuộc tính cho một đối tượng trong TypeScript.

Để làm điều đó Bạn chỉ cần sử dụng các giao diện bản thảo như vậy:

interface IValue {
    prop1: string;
    prop2: string;
}

interface IType {
    [code: string]: IValue;
}

bạn có thể sử dụng nó như thế

var obj: IType = {};
obj['code1'] = { 
    prop1: 'prop 1 value', 
    prop2: 'prop 2 value' 
};

Thử cái này:

export interface QueryParams {
    page?: number,
    limit?: number,
    name?: string,
    sort?: string,
    direction?: string
}

Sau đó sử dụng nó

const query = {
    name: 'abc'
}
query.page = 1

Giải pháp duy nhất hoàn toàn an toàn cho loại này là giải pháp này , nhưng hơi dài dòng và buộc bạn phải tạo nhiều đối tượng.

Nếu bạn phải tạo một đối tượng trống trước, sau đó chọn một trong hai giải pháp này. Hãy nhớ rằng mỗi khi bạn sử dụng as, bạn sẽ mất an toàn.

Giải pháp an toàn hơn

Các loại objectlà an toàn bên trong getObject, mà có nghĩa là object.asẽ được loạistring | undefined

interface Example {
  a: string;
  b: number;
}

function getObject() {
  const object: Partial<Example> = {};
  object.a = 'one';
  object.b = 1;
  return object as Example;
}

Giải pháp ngắn

Các loại objectlà không an toàn bên trong getObject, mà có nghĩa là object.asẽ loại stringngay cả trước khi phân công của nó.

interface Example {
  a: string;
  b: number;
}

function getObject() {
  const object = {} as Example;
  object.a = 'one';
  object.b = 1;
  return object;
}