TypeScript용 커스텀글로벌인터페이스(.d.ts 파일)를 설정하는 방법

TypeScript용 커스텀글로벌인터페이스(.d.ts 파일)를 설정하는 방법

현재 리액트 작업 중Webpack2 및 TypeScript를 사용하는 JS 프로젝트.모든 것이 한 가지를 제외하고는 완벽하게 작동합니다. 즉, 제가 직접 작성한 인터페이스를 다른 파일로 이동하여 애플리케이션 전체에 표시할 수 있도록 하는 방법을 찾을 수 없습니다.

프로토타이핑을 위해 처음에는 인터페이스를 사용하는 파일에 인터페이스를 정의했지만, 결국 여러 클래스에 필요한 인터페이스를 추가하기 시작했고, 그때부터 모든 문제가 시작되었습니다.어떤 변경을 가해도tsconfig.json파일을 어디에 두어도 IDE와 Webpack 모두 이름을 찾을 수 없다고 불평합니다('이름 찾을 수 없음').IMyInterface').

이 tsconfig.json 삭제:

{
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "typeRoots": [
      "./node_modules/@types",
      "./typings"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "types": [
    "typePatches"
  ]
}

시시 as, as as as astsconfig.json, 는 "Directory"에 ../src, 커스텀을 배치했습니다..d.ts의 ./typings and and and and and and and and and and and and and and and and and and and 。typeRoots.

TypeScript 2.1.6과 2.2.0으로 테스트했는데 둘 다 안 돼요.

것을 시키는 한 가지 은 내 것을 입니다.typings에 등록하다.src 다음에 또 한 번.import {IMyInterface} from 'typings/blah'제가 쓸 필요가 없는 것 같아서 좀 그렇네요.이러한 인터페이스를 어플리케이션 전체에서 '마술처럼' 사용할 수 있도록 하고 싶다.

예가 .app.d.ts 삭제:

interface IAppStateProps {}
interface IAppDispatchProps {}
interface IAppProps extends IAppStateProps, IAppDispatchProps {}

할 필요가 있나요?export 또는 declare★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★!!

갱신(2020년 10월)

이 질문이 아직도 놀라울 정도로 인기가 있는 것을 보고 그 해결책을 좀 더 자세히 설명하고 싶었다.

번째로 을 줄 수 예에는 '나'나 '나'가 없습니다.export질문할 때 파일에 키워드가 있는 것은 거의 확실합니다.나는 그들이 있든 없든 아무런 차이가 없다고 생각하면서 그들을 질문에 포함시키지 않았다고 믿는다.아닌요.export를 "수 과 "사용"할 필요가 명시적으로 ""할 필요가 없는 것과 를 ""할 수 것이 정확히 합니다.import 사람들 그 사람들, 그 사람들.

따라서 TypeScript에서의 동작 방법은 다음과 같습니다.

않고 할 수 는 Import/에 있어야 ..ts으로는 「」입니다..d.ts동일한 파일에 Import 또는 내보내기가 존재하지 않는 파일.이는 같은 파일에서 적어도1개를 내보내는 즉시 모듈이 되고 그 모듈에 있는 모든 것을 소비자가 나중에 Import해야 하기 때문에 가장 중요합니다.

를 들어, 이 '아까보다'라는 글자를 Dictionary수입하다이를 선언하는 방법은 다음과 같습니다.

// types.d.ts
interface Dictionary {}
interface Foo {}
interface Bar {}

사용 방법은 다음과 같습니다.

// consumer.ts
const dict: Dictionary = {};

단, 어떤 이유로 파일 내의 인터페이스/유형이 내보내지면 다음과 같이 동작하지 않습니다.

// types.d.ts
interface Dictionary {}
interface Foo {}
export interface Bar {}

이 파일에 Import가 있는 경우에도 동작하지 않습니다.

// types.d.ts
import { OtherType } from 'other-library';

interface Dictionary {}
interface Foo extends OtherType {}
interface Bar {}

만 사용할 수 .Dictionary을 내보낸 후 consumertype으로 .

// types.d.ts
export interface Dictionary {}
interface Foo {}
export interface Bar {}

// consumer.ts
import { Dictionary } from './types';

const dict: Dictionary = {};

--isolatedModules

외에도 '기호'를 할 때 해야 할 .isolatedModulesReact - TypeScript 모듈 사용 디폴트로 할 수 TypeScript의 .이 플래그는 Create React App을 사용할 때 기본적으로 활성화(비활성화할 수 없음)됩니다..ts파일이 적어도1개를 내보내야 합니다.그렇지 않으면 "All files must be modules when '--isolated Modules' 플래그가 제공될 때" 오류가 나타납니다.그 말은 즉, 그 말인즉슨Dictionary의 types.ts은 작동하지 않습니다.export 키워드가 없는 파일은 작동하지 않습니다.에서의 내보내기 중 하나여야 합니다..ts파일: 에 내보내기가 없는 선언서입니다..d.ts 삭제:

// types.d.ts
interface Dictionary {}        // works
export interface Dictionary {} // works

// types.ts
interface Dictionary {}        // doesn't work with --isolatedModules enabled
export interface Dictionary {} // works

N.B.B.B.
@ 모듈dtabuenc)에서.d.ts파일)은 파기되어 있기 때문에, 수정은 어드바이스로서 받아들여지지 않습니다.이는 TypeScript에서 일반 모듈과 주변 모듈이 어떻게 작동하는지 설명하기 위한 시도입니다.

