Typescript: 컴파일러가 스프레드 연산자를 사용할 때 매개 변수 / 호출 대상 서명 불일치를 잘못보고 함

args 이 any -type

function foo(x: number, y: number, z: number) { }

function bar(...args) {
    foo(...args); // Supplied parameters do not match any signature of call target.
}

이것은 현재 의도적으로 설계된 것입니다. 그러나 우리는 그것을 재고해야합니다.

@smashdevcode , @tjoskar ,이 기능의 실제 사용을 찾고 있습니다. 특히 배열이나 튜플 (또는 둘 다)을 분산 할 것으로 예상합니까? 다음은 몇 가지 장난감 예입니다.

//// arrays ////
var a1: number[] = [1,2];
var a2: number[] = [1,2,3];
var a3: number[] = [];
function twoNumbersOrSo(n?: number, m?: number) {
  return (n || -1) * (m || -1);
}
function howManyNumbersLessOne(n?: number, ...ns: number[]) {
    return ns.length;
}

//// tuples ////
var t1: [number, string] = [1, "foo"];
var t2: [number, string, string] = [1, "foo", "bar"];
function veryTraditional(n: number, s: string) {
    for (let i = 0; i < n; i++) {
        console.log(s);
    }
}
function moreInteresting(n: number, s: string, ...rest: string[]) {
    veryTraditional(n, s);
    console.log(rest);
}

이제 a1,a2,a3 중 하나를 처음 두 함수에 적용 할 수 있고 t1,t2 중 하나를 두 번째 두 함수에 적용 할 수 있습니다.

배열에 유의하십시오.

1. 단일 유형이 있으므로 매개 변수는 모두 동일한 유형이어야합니다. (나는 이것이 any 수 있다고 생각합니다.)
2. 배열의 길이는 컴파일 타임에 알려지지 않으므로 매개 변수는 선택 사항이어야합니다. 그리고 확산 논쟁은 (오늘과 같이) 마지막이어야합니다.

튜플 사용 :

1. 값은 어떤 시점에서 유형 주석을 가져야합니다. 그렇지 않으면 배열로 해석됩니다 (예 : (number | string)[] 아닌 [number, number, string] ). 장난감 코드에서는 간결하게 절약 할 수 있지만 이미 많은 인터페이스를 정의하는 실제 프로젝트에서는 괜찮을 수 있습니다.
2. 길이는 미리 알려 지므로 모든 종류의 매개 변수 목록에 튜플을 적용 할 수 있습니다.

안녕하세요 @sandersn ,

응답이 늦어서 죄송합니다. 나는 당신의 대답을 완전히 놓쳤습니다.
하나의 데이터 유형을 가진 배열 만 사용하므로 튜플 버전은 나에게별로 흥미롭지 않습니다.
그러나 함수 호출의 확산 작업은 반복 가능한 객체를 받아야한다고 생각합니다. 그래서 그것은 예를 들어 작동해야합니다. map 및 set , 이러한 경우 데이터에 여러 데이터 유형이 포함 된 경우에도 스프레드 연산자와 함께 작동하는 인터페이스를 만들어야합니다 (예 : new Set (). add (1) .add ( '문자열')). 하지만 다른 티켓일까요?

Set 및 스프레드 작업의 예 (Chrome 46에서 작동)

function foo(...args) {
    console.log(...args);
}
var bar = new Set().add(1).add(2);

foo(...bar); // 1, 2

네, 별도의 문제입니다. Typescript는 이미 나머지 매개 변수의 유형으로 배열을 지원하며, 이는 제네릭으로 만들어야합니다. 우리는 스프레드 인수가 어디에서 사용될 수 있는지 논의하고 있습니다.

나머지 매개 변수가있는 함수 나 고정 된 수의 인수가있는 함수에 동종 배열 / 세트를 전달 하시겠습니까? 당신이 전화 할 일에 대해 더 자세히 알고 싶습니다.

우선, 저는 오늘 아침 스프레드 연산자를 가지고 놀았고 대부분의 사용 사례는 최신 버전의 typescript [email protected] 및 http://www.typescriptlang.org/Playground 에서 잘 작동합니다

