Typescript: Object.assign 지원에 대한 로드맵이 있습니까?

무엇을 찾고 있는지 확실하지 않습니다. 타이핑을 의미한다면 lib.es6.d.ts에 이미 다음과 같이 정의되어 있습니다.

    /**
      * Copy the values of all of the enumerable own properties from one or more source objects to a 
      * target object. Returns the target object.
      * <strong i="6">@param</strong> target The target object to copy to.
      * <strong i="7">@param</strong> sources One or more source objects to copy properties from.
      */
    assign(target: any, ...sources: any[]): any;

구현을 의미합니다. TypeScript에는 pollyfill이 포함되어 있지 않습니다. 예를 들어 Mozilla에는 pollyfill 이 있습니다.

믹스 인 패턴 타이핑에 대해 묻는다면 2.0 로드맵에서 항상 가지고 있었던 것입니다.

감사. es3 / es5 / es6로 트랜스 파일하는 TypeScript에서 Object.assign(...) 를 작성하는 것을 의미합니다. 따라서 2.0의 로드맵에 있습니다.

: +1 :

@unional 뭔가 오해했을 수 있습니다. 그러나 나는 당신의 결론이 옳지 않다고 생각합니다.

ES6는 어쨌든 Object.assign 를 지원하므로 대상이 ES6이면 어쨌든 TypeScript로 작성할 수 있습니다.

그러나 es5 이하로 트랜스 파일하는 경우 es5에는 Object.assign 이 없기 때문에 여전히 polyfill이 필요합니다.

빠른 해결 방법으로이 polyfill과 입력을 고려하십시오.

interface ObjectConstructor {
    assign(target: any, ...sources: any[]): any;
}

if (typeof Object.assign != 'function') {
  (function () {
    Object.assign = function (target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert undefined or null to object');
      }

      var output = Object(target);
      for (var index = 1; index < arguments.length; index++) {
        var source = arguments[index];
        if (source !== undefined && source !== null) {
          for (var nextKey in source) {
            if (source.hasOwnProperty(nextKey)) {
              output[nextKey] = source[nextKey];
            }
          }
        }
      }
      return output;
    };
  })();
}

이 문제를 찾아 주셔서 감사합니다. 꽤 오래 전이었습니다. :) 예, 이제 es5에 대한 polyfill이 필요하다는 것을 이해합니다.

다시 한 번 감사드립니다!

target이 es5로 설정되면이 polyfill을 컴파일할까요? 즉, 컴파일 대상이 es5로 설정되어 있으므로 es5 환경에서 작동 할 수 있습니다.

target이 es5로 설정되면이 polyfill을 컴파일할까요?

네, 포니 필로 : 장미 :: 말 :

이해가 안 돼서 미안 해요. ES6는 Object.assign 하므로 Babel은 ES5 대상을위한 폴리 필로 변환합니다. TypeScript가 다른 ES6 기능과 마찬가지로 동일한 기능을 수행하지 않는 이유가 헷갈립니다.

@prashaantt TypeScript는 Object.assign 또는 새로운 표준에 의해 추가 된 기타 기본 / 메서드를 사용하려면 다음 중 하나를 수행해야합니다.

• 해당 입력 과 함께 polyfill 라이브러리 (예 : core-js ) 사용
• 기능이 추가되었을 때 표준을 타겟팅합니다 (예 : "target": "es6" 에서 tsconfig.json ).

@ devoto13 감사합니다, core-js 잘 작동합니다.

방금 어리석은 질문이있었습니다. npm install ing 및 typings install ing core-js 후에 폴리 필 메서드에 대한 IntelliSense를 얻기 시작합니다. 하지만 여전히 사용중인 모든 모듈에서 해당 메서드를 실제로 가져와야합니다. 그렇지 않으면 컴파일 된 코드에 폴리 필이 포함되지 않습니다.

