I는 슈퍼 클래스가 부모 ( Entity많은 서브 클래스) ( Customer, Product, ProductCategory...)

Typescript에 다른 하위 객체가 포함 된 객체를 동적으로 복제하려고합니다.

예 : Customer다른 Product사람을 가진 사람ProductCategory

var cust:Customer  = new Customer ();

cust.name = "someName";
cust.products.push(new Product(someId1));
cust.products.push(new Product(someId2));

객체의 전체 트리를 복제하기 위해 함수를 만들었습니다. Entity

public clone():any {
    var cloneObj = new this.constructor();
    for (var attribut in this) {
        if(typeof this[attribut] === "object"){
           cloneObj[attribut] = this.clone();
        } else {
           cloneObj[attribut] = this[attribut];
        }
    }
    return cloneObj;
}

는 new이 자바 스크립트에 transpiled되어 다음과 같은 오류가 상승 :error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.

스크립트가 작동하지만 변환 된 오류를 제거하고 싶습니다.

특정 문제 해결

형식 어설 션을 사용하여 컴파일러에 더 잘 알 수 있습니다.

public clone(): any {
    var cloneObj = new (this.constructor() as any);
    for (var attribut in this) {
        if (typeof this[attribut] === "object") {
            cloneObj[attribut] = this[attribut].clone();
        } else {
            cloneObj[attribut] = this[attribut];
        }
    }
    return cloneObj;
}

클로닝

때로는 완전히 역동적이지 않고 자신 만의 매핑을 작성하는 것이 좋습니다. 그러나 차이 효과를주는 몇 가지 "복제"트릭이 있습니다.

모든 후속 예제에 다음 코드를 사용합니다.

class Example {
  constructor(public type: string) {

  }
}

class Customer {
  constructor(public name: string, public example: Example) {

  }

  greet() {
    return 'Hello ' + this.name;
  }
}

var customer = new Customer('David', new Example('DavidType'));

옵션 1 : 스프레드

속성 : 예
방법 : 아니요
딥 카피 : 아니요

var clone = { ...customer };

alert(clone.name + ' ' + clone.example.type); // David DavidType
//alert(clone.greet()); // Not OK

clone.name = 'Steve';
clone.example.type = 'SteveType';

alert(customer.name + ' ' + customer.example.type); // David SteveType

옵션 2 : Object.assign

속성 : 예
방법 : 아니요
딥 카피 : 아니요

var clone = Object.assign({}, customer);

alert(clone.name + ' ' + clone.example.type); // David DavidType
alert(clone.greet()); // Not OK, although compiler won't spot it

clone.name = 'Steve';
clone.example.type = 'SteveType';

alert(customer.name + ' ' + customer.example.type); // David SteveType

옵션 3 : Object.create

속성 : 상속 된
메서드 : 상속 된
깊은 복사 : 얕은 상속 (깊은 변경은 원본과 복제본 모두에 영향을 미침)

var clone = Object.create(customer);

alert(clone.name + ' ' + clone.example.type); // David DavidType
alert(clone.greet()); // OK

customer.name = 'Misha';
customer.example = new Example("MishaType");

// clone sees changes to original 
alert(clone.name + ' ' + clone.example.type); // Misha MishaType

clone.name = 'Steve';
clone.example.type = 'SteveType';

// original sees changes to clone
alert(customer.name + ' ' + customer.example.type); // Misha SteveType

옵션 4 : 딥 카피 기능

속성 : 예
방법 : 아니요
딥 카피 : 예