하나,
나는 단지 사용할 수 있도록 모든 매개 변수를 선택적으로 만드는 아이디어가 마음에 들지 않습니다.
확산 연산자이지만 문제를 이해합니다. 배열의 길이는 컴파일 타임에 알려지지 않으므로
컴파일 타임에 매개 변수를 확인하는 것은 불가능합니다.

그러나 매개 변수가 선택 사항 일 필요가없고 컴파일러가
"spread-variable"이 올바른 유형인지 확인하십시오 (예 : 번호[]

function fun1(x: number, y: number, z: number) {
    return x+y+z;
}

let arr1 = [1, 2, 3];
let arr2 = [1, 2];

fun1(...arr1);
fun1(...arr2); // OK since `arr2` is number[]
fun1(1, 2); // Should cause an error

가능합니까?

다음 코드는 현재 버전의 typescript에서 작동하지만이 문제가 해결되었을 때는 작동하지 않았습니다.

function fun1(...num) {
    return Math.max(...num);
}

function fun2(a1, ...num) {
    return Math.max(...num);
}

function fun3(a1, ...num) {
    return fun1(...num);
}

let arr = [1, 2, 3];

if (Math.random() < .5) {
    arr.push(1);
}

fun1(...arr);
fun2('first param', ...arr);
fun3('first param', ...arr);

아마도 더 현실적인 예 (요즘에도 작동 함) :

const doSomeWork = ({title, genre, runtime}) => { console.log(title, genre, runtime); };

function fun1(...num) {
    num.forEach(doSomeWork);
}

const data = [{
    title: 'title',
    genre: ['action', 'drama'],
    runtime: 100
}];

fun1(...data);

: +1 : Date 생성자의 특정 사용 사례와 동일한 문제가 있습니다.

let dateNumberArray: Array<number> = [2015,11,11];
let myNewDate = new Date(...dateNumberArray);

우리는 스프레드를 사용하여 사용자가 자체 헬퍼를 구축 할 필요없이 기본 앱에서 argv 요구 사항을 구성 할 수 있도록합니다. 예를 들면 :

{
  "yargv": [
    [
      "path",
      {
        "demand": true,
        "describe": "Source",
        "default": ".",
        "alias": "p"
      }
    ]
  ]
}

get appArgs() : { yargv: Array<Array<any>>, chdir: Array<boolean | string> } {
  return require(
    "../args.json"
  )
}

argv() : Promise<{}> {
  return new Promise((resolve) => {
    this.appArgs.yargv.forEach(v => yargs.option(...v))
    return resolve(yargs.usage("$0 [args]").help("h").
      alias("h", "help").argv)
  })
}

https://github.com/ReactiveX/rxjs 의 combineLatest 함수를 사용하는 실제 예제에서 화살표 함수를 사용하여 projectFn 를 호출 할 때 this 값을 유지하고 나머지 매개 변수를 사용하여 인수를 전파하십시오.

getCombination() {
    return this.firstObservable
      .combineLatest(this.secondObservable, (...args) => this.projectFn(...args)));
  }

현재해야합니다

getCombination() {
    return this.firstObservable
      .combineLatest(this.secondObservable, (...args) => this.projectFn.apply(this, args)));
  }

FWIW, 또 다른 실제 사례는 lodash에서 병합을 사용하여 객체 배열을 심층 병합하려고 시도하는 것입니다.

import { merge } from 'lodash';

...
return merge(...arrayOfObjects);

여기 또 다른 실제 사용 사례가 있습니다. 우리는 다음과 같은 코드를 리팩토링하려고합니다.

return Observable
      .forkJoin(a, b)
      .map(([current, past]) => this.mergeData(current, past));

조금 더 우아하게 :

return Observable
      .forkJoin(a, b)
      .map(data => this.mergeData(...data));

그러나 스프레드 연산자를 사용하면 서명 불일치 오류가 발생합니다.

다른 예시

class Parent {
    constructor(a, b, c){

    }
}

class Child extends Parent {
    constructor(d, ...args) {
        super(...args);
    }
}

TS2346 : 제공된 매개 변수가 호출 대상의 서명과 일치하지 않습니다.

오버로드 방법과 동일한 문제 :