@prashaantt core-js/shim 이 (가) 필요한 경우 Object.assign 는 그 시점부터 전 세계적으로 사용할 수 있습니다. 메인 모듈 / 엔트리 포인트의 맨 위에 import 'core-js/shim'; 를 넣는 것이 좋습니다.

감사합니다 @jesseschalken. 후속 조치로 shim 전체를 가져 오면 번들이 부풀려지지 않나요? 아니면 tsc 또는 ts-loader 가 내 코드에서 실제로 사용되는 것만 선택할 수있을만큼 똑똑할까요?

@prashaantt 대상 브라우저에 따라 다릅니다. 당신은 이미 Object.assign 가 당신이 목표로하는 브라우저에서 지원되지 않는다는 것을 알고 있습니다. 가장 광범위한 브라우저 지원을 원하면 번들에 전체 shim이 필요합니다.

Object.assign 대한 polyfill 만 원하는 경우 import 'core-js/modules/es6.object.assign'; 할 수 있으며 필요한 항목을 추가 할 수 있습니다 (목록은 core-js의 shim.js 참조). 문서). Webpack은 필수 그래프를 따르고 필요한 모듈 만 포함합니다.

이미 Babel을 사용하고 있다면 core-js를 직접 사용하는 대신 import 'babel-polyfill'; 를 사용하는 것이 좋습니다. 여기에는 generators / async-await에 대한 core-js/shim 뿐만 아니라 regenerator-runtime 됩니다.

팁을 주셔서 감사합니다. 지금 당장 완전한 발전기 지원을 제공 해야합니다. 말 그대로 2.0에 대한 마지막 장애물입니다 !

이해가 안 돼서 미안 해요. ES6는 Object.assign을 지원하므로 Babel은 ES5 대상을위한 폴리 필로 트랜스 파일합니다. TypeScript가 다른 ES6 기능과 마찬가지로 동일한 기능을 수행하지 않는 이유가 헷갈립니다.

@prashaantt Babel _transpiles_ Object.assign 라고하면 무슨 뜻입니까? 그것은 단지 기능입니다. polyfill, ponyfill을 추가하거나 직접 작성할 수 있으며 ES 3, 5.1, 6 등 모든 환경에서 사용할 수 있습니다.

@aluanhaddad babel이하는 일에 대한 나의 이해는 es5를 대상으로 지정하고 Object.assign 를 사용하면 Object.assign 대한 polyfill이 자동으로 포함되고 사용하지 않으면 사용하지 않는 것입니다. typescript가 "es2015의 상위 집합"이라고 주장한 것과 동일한 작업을 수행하면 좋을 것입니다. 이는 이전 대상으로 트랜스 파일하는 기능을 제공하지 않는 경우에는 사실이 아닙니다. (나는 틀릴 수 있습니다)

@ devoto13 대상이 es5이면 최소한 Object.assign이 es5에서 지원되지 않는다는 경고를 표시해야합니다. 완전히 유효하고 프로그래머에게 임의의 폴리 필이 필요하다고 말하지 않는 것은 의미가 없습니다.

@kyleholzinger 당신이 설명한 것 (ES5를 대상으로 함은 Object.assign을 사용할 수 없음을 의미 함)은 이미 동작입니다.

@kyleholzinger 실제로 오류가 발생합니다. 다음 두 파일로 폴더를 생성하는 경우 :

// test.ts
let t = Object.assign({}, {});

// tsconfig.json
{ "target": "es5" }

그런 다음 tsc 실행하십시오. 다음과 같은 오류가 발생합니다.

$ tsc
test.ts(1,16): error TS2339: Property 'assign' does not exist on type 'ObjectConstructor'.

프로젝트에서 일부 polyfill에 대한 입력을 포함 할 수 있지만 polyfill 구현을 포함하지 않기 때문에 실패합니다.

나는 그것이 현재의 행동이라는 것을 이해합니다. 내 요점은 대상을 es5로 지정하면 typescript가 "생성자에 없습니다"를 넘어서 의미있는 오류를 제공하면 좋을 것입니다.

