안녕하세요.
최근 Type Script에 상당한 규모의 웹 앱이 쓰여 있는데, 매일 엉망진창인 나.
요 며칠 여러 곳에서 비슷한 질문을 들었기 때문에 필기와 동시에 보도를 불러일으킬 수 있다.

Q. 정의에 없는 속성을 포함하는 객체를 유형에 대해 정의된 값에 대입

제기하다

일반적으로 유형 정의에 정의된 변수를 포함하는데, 이 유형에 없는 속성을 포함하는 대상을 대입하려면 오류가 발생합니다.

interface IHoge {
  str: string;
}

const hoge: IHoge = {
  str: 'str',
  arg: 'arg', // <= [TS2322] オブジェクト リテラルは既知のプロパティのみ指定できます。'arg' は型 'IHoge' に存在しません。
};

이에 비해 유형에 정의된 특성을 가지고 다른 임의의 특성을 가진 대상을 대입하려면 어떻게 해야 합니까?

정식으로 대답하다

https://www.typescriptlang.org/docs/handbook/interfaces.html#excess-property-checks
여기에'무엇이든 추가할 수 있다'고 명확하게 정의하는 방법이 적혀 있다.

interface IHoge {
  str: string;
　[prop: string]: any;
}

const hoge: IHoge = {
  str: 'str',
  arg: 'arg',
};

그렇구나.
또 "좀 놀랄만한 기교일 수도 있지만 일단 대상을 만들어서 대입하면 돼요.
쓰여 있다.

interface IHoge {
  str: string;
}

const hoge = {
  str: 'str',
  arg: 'arg',
};

const hoge2: IHoge = hoge; // <= arg が含まれてるけどエラーにならない (!!)

변수를 초기화할 때 여분의 속성을 확인하지만 대입할 때 이런 이해를 확인하지 않아도 됩니까?
나는 언어의 정의를 깊이 이해할 수 없다.

응답 수정

살짝 변형시켜도 이렇게 쓸 수 있어요.

interface IHoge {
  str: string;
}

const hoge = <IHoge> {
  str: 'str',
  arg: 'arg',
};

좀 더 깊이 들어가면 이런 작법도 있다.

const hoge = <{str: string}> {
  str: 'str',
  arg: 'arg',
}; // <= hoge には 「少なくとも str は入ってるよ」と伝えたい

이 작법이 무슨 의미가 있습니까?
그렇게 생각하지만 프로그래머의 의도를 전달하는 것은 의미가 있는 것 같다.

const hoge = <{str: string}> {
  str: 'str',
  arg: 'arg',
};

console.log(hoge.arg); // <= [TS2339] プロパティ 'arg' は型 '{ str: string; }' に存在しません。

분명히 있어

언제 이 지식을 사용합니까?

specific에서graphql-request 옵션에 값을 추가하고 싶을 때 이 문제에 부딪혔습니다.
호출자 코드

import {GraphQLClient} from 'graphql-request';

const request = new GraphQLClient('http://hogehoge', {method: 'get', proxy: 'anywhere'});
  // <= [TS2345] オブジェクト リテラルは既知のプロパティのみ指定できます。'proxy' は型 'Options' に存在しません。

프록시를 내부에fetch라고 부르고 싶지만options의 매개 변수 정의에 준비가 되어 있지 않습니다.
약간의 번뇌의 결과는 먼저 아래와 같이 회피하였다.
그럼

import {GraphQLClient} from 'graphql-request';

const options = {method: 'get', proxy: 'anywhere'};
const request = new GraphQLClient('http://hogehoge', options);

뭐 참고가 된다면