listen(port: number, hostname?: string, backlog?: number, listeningListener?: Function): Server;
listen(port: number, hostname?: string, listeningListener?: Function): Server;
listen(port: number, backlog?: number, listeningListener?: Function): Server;
listen(port: number, listeningListener?: Function): Server;
listen(path: string, backlog?: number, listeningListener?: Function): Server;
listen(path: string, listeningListener?: Function): Server;
listen(options: ListenOptions, listeningListener?: Function): Server;
listen(handle: any, backlog?: number, listeningListener?: Function): Server;
listen(handle: any, listeningListener?: Function): Server;

로 불리는 동안

myListen(...args) {
    listen(...args);
}

then : _ [ts] 제공된 매개 변수가 호출 대상의 서명과 일치하지 않습니다 ._

따라서 지금은 그러한 일을하는 것이 불가능합니다.

export type DateProp = Date | (string|number)[];

const setDate = (value: DateProp): Date => (
    isDate(value) ? value : new Date(...value)
);

오류가 발생하므로 :

제공된 매개 변수가 호출 대상의 서명과 일치하지 않습니다.

값에 올바른 날짜 생성자 매개 변수 값이 포함되어 있어도 @mhegazy ? 아니면 뭔가를 얻지 못합니까?

값에 올바른 날짜 생성자 매개 변수 값이 포함되어 있어도 @mhegazy ? 아니면 뭔가를 얻지 못합니까?

맞습니다. 이것이이 문제가 추적하는 것입니다.

어떻게 든 도움 / 기여할 수 있는지 물어볼 의무가 있다고 느낍니다. 지금이라면 정확히 왜이 경우에 오류가 발생하는지 자세히 설명해 주시겠습니까? 어떻게 든 구성을 통해 건너 뛸 수 있습니까?

.js 파일의 이름을 .ts 로 바꿀 때 실제로이 문제가 발생했습니다. 어쨌든, "유효한 모든 JS가 유효한 TS는 아닙니다"의 한 예입니다.

현재 스타일 구성 요소의 미디어 템플릿 예제를 구현하는 데이 문제가 있습니다.

import {css} from 'styled-components';

export const Breakpoints = {
    tablet: 580,
    desktop: 800,
};

export type BreakpointLabels = keyof typeof Breakpoints;

export const media = Object.keys(Breakpoints).reduce((mediaQueries, label: BreakpointLabels) => (
    {
        ...mediaQueries,
        [label]: (...args: any[]) =>
            css`
                <strong i="7">@media</strong> (max-width: ${Breakpoints[label]}px) {
                    ${css(...args)}
                      ^^^^^^^^^^^^ Supplied parameters do not match any signature of call target.
                }
            `
    }
), {});

내 해결 방법은 css.call 를 사용하는 것입니다. 이는 최소한 any[] -typed args와 함께 작동합니다.

import {css} from 'styled-components';

export const Breakpoints = {
    tablet: 580,
    desktop: 800,
};

export type BreakpointLabels = keyof typeof Breakpoints;

export const media = Object.keys(Breakpoints).reduce((mediaQueries, label: BreakpointLabels) => (
    {
        ...mediaQueries,
        [label]: (...args: any[]) =>
            css`
                <strong i="13">@media</strong> (max-width: ${Breakpoints[label]}px) {
                    ${css.call(this, ...args)}
                }
            `
    }
), {});

동일한 문제, 내 예는 기본 병합 기능입니다.

merge(target: T, ...sources: T[])

이 오류를 최소한 파일 당 음소거하는 방법이 있습니까?

사실,이 ES6 가능성이 재검토 될 수있는 계획이나 계획에 의해 깨어진 이유를 알고 싶습니다. @mhegazy 의견을주세요.