@kyleholzinger FWIW, TypeScript 2.1은 이제 ES6 (ES7?) 개체 휴식 / 확산을 지원하므로 개인적으로 더 이상 Object.assign 대해 신경 쓸 이유가 적습니다. 네이티브 생성기를 사용하면 대부분의 프로젝트에서 폴리 필이 필요하지 않습니다.

사실입니다. 언어 기능을 제외하지 않는 것이 좋습니다. Object.assign이 브라우저 의존적이지 않았고, polyfill을 사용하지 않았다면 typescript가 경고했다면 정말 좋을 것입니다.

tsconfig가 올바르게 설정된 경우 TypeScript는 처음에 Object 에서 해당 함수 이름을 자동 완성하는 옵션을 제공하지 않음으로써 <ES6에서 사용할 수없는 assign 에 대해 경고합니다. 손으로 열심히 적어 보면 붉은 물결 무늬가 보입니다. 이를 무시하면 tsc 에서 위의 오류가 발생합니다. 그러나 당신이 그것을 고의적으로 무시한다면, 당신은 당연히 당신의 운명을받을 자격이 있습니다. ;)

맞아요, 내 유일한 요점은 es2015 사양에 있으므로 typescript에 있어야합니다.)

es5 를 타겟팅하는 동안 노드에서 Object.assign 을 (를) 어떻게 사용합니까? 즉, 코드는 브라우저가 아닌 서버에서 실행됩니다. 폴리 필도 어떻게 사용하나요?

뿡뿡
이는 노드의 버전에 따라 달라집니다. 즉, 모든 폴리 필 가능 기능의 경우처럼 런타임에 따라 달라집니다.

런타임이 Object.assign 지원하는지 테스트하는 방법은 다음과 같습니다.

$ Node 
> Object.assign({ to: 'world' }, { message: 'Hello there!' })
{ to: 'world', message: 'Hello there!' }

위의 작품은 모두 당신이해야 할 경우 IS는 포함 "es2017.object" 에서 "compilerOptions"."lib" 당신의 tsconfig.json의 속성을.

위의 내용이 실패하면 TypeScript로 작성된 이와 같은 polyfill을 추가하십시오.

// polyfill-object-assign.ts

if (typeof Object.assign !== 'function') {
  Object.assign = function (target, ...args) {

    if (!target) {
      throw TypeError('Cannot convert undefined or null to object');
    }
    for (const source of args) {
      if (source) {
        Object.keys(source).forEach(key => target[key] = source[key]);
      }
    }
    return target;
  };
}

그리고 가져 오기

import './polyfill-object-assign';

또한 런타임 지원 사례와 동일하게 tsconfig.json을 변경합니다.

도움이 되었기를 바랍니다.

@aluanhaddad 통찰력에 감사드립니다. 내 노드는 실행하도록 요청한 실험에 따라 Object.assign 을 지원합니다. 그러나 "compilerOptions": { "lib": ["es2017.object"] } 을 추가 한 후에도 여전히 squiggles 얻습니다. 그냥 무시해야할까요 아니면 사라지도록 할 수있는 일이 있습니까?

@aluanhaddad 신경 쓰지 마. 이제 잘 작동합니다.

@aluanhaddad 내가 이전했다 "compilerOptions": { "lib": ["es2017.object", "es6"] } 나는 점점 때 squiggles . es6 제거하면 해결되는 것처럼 보였지만 gulp 스크립트를 다시 실행하면 갑자기 새로운 오류 세트가 생성됩니다.
내 tsconfig.json :

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "lib": ["es2017.object"],
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "inlineSources": true,
        //"noImplicitAny": true,
        "declaration": true,
        "noFallthroughCasesInSwitch": true,
        // "noImplicitReturns": true,
        "removeComments": true,
        "stripInternal": true,
        "outDir": "dist"
    },
    "files": ["src/main.ts"],
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

내 새로운 오류 샘플 :