「마법의 사용 가능한 인터페이스」나 글로벌 타입은, 매우 권장되지 않습니다.대부분은 레거시에 맡겨야 합니다.선언 예: 「」등)을 주세요.d.ts파일)을 클릭합니다.이는 외부 비타입 스크립트 코드 대신 사용하기 위한 것입니다(javascript와 보다 잘 통합할 수 있도록 기본적으로 js 코드에 타이프 스크립트 유형을 입력합니다).

에는 플레인(plain)을 ..ts인터페이스 및 유형을 정의하는 파일입니다.

권장되지 , 이 은 두 ..ts파일을 입력합니다. 것들을 '이러다'라고 요.scripts ★★★★★★★★★★★★★★★★★」modules

の の a a の in inscript글로벌하게 전개됩니다. 내에서 할 수 한).///<reference path=""> 「」를 경유합니다.files:[] ★★★★★★★★★★★★★★★★★」includes:[] " " " " 입니다.**/*.ts 안에서tsconfig.json.

파일 은 ' 'module' 안에 있는 형식입니다.module는 모듈 전용입니다.모듈에서 임의의 것을 내보내는 경우 다른 모듈이 Import를 선택한 경우 해당 모듈을 사용할 수 있습니다.

의 요소.ts "을하시겠습니까?스트나나나나나나나나나를를를를를를?음...사용한다면import/export파일 내의 임의의 위치에 있는 경우 해당 파일은 "파일"이 됩니다.「 」가 없는 import/export글로벌 스크립트입니다.

사용하신 것 .import ★★★★★★★★★★★★★★★★★」export모듈로 변환하여 모듈 내의 모든 인터페이스를 프라이빗으로 변환합니다.글로벌하게 하려면 파일 내에서 Import/export 문을 사용하지 않도록 해야 합니다.

이 용어는 "글로벌" 인터페이스로, "Magically Available interface"가 아닙니다.

그리고 일부에서는.d.ts I global 일일 、 로 file file file file file fileWindow다음과 같이 합니다.

export {};

declare global {
    interface Window {
        // Below just informs IDE and/or TS-compiler (it's set in `.js` file).
        myGlobalVariable: any;
    }
}

동일한 기술을 사용하여 (기존을 확장하는 대신) 커스텀 글로벌인터페이스를 작성할 수 있습니다.

예

import React from 'react';

declare global {
    interface MyGlobalInterface {
        myComponentField: React.Component;
    }
}

주의해 주세요..d.ts 모듈을 수 이 「」에 의해서 되어 한).모든 모듈을 Import할 수 있습니다(모듈이 설치되어 있는 한).package.json물론입니다).

언급URL : https://stackoverflow.com/questions/42233987/how-to-configure-custom-global-interfaces-d-ts-files-for-typescript