최근에 대상이 모두 선택 사항 인 경우 호출 식으로 확산 할 수 있도록 변경했습니다 (https://github.com/Microsoft/TypeScript/pull/15849 참조). 변경 사항은 스프레드 출력을 무한한 선택적 인수 집합으로 처리하여 작동합니다.

이 변경으로 다음은 예제의 현재 상태입니다.

declare var args: number[];

function foo(x?: number, y?: number, z?: number) { }
foo(...args);     // OK
foo(2, ...args);  // OK

function bar(...args: number[]) { }
bar(...args);     // OK
bar(2, ...args);  // OK

function baz(x: number, y: number, z: number) { }
baz(...args);     // still not allowed

마지막 예제에서 컴파일러는 args 이 필요한 baz 충족하는지 확인할 방법이 없습니다. args 길이는 정적으로 확인할 수 없기 때문입니다.

이 영역에 남은 것은 알려진 크기의 튜플이 동일한 길이의 필수 인수를 가진 함수를 만족시킬 수 있도록 허용하는 것입니다. 그러나 이것은 들리는 것처럼 간단하지 않습니다. 예 :

function baz(x: number, y: number, z: number) { }
var tuple: [number, number, number] = [1, 2, 3];
baz(...tuple);     // should be allowed

@devrelm 과 같은 문제가

여전히 문제가 있습니다. 무엇이 잘못 되었나요?

class A {
    constructor(message: string, test?: any) {
        console.log('A constructor called');
    }
}

class B extends A {
    constructor(...spread) {
        super('a', ...spread);
    }
}

typescript 놀이터 에서 오류가 발생합니다.

@owlcode 이것은 TS 2.4에 있지만 2.4 릴리스 이후까지 플레이 그라운드는 TS 2.3에 있습니다.

이것은 TS 2.4에서 수정 된 것으로 보입니다.

export function log(...args: any[]) {
    console.log(...join(args.map(formatDevTools),' '));
}

그러나 TS 2.4에는 새로운 버그가있는 것 같습니다.

TS2461 : '반복 가능'은 배열 유형이 아닙니다.

반복 가능한 ( [...obj] )을 확산하려고 할 때 발생합니다.

하지만 2.4.1-insiders.20170615 의 다른 버그 (내 생각에)는 아직 알아낼 ​​수 없었습니다.

이 문제를 해결하는 방법도 모르겠습니다. 배열을 any[] 캐스트하는 것은 도움이되지 않습니다.

신경 쓰지 마세요. Console 의 정의를 수정할 수 있습니다.

interface _Console {
    assert(test?: boolean, message?: string, ...optionalParams: any[]): void;
    clear(): void;
    count(countTitle?: string): void;
    debug(...optionalParams: any[]): void;
    dir(value?: any, ...optionalParams: any[]): void;
    dirxml(value: any): void;
    error(...optionalParams: any[]): void;
    exception(message?: string, ...optionalParams: any[]): void;
    group(groupTitle?: string): void;
    groupCollapsed(groupTitle?: string): void;
    groupEnd(): void;
    info(...optionalParams: any[]): void;
    log(...optionalParams: any[]): void;
    msIsIndependentlyComposed(element: Element): boolean;
    profile(reportName?: string): void;
    profileEnd(): void;
    select(element: Element): void;
    table(...data: any[]): void;
    time(timerName?: string): void;
    timeEnd(timerName?: string): void;
    trace(...optionalParams: any[]): void;
    warn(...optionalParams: any[]): void;
}

그런 다음 console 개체를 캐스팅합니다.

export function log(...args: any[]) {
    (console as _Console).log(...join(args.map(formatDevTools),' '));
}

지금은 그렇게해야합니다.

나는 이것을 # 18004에서 PR을 열었다.

지금은 tsconfig에서 "noStrictGenericChecks" 을 활성화해야합니다.

지금은 tsconfig에서 "noStrictGenericChecks"를 활성화해야합니다.

이것이이 버그와 어떤 관련이 있는지 잘 모르겠습니다 ...

이것이이 버그와 어떤 관련이 있는지 잘 모르겠습니다.

@mhegazy 이 설정은 모든 함수 시그니처를 비활성화하므로 인수의 양과 일치하지 않고 스프레드 연산자를 사용하여 인수를 전달할 수 있습니다 (적어도 정적으로는 아님).

그것은 --noStrictGenericChecks 는 일이 아닙니다. https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes#stricter -checking-for-generic-functions를 참조

나는 이것을 만났다.

어렵다는 것을 이해할 수 있지만 적어도 "과도한"주장은 식별 할 수 있어야합니다.

@sandersn 실제 관점에서 우리는 나머지 인수를 사용하는 대신 단일 인수 또는 배열을 받아들이도록 API를 리팩토링했습니다. 따라서 foo(value, ...otherValues) 와 같은 것을 전달하는 상황은 오류로 식별되지 않았습니다. 특히 이것은 정말 위험 해 보입니다.

declare const foo: (value: string) => string;

foo('bar', 'qat'); // Expected 1 arguments, but got 2.

foo('bar', ...['qat']); // No error

@kitsonk 별도의 버그를 열 수 있습니까? 개별적으로 고려하는 것이 더 쉬우 며 복잡한 변경이 아닌 기존 규칙에 약간의 조정이있을 수 있습니다.

길이를 확인하더라도 여전히이 오류가 발생합니다.

function myFunc(...args: any[]) {
  if(args.length > 0) {
    otherFunc(...args)
  }
}

편집하다:

혼란을 없애기 위해 다음과 같이 여기 에서 리디렉션되었습니다.

2 개의 인수가 필요하지만 최소 0 개가 있습니다.

이 문제는이 문제의 중복으로 간주되었습니다.

제 경우에는 function otherFunc() 를 다음과 같은 이니셜 라이저 중 하나로 추가하여 메서드에 아무것도 전달하지 못하도록 허용하여 오류 (수정보다는 해킹과 비슷 함)를 수정할 수있었습니다.

function otherFunc()
function otherFunc(arg1: string)
function otherFunc(arg1: string, arg2: number)
function otherFunc(...args: any[]) {
  // Do stuff
}

이 해결 방법은 2.7에서 중단됩니다.

이것이 어떻게 여전히 문제입니까? 스프레드 연산자는 JS에서 작업하는 완벽하게 호환되는 방법이므로 TS는이를 적절하게 설명해야합니다.

@ jpike88 나는 당신이 잘 의미한다는 것을 알고 있지만 이와 같은 진술이 비생산적이라는 것을 깨닫지 못할 수도 있습니다. 문제는 마일스톤 2.7 또는 2.8에 대한 TODO에 있습니다. 수정해야 할 명백한 일처럼 보일 수 있지만, 수정해야 할 명백한 사항이 수천 개있는 경우 동시에 모두 수정할 수는 없으며 예상되는 다른 사항을 계속 개선 할 수는 없습니다. 투표를하는 가장 좋은 방법은 상단의 원본 게시물에 👍 반응을 제공하는 것입니다. 이것은 결국 무료 소프트웨어이며 그들은 우리에게 빚진 것이 없습니다. 즉, 그것은 내 생각입니다. 다른 사용자
너 같은 TS의 🕺

또 다른 좋은 테스트 케이스 (실제로 TS 2.7의 회귀)는 다음과 같습니다.

class NonEmptyArray<T> extends Array<T> {
        0: T;
}

function c(firstArg: string, ... plainValues: string[]): string;
function c(): undefined;
function c(...values: string[]): string | undefined {
        if (!values.length) {
                return undefined;
        }
        return "";
}


function d(): NonEmptyArray<string> {
        return [""];
}

function y(): string | undefined {
        return c(...d());
}

그것은 생성합니다

test.ts (20,9) : 오류 TS2557 : 최소한 0 개의 인수가 필요하지만 0 개 이상의 인수가 있습니다.

스프레드 연산자와 관련하여 내가 만난 또 다른 문제 :

const get = (id?: string = '1231254', bar?: Bar, baz?: Baz) => {...}
const foo: [undefined, Bar, Baz] = [undefined, bar, baz]

get(...foo) // [ts] Argument of type 'Bar | Baz' is not assignable to parameter  
of type 'string'.
Type 'Baz' is not assignable to type 'string'

물론 ES6에서는 정의되지 않은 배열을 인수로 포함하고 올바르게 undefined 없지만 TS가 undefined 값을 확산 할 때 무시하는 것처럼 보입니다.

함수 호출에서 확산 연산자를 올바르게 처리하면 많은 도움이되는 또 다른 실제 사례 :
NSwagStudio-C # WebApi 용 API 생성기에 의해 생성 된 함수가 있으며 동일한 매개 변수가 있습니다 (GET 매개 변수는 구조에 정의 됨).

생성 된 함수는 다음과 같습니다.

export interface ITableApiClient {
    getTableInfo(objnam: string | null, objsch: string | null | undefined, dbnam: string | null, conid: number | undefined): Promise<FileResponse | null>;
    otherFunction(objnam: string | null, objsch: string | null | undefined, dbnam: string | null, conid: number | undefined): Promise<string | null>;
}

나는 그것을 구문으로 부르고 싶다.

   get tableIdentification() {
       return [this.name, this.schema, this.databaseName, this.serverConnectionId];
   }
...
   return apiClient.getTableInfo(...this.tableIdentification);

   // this doesn't help, still compile-time error
   // return apiClient.getTableInfo(...(this.tableIdentification as any));

정확히 동일한 매개 변수를 가진 함수가 더 많기 때문입니다 (C # 백엔드에 정의 된 동일한 매개 변수 클래스에서 생성되기 때문입니다). 이제 각 사용에 n 번 속성 tableIdentification 본문을 복사해야합니다.

@smashdevcode 나를 위해 솔루션은 @ ts-ignore를 추가하는 것이 었습니다.

function foo(x: number, y: number, z: number) { }
var args = [0, 1, 2];
// @ts-ignore
foo(...args);

예 : https://stackblitz.com/edit/typescript-ecymei?embed=1&file=index.ts

@ darekf77 또는 args 이 튜플이라고 말하는 경우 :

function foo(x: number, y: number, z: number) { }
const args: [number, number, number] = [0, 1, 2];
foo(...args);

TS 놀이터

@ darekf77 또는 args 이 튜플이라고 말하는 경우 :

function foo(x: number, y: number, z: number) { }
const args: [number, number, number] = [0, 1, 2];
foo(...args);

이것은 명령 줄에서 typescript를 컴파일 할 때 작동하지만 입력하는 동안 Visual Studio Code가 typescript의 유효성을 검사 할 때는 작동하지 않습니다. 여기서 연결이 끊어진 것이 뭔지 잘 모르겠습니다.

jayphelps가 향후 릴리스에서이 문제가 해결 될 것이라고 언급 한 지 1 년이 넘었지만이 문제는 여전히 발생합니다. 이것에 대한 업데이트가 있습니까? @ ts-ignore를 사용할 수 있지만 이것은 함수에 대한 모든 typescript 메시지를 제거하므로 실제로 적절한 솔루션이 아닙니다.

tjoskar 가 언급 한대로

배열은 고정 길이가 아니므로 작동하지 않습니다.

형변환은 컴파일러가 비정상적인 경우에도 작동합니다. 나는 그것이 최선의 해결책이 아니라는 데 동의합니다.

(이 질문은 아마도 스택 오버플로 (또는 유사)로 옮겨 져야합니다)

@TidyIQ , 배열에 고정 길이가 없으면 컴파일러는 배열이 적합한 지 여부를 알 수 없습니다.

function foo(x: number, y: number, z: number) { }
const args = arrayOfSomeLength;
foo(...args); // Error: The compiler do not know if there is 3 or 2 or 1 or 50 elements in the array. 

따라서 배열이 동적 길이 인 경우 인수도 다음과 같아야합니다.

function foo(...args: number[]) { }
const args = arrayOfSomeLength;
foo(...args);

운동장

불행히도 내 인수 중 일부가 고정 길이이므로 작동하지 않습니다.

아마도 코드를 게시하면 문제를 볼 수 있습니다.

interface IF_Object {
  [key: string]: object;
}
//  VALUE SHOULD BE REQUIRED BUT MADE OPTIONAL TO BYPASS TYPESCRIPT ERROR
interface IF_SetKV {
  (key: string, value?: any): Function;
}
//  VALUE SHOULD BE REQUIRED BUT MADE OPTIONAL TO BYPASS TYPESCRIPT ERROR
interface IF_CreateState {
  (key: string, value?: any, ...more: string[]): Function;
}

const setKV: IF_SetKV = (key, value) => (object: IF_Object = {}) => ({
  ...object,
  [key]: value
});

const createState: IF_CreateState = (key, value, ...more) => (
  object: IF_Object = {}
) =>
  more.length === 0
    ? setKV(key, value)(object)
    : setKV(key, createState(value, ...more)(object[key]))(object);

// TYPESCRIPT ERROR OCCURS HERE. CAN ONLY BE REMOVED WITH TS<strong i="7">@IGNORE</strong>
const newState = createState(...stateList, action.payload.value)(reduced);

@TidyIQ , 내가 따르는 지 잘 모르겠습니다. stateList 이 빈 배열이면 어떻게됩니까? 이 경우 action.payload.value 는 key ?

작동하지 않아야합니다.

const createState = (...args: string[]) => (object: IF_Object = {}) => {
  const [key, value, ...rest] = args;
  if (rest.length === 0) {
    setKV(key, value)(object)
  } else {
    setKV(key, createState(value, ...rest)(object[key]))(object);
  }
}

인수를 전달하는 함수의 ParameterType 로 스프레드 값으로 캐스팅합니다.

const add = (a: number, b: number) => a + b

const values = {
  a: 1,
  b: 2,
}

type AddParams = Parameters<typeof add>

add(...(values) as AddParams)

@ mateja176 이것도 작동하는 것처럼 보이며 일부 사용 사례에 더 적합 할 수 있습니다.

add(...(values as [number,number]))

또는

add(...(values as [any,any]))

명시 적으로 입력하지 않고도 임의의 배열을 처리하기 위해 헬퍼 유형을 사용합니다.

type NonEmptyArray<T extends any[]> = T extends (infer U)[]
  ? [U, ...U[]]
  : never

다음과 같이 사용할 수 있습니다.

add(...values as NonEmptyArray<typeof values>)

NonEmptyArray 유형에 대한 다음 분석에서는 작동 방식을 자세히 설명합니다.

# | 부품 | 설명
-|-|-
(1) | type NonEmptyArray | 도우미 유형의 이름
(2) | <T | 헬퍼 유형은 일반 유형 매개 변수 T 합니다.
(3) | extends any[]> | 유형 검사기에서 허용하려면 해당 유형 매개 변수 T 가 일부 배열 유형이어야합니다.
(4) | T extends (infer U)[] ? | 헬퍼 유형은 T 실제로 배열 유형인지 확인하는 조건부 유형 입니다.
우리는 선언 한 T 이 조건이 항상 통과하므로, (3)의 배열 유형으로,하지만 조건을 사용하여 우리는 타이프를 할 수 있습니다 infer 유형을 그 T 배열 로 구성되어 있으며이 유형을 U 합니다.
(5) | [U, ...U[]] | 이제 결과 유형을 어셈블 할 수 있습니다. 첫 번째 항목이 U 유형이고 나머지 (0 개 이상) 항목도 U 유형 인 배열입니다.
이 특정 튜플 표기법으로 인해 TypeScript는 적어도 하나의 항목이 있음을 인식합니다.
(6) | : never | 이것은 구문 적으로 조건부를 완료하는 데 필요합니다. 기억하세요 : 조건부는 U 유형을 추출하는 트릭이며 항상 통과합니다. 따라서 never 를 산출하여 "else"분기를 안전하게 무시할 수 있습니다.

이제 이렇게하면 ...

ts const values = [1,2,3] add(...values as NonEmptyArray<typeof values>)

... 다음이 발생합니다.

• typeof values 는 TypeScript가 values 배열에 대해 추론 한 유형이며, 숫자 배열 인 number[] 입니다.
• 즉, number[] 를 T 합니다. (2/3)
• T 는 실제로 배열 유형이므로 U 를 추론 할 수 있습니다. number . (4)
• 이제 U 이 number 라는 것을 알았으므로 [number, ...number[]] 유형을 산출합니다. (5)
  

@tjoskar 코드 변경

function foo(x: number, y: number, z: number, f: number) { }
const args: [number, number, number] = [0, 1, 2];
foo(...args, 3);

( 놀이터 )
그리고 오류가 돌아 왔습니다.

놀랍게도 마지막 줄을 foo(3, ...args); 로 변경하면 오류가 발생하지 않습니다.

여전히 작동하지 않는 것 같습니다. 여기 내 예가 있습니다.

onSetValue={(...args: Parameters<typeof props.onSetValue>) => {
    setLanguage(null);
    props.onSetValue(...args); // Expected 2 arguments, but got 0 or more.
  }}

props.onSetValue 의 유형이 무엇인지는 실제로 중요하지 않습니다. 왜냐하면 매개 변수 유형을 가져 와서 유형을 얻은 함수에 전달하고 여전히 Expected 2 arguments, but got 0 or more. 오류를 제공하기 때문입니다. .

놀이터 링크

@ Haaxor1689 예제의 축소 된 형식은 다음과 같습니다.
놀이터 링크

여전히 작동하지 않습니다.

이것은 내 임시 해결 방법입니다.

class Board {
  private events: Events

  public on(...args: Parameters<this['events']['on']>) {
    this.events.on.call(this.events, ...args)
  }
}