error TS2318: Cannot find global type 'Array'.
error TS2318: Cannot find global type 'Boolean'.
error TS2318: Cannot find global type 'Function'.
error TS2318: Cannot find global type 'IArguments'.
error TS2318: Cannot find global type 'Number'.
error TS2318: Cannot find global type 'RegExp'.
error TS2318: Cannot find global type 'String'.
error TS2339: Property 'bind' does not exist on type '(message?: any, ...optionalParams: {}) => void'.
error TS2339: Property 'bind' does not exist on type '(message?: any, ...optionalParams: {}) => void'.
error TS2322: Type '{}' is not assignable to type
error TS2304: Cannot find name 'Promise'.

그렇다면 권장 사항을 사용하고 올바르게 컴파일하기 위해 typescript를 얻는 방법이 있습니까?

@johnbendi 예, 확실히.

사용 요청의 특수성으로 인해 특정 항목 "es2017.object" 추가 할 것을 제안했습니다.
"lib": ["es6"] 이 더 이상 정확하지 않으며 "lib": ["es2015"] 이어야한다고 생각합니다.
"lib": ["es2015", es2017.object"] 또는 "lib": ["es2017"] 해보세요.

빠진 것은 "나는 es6 폴리 필이 있고 당신의 비즈니스 타입 스크립트가 아니라고 가정하자"라고 말하는 깔끔한 방법이라고 생각합니다. :).

target: "es6" 를 설정하면 그렇게 할 수 있지만 폴리 필 불가능한 es6 기능을 사용하여 코드를 생성 할 수도 있습니다.

core-js를 명시 적으로 요구하면 본질적으로 shim이 필요하며 TS가 불평하기 때문에 shimmy 및 non-shimmy 빌드를 가질 수 없습니다.

추가 node_modules/typescript/lib/lib.es6.d.ts 에 files 에서 tsconfig.json 그 작업을 수행하지만 ..은 ... 너무 깨끗하고 보이지 않는 (또는 그 달성의 확실한 방법을 놓친 거지?)

@himdel 그냥 사용

{
  "compilerOptions": {
    "lib": [
      "es2015"
    ]
  }
}

완벽하게 작동합니다-몇 달 동안 해왔습니다.

또는 원하는 하위 집합 :

{
  "compilerOptions": {
    "lib": [
      "es2015.core",
      "es2016.array.include"
    ]
  }
}

나는 아직도 이것을하는 방법을 알아낼 수 없다. target: "es5" tsc는 항상 Object.assign 를 polyfill에 대한 호출로 변환합니다. libs를 추가해도 나를 위해 아무것도 변경되지 않습니다.

제 경우에는 화살표 함수를 일반 함수로 변환하고 싶지만 Object.assign 및 Array.includes 와 같은 정적 호출은 그대로 둡니다.

tsc에는 정적 메서드 Object , Array 등과 같은 polyfill 기능이 아닌 구문 기능 만 트랜스 파일하도록 알리는 플래그가 있어야합니다.

내가 대상이있을 때 : "es5"tsc는 항상 Object.assign을 polyfill에 대한 호출로 변환합니다.

@danez TypeScript는 Object.assign 호출을 수정하지 않습니다. Babel을 통해 코드를 실행하는 것 같습니까?

@RyanCavanaugh 그렇습니다 . Babel은 프로세스에 관여하지 않습니다.
그것이하는 일은 기본적으로 이것을 변형시키는 것입니다.

var a = Object.assign({}, {});

이것으로

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 a = _assign({}, {});

@danez 실제 재현을 게시 할 수 있습니까? 컴파일러가 해당 코드를 내 보내지 않았습니다.

저장소가 없지만 이것은 tsconfig입니다.

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true,
    "module": "ES2015",
    "target": "es5",
    "outDir": "js/lib/es"
  },
  "include": [
    "js/**/*.ts",
  ],
  "exclude": [
    "**/__tests__/**/*.ts"
  ]
}

그런 다음 간단히 tsc

@danez 나는 당신이 실제 재현을 게시해야 할 것이 두렵습니다.