function deepCopy(obj) {
    var copy;

    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) {
        copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    // Handle Array
    if (obj instanceof Array) {
        copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = deepCopy(obj[i]);
        }
        return copy;
    }

    // Handle Object
    if (obj instanceof Object) {
        copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = deepCopy(obj[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy obj! Its type isn't supported.");
}

var clone = deepCopy(customer) as Customer;

alert(clone.name + ' ' + clone.example.type); // David DavidType
// alert(clone.greet()); // Not OK - not really a customer

clone.name = 'Steve';
clone.example.type = 'SteveType';

alert(customer.name + ' ' + customer.example.type); // David DavidType

1. 스프레드 연산자 사용

const obj1 = { param: "value" };
const obj2 = { ...obj1 };

스프레드 연산자는 obj1에서 모든 필드를 가져 와서 obj2에 펼칩니다. 결과적으로 새로운 참조 및 원래 필드와 동일한 필드를 가진 새 개체를 얻게됩니다.

얕은 사본이라는 것을 기억하십시오. 이는 객체가 중첩 된 경우 중첩 된 복합 매개 변수가 동일한 참조에 의해 새 객체에 존재 함을 의미합니다.

2. Object.assign ()

const obj1={ param: "value" };
const obj2:any = Object.assign({}, obj1);

Object.assign은 실제 사본을 작성하지만 고유 한 특성 만 작성하므로 프로토 타입의 특성은 복사 된 오브젝트에 존재하지 않습니다. 얕은 사본이기도합니다.

3.Object.create ()

const obj1={ param: "value" };
const obj2:any = Object.create(obj1);

Object.create 실제 복제를 수행하지 않고 프로토 타입에서 객체를 생성합니다. 따라서 기본 유형 속성 지정은 참조로 수행되지 않으므로 오브젝트가 기본 유형 특성을 복제해야하는 경우이를 사용하십시오.

Object.create 의 장점 은 프로토 타입에 선언 된 모든 함수를 새로 만든 객체에서 사용할 수 있다는 것입니다.

얕은 사본에 대한 몇 가지

얕은 복사는 이전 객체의 모든 필드를 새 객체에 넣지 만 원본 객체에 복합 유형 필드 (객체, 배열 등)가있는 경우 해당 필드는 동일한 참조를 가진 새 객체에 저장됩니다. 원래 객체에서 이러한 필드를 변경하면 새 객체에 반영됩니다.

함정처럼 보일 수도 있지만 복잡한 객체 전체를 복사해야하는 상황은 거의 없습니다. 얕은 사본은 대부분의 메모리를 재사용하므로 이는 깊은 사본에 비해 매우 저렴합니다.

딥 카피

스프레드 연산자는 딥 카피에 유용 할 수 있습니다.

const obj1 = { param: "value", complex: { name: "John"}}
const obj2 = { ...obj1, complex: {...obj1.complex}};

위의 코드는 obj1의 깊은 복사본을 만들었습니다. 복합 필드 "복합"도 obj2에 복사되었습니다. 돌연변이 필드 "복합체"에는 사본이 반영되지 않습니다.

이 시도:

let copy = (JSON.parse(JSON.stringify(objectToCopy)));

매우 큰 객체를 사용하거나 객체에 직렬화 할 수없는 속성이있을 때까지 좋은 솔루션입니다.

형식 안전성을 유지하기 위해 복사하려는 클래스에서 복사 기능을 사용할 수 있습니다.

getCopy(): YourClassName{
    return (JSON.parse(JSON.stringify(this)));
}

또는 정적 방식으로 :

static createCopy(objectToCopy: YourClassName): YourClassName{
    return (JSON.parse(JSON.stringify(objectToCopy)));
}

TypeScript / JavaScript에는 얕은 복제를위한 자체 연산자가 있습니다.

let shallowClone = { ...original };

TypeScript 2.1에 도입 된 "Object Spread"를 사용하면 간단하게 복사본을 얻을 수 있습니다.

이 TypeScript : let copy = { ...original };

이 JavaScript를 생성합니다.

var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
var copy = __assign({}, original);

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html

직렬화 가능 딥 클론의 경우 유형 정보는 다음과 같습니다.

export function clone<T>(a: T): T {
  return JSON.parse(JSON.stringify(a));
}

내 생각은 :

Object.assign(...) 속성 만 복사하면 프로토 타입과 메서드가 손실됩니다.

Object.create(...) 속성을 복사하지 않고 프로토 타입을 만드는 것입니다.

나를 위해 일한 Object.create(...)것은 다음을 사용하여 속성을 사용 하고 속성을 복사 하는 프로토 타입을 만드는 것입니다 Object.assign(...).

따라서 객체의 foo경우 다음과 같이 복제하십시오.

Object.assign(Object.create(foo), foo)

다음과 같은 것을 가질 수도 있습니다.

class Entity {
    id: number;

    constructor(id: number) {
        this.id = id;
    }

    clone(): this {
        return new (this.constructor as typeof Entity)(this.id) as this;
    }
}

class Customer extends Entity {
    name: string;

    constructor(id: number, name: string) {
        super(id);
        this.name = name;
    }

    clone(): this {
        return new (this.constructor as typeof Customer)(this.id, this.name) as this;
    }
}

clone모든 Entity서브 클래스 에서 메소드 를 대체하는지 확인하십시오. 그렇지 않으면 부분 복제가 발생합니다.

의 반환 유형 this은 항상 인스턴스 유형과 일치합니다.

에 추가 "lodash.clonedeep": "^4.5.0"하십시오 package.json. 그런 다음 다음과 같이 사용하십시오.

import * as _ from 'lodash';

...

const copy = _.cloneDeep(original)

여기 매시업입니다! 그리고 여기에 StackBlitz 링크 가 있습니다. 현재 단순한 유형과 객체 유형을 복사하는 것으로 제한되어 있지만 쉽게 수정할 수 있습니다.

   let deepClone = <T>(source: T): { [k: string]: any } => {
      let results: { [k: string]: any } = {};
      for (let P in source) {
        if (typeof source[P] === 'object') {
          results[P] = deepClone(source[P]);
        } else {
          results[P] = source[P];
        }
      }
      return results;
    };

이 오류가 발생하면 :

TypeError: this.constructor(...) is not a function

이것은 올바른 스크립트입니다.

public clone(): any {
    var cloneObj = new (<any>this.constructor)(); // line fixed
    for (var attribut in this) {
        if (typeof this[attribut] === "object") {
            cloneObj[attribut] = this[attribut].clone();
        } else {
            cloneObj[attribut] = this[attribut];
        }
    }
    return cloneObj;
}

이 문제를 직접 겪고 결국 추상 클래스를 제공하는 작은 라이브러리 cloneable-ts 를 작성하여 클래스를 확장하는 클래스에 클론 메소드를 추가합니다. 추상 클래스는 펜톤 만 교체하여 허용 대답에 설명 된 깊은 복사 기능 빌려 copy = {};와 copy = Object.create(originalObj)원본 객체의 클래스를 유지하기를. 다음은 클래스 사용 예입니다.

import {Cloneable, CloneableArgs} from 'cloneable-ts';

// Interface that will be used as named arguments to initialize and clone an object
interface PersonArgs {
    readonly name: string;
    readonly age: number;
}

// Cloneable abstract class initializes the object with super method and adds the clone method
// CloneableArgs interface ensures that all properties defined in the argument interface are defined in class
class Person extends Cloneable<TestArgs>  implements CloneableArgs<PersonArgs> {
    readonly name: string;
    readonly age: number;

    constructor(args: TestArgs) {
        super(args);
    }
}

const a = new Person({name: 'Alice', age: 28});
const b = a.clone({name: 'Bob'})
a.name // Alice
b.name // Bob
b.age // 28

또는 Cloneable.clone도우미 메소드를 사용할 수도 있습니다 .

import {Cloneable} from 'cloneable-ts';

interface Person {
    readonly name: string;
    readonly age: number;
}

const a: Person = {name: 'Alice', age: 28};
const b = Cloneable.clone(a, {name: 'Bob'})
a.name // Alice
b.name // Bob
b.age // 28    

TypeScript 3.7이 출시되었으므로 이제 재귀 적 유형 별칭 이 지원되며 유형 안전 deepCopy()함수 를 정의 할 수 있습니다.

// DeepCopy type can be easily extended by other types,
// like Set & Map if the implementation supports them.
type DeepCopy<T> =
    T extends undefined | null | boolean | string | number ? T :
    T extends Function | Set<any> | Map<any, any> ? unknown :
    T extends ReadonlyArray<infer U> ? Array<DeepCopy<U>> :
    { [K in keyof T]: DeepCopy<T[K]> };

function deepCopy<T>(obj: T): DeepCopy<T> {
    // implementation doesn't matter, just use the simplest
    return JSON.parse(JSON.stringify(obj));
}

interface User {
    name: string,
    achievements: readonly string[],
    extras?: {
        city: string;
    }
}

type UncopiableUser = User & {
    delete: () => void
};

declare const user: User;
const userCopy: User = deepCopy(user); // no errors

declare const uncopiableUser: UncopiableUser;
const uncopiableUserCopy: UncopiableUser = deepCopy(uncopiableUser); // compile time error

운동장

구멍 객체의 내용을 간단히 복제하려면 간단히 인스턴스화하고 구문 분석하십시오.

let cloneObject = JSON.parse(JSON.stringify(objectToClone))

objectToClone 트리에서 데이터를 변경하는 반면 cloneObject에는 변경이 없습니다. 그것은 나의 요구였다.

도움이되기를 바랍니다.

나는 일을 끝내었다.

public clone(): any {
  const result = new (<any>this.constructor);

  // some deserialization code I hade in place already...
  // which deep copies all serialized properties of the
  // object graph
  // result.deserialize(this)

  // you could use any of the usggestions in the other answers to
  // copy over all the desired fields / properties

  return result;
}

때문에:

var cloneObj = new (<any>this.constructor());

@Fenton에서 런타임 오류가 발생했습니다.

타이프 스크립트 버전 : 2.4.2

좋은 오래된 jQuery는 어떻습니까? 딥 클론은 다음과 같습니다.

var clone = $.extend(true, {}, sourceObject);

중첩 된 객체에 대한 유형을 유지하는 일반 복사 / 복제 서비스를 만드는 데 착수했습니다. 내가 잘못하고 있다면 피드백을 좋아할 것이지만 지금까지는 효과가있는 것 같습니다 ...

import { Injectable } from '@angular/core';

@Injectable()
export class CopyService {

  public deepCopy<T>(objectToClone: T): T {
    // If it's a simple type or null, just return it.
    if (typeof objectToClone === 'string' ||
      typeof objectToClone === 'number' ||
      typeof objectToClone === 'undefined' ||
      typeof objectToClone === 'symbol' ||
      typeof objectToClone === 'function' ||
      typeof objectToClone === 'boolean' ||
      objectToClone === null
    ) {
      return objectToClone;
    }

    // Otherwise, check if it has a constructor we can use to properly instantiate it...
    let ctor = Object.getPrototypeOf(objectToClone).constructor;
    if (ctor) {
      let clone = new ctor();

      // Once we've instantiated the correct type, assign the child properties with deep copies of the values
      Object.keys(objectToClone).forEach(key => {
        if (Array.isArray(objectToClone[key]))
          clone[key] = objectToClone[key].map(item => this.deepCopy(item));
        else
          clone[key] = this.deepCopy(objectToClone[key]);
      });

      if (JSON.stringify(objectToClone) !== JSON.stringify(clone))
        console.warn('object cloned, but doesnt match exactly...\nobject: ' + JSON.stringify(objectToClone) + "\nclone: " + JSON.stringify(clone))

      // return our cloned object...
      return clone;
    }
    else {
      //not sure this will ever get hit, but figured I'd have a catch call.
      console.log('deep copy found something it didnt know: ' + JSON.stringify(objectToClone));
      return objectToClone;
    }
  }
}

typeScript에서 각도로 테스트하고 정상적으로 작동합니다.

deepCopy(obj) {


        var copy;

        // Handle the 3 simple types, and null or undefined
        if (null == obj || "object" != typeof obj) return obj;

        // Handle Date
        if (obj instanceof Date) {
            copy = new Date();
            copy.setTime(obj.getTime());
            return copy;
        }

        // Handle Array
        if (obj instanceof Array) {
            copy = [];
            for (var i = 0, len = obj.length; i < len; i++) {
                copy[i] = this.deepCopy(obj[i]);
            }
            return copy;
        }

        // Handle Object
        if (obj instanceof Object) {
            copy = {};
            for (var attr in obj) {
                if (obj.hasOwnProperty(attr)) copy[attr] = this.deepCopy(obj[attr]);
            }
            return copy;
        }

        throw new Error("Unable to copy obj! Its type isn't supported.");
    }

다른 객체, 배열 등을 포함 할 수있는 객체를 딥 클로닝하려면 다음을 사용하십시오.

const clone = <T>(source: T): T => {
  if (source === null) return source

  if (source instanceof Date) return new Date(source.getTime()) as any

  if (source instanceof Array) return source.map((item: any) => clone<any>(item)) as any

  if (typeof source === 'object' && source !== {}) {
    const clonnedObj = { ...(source as { [key: string]: any }) } as { [key: string]: any }
    Object.keys(clonnedObj).forEach(prop => {
      clonnedObj[prop] = clone<any>(clonnedObj[prop])
    })

    return clonnedObj as T
  }

  return source
}

사용하다:

const obj = {a: [1,2], b: 's', c: () => { return 'h'; }, d: null, e: {a:['x'] }}
const objClone = clone(obj)

스프레드 구문으로 구조 지정 할당 을 사용할 수 있습니다 .

var obj = {id = 1, name = 'product1'};
var clonedObject = {...obj};

대상 객체가 이미 있으므로 배열을 업데이트하는 것처럼 새로 만들지 않으려면 속성을 복사해야합니다.
이 방법으로 수행 한 경우 :

Object.keys(source).forEach((key) => {
    copy[key] = source[key]
})

찬양 예정입니다. (제목 "버전 2"를보십시오)