C:\Throwaway\oat>type a.ts
var a = Object.assign({}, {});

C:\Throwaway\oat>type tsconfig.json
{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true,
    "module": "ES2015",
    "target": "es5",
    "outDir": "js/lib/es"
  },
  "include": [
    "*.ts",
  ]
}
C:\Throwaway\oat>tsc
a.ts(1,16): error TS2339: Property 'assign' does not exist on type 'ObjectConstructor'.

C:\Throwaway\oat>type js\lib\es\a.js
var a = Object.assign({}, {});

관련 정보 : https://github.com/Microsoft/TypeScript/issues/12901

@unional 이 제대로 작동 한다는 점에서. 컴파일러에는 구문 지원을 제공하기위한 도우미가 있지만 전역에서 기능을 _ever_ 다시 작성하지는 않습니다. @danez 그 도우미는 타이프 라이터 코드에 의해 지금까지 액세스 할 수 없습니다.

const foo = { foo: 'bar' };
const bar = { ...foo };

다음을 방출합니다.

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 foo = { foo: 'bar' };
var bar = __assign({}, foo);

Object.assign() 가 __assign 재 작성되는 예제를 제공 할 수 없다고 생각합니다. 객체 확산 구문 지원에만 사용됩니다.

@kitsonk 네, 저는 개체 확산을 사용하고있었습니다. 맞습니다. 객체 확산이 단순히 Object.assign 변환되면 좋을 것입니다.

@danez 는 Object.assign() 를 지원하는 대상을 대상으로하는 경우입니다 (예 : 대상은 es2015 +).

예를 들면 다음과 같습니다.

const foo = { foo: 'bar' };
const bar = { ...foo };

다음을 출력합니다.

const foo = { foo: 'bar' };
const bar = Object.assign({}, foo);

@kitsonk 예, 알고 있지만 모든 ES2017 + 전역이 core-js에 의해 폴리 필되는 es5 _syntax_를 대상으로합니다. 그래서 제가 말하는 것이 좋은 것은 es5 구문을 출력하지만 모든 내장 기능을 사용할 수 있다고 가정하는 모드입니다. babel이 useBuiltins 옵션으로하는 것과 유사합니다 : https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx#usebuiltins

일반적으로 우리는 "혼합 된"런타임 대상에 대한 특별한 지원을 제공하기 위해 노력하지 않지만 사용할 수있는 다른 옵션이 있습니다.

__assign 를 전역 범위에 삽입하고 (예 : __extends ) --noEmitHelpers 실행할 수 있습니다.

예, 알지만 es5 _syntax_를 타겟팅하고 있습니다.

나는 이것이 Object.assign 와 같은 기능을 shimming하지 않는 주요 문제라고 생각합니다. 어떤 식 으로든 입장을 취해야합니다. 스프레드를 사용할 때는 사용량을 __assign 바꿀 수 없지만 직접 호출 할 때는 사용할 수 없습니다. 지옥처럼 혼란 스럽습니다.

스프레드를 사용할 때 사용법을 __assign으로 바꿀 수는 없지만 직접 호출 할 때가 아니라 지옥처럼 혼란 스럽습니다.

난 당신이 혼란 스럽다고 느끼는 것을 이해할 수 있지만, 만트라를 유지한다면 TypeScript는 _ 기능적 polyfills_이 아닌 _syntatical rewrites_를 제공합니다. TypeScript는 작동 방식이 완전히 일관 적이며 수행하는 작업에 대해 의견이 있으며 99 %의 경우 최종 사용자에게 영향을 미치지 않습니다.

@RyanCavanaugh가 말했듯이, --noEmitHelpers 및 다음과 같은 글로벌 스크립트를 사용하여 tslib 과 함께 폴리 필 세트를 활용할 수 있습니다.

__assign = Object.assign;

그러나 그것은 실제로 "보너스 라운드"TypeScript이며 실제 측정 가능한 성능 향상을 제공 할 것이라고 주장 할 수 있습니다.