source

TypeScript 키워드 선언의 목적

manycodes 2023. 3. 2. 22:22
반응형

TypeScript 키워드 선언의 목적

의 의미는 무엇입니까?declare★★★★★★★★★★★★★★★★★?

type Callback = (err: Error | String, data: Array<CalledBackData>) => void;

대.

declare type Callback = (err: Error | String, data:Array<CalledBackData>) => void;

수 없습니다.declare키워드를 지정합니다.★★★★★★★★★★★★★★★★★?

TL;DR

declare는 컴파일러에 "이것(일반적으로 변수)이 이미 존재하기 때문에 다른 코드로 참조할 수 있습니다.또한 이 문을 자바스크립트로 컴파일할 필요가 없습니다."고고말말말말다다

일반적인 사용 사례:

컴파일러가 전혀 모르는 JavaScript 파일에 웹 페이지에 대한 참조를 추가합니다.이 스크립트는 'foo.com'과 같은 다른 도메인에서 온 스크립트일 수 있습니다.평가되면 유용한 API 메서드를 사용하여 오브젝트를 생성하여 글로벌 스코프의 식별자 fooSdk에 할당합니다.

가 TypeScript 를 할 수 .fooSdk.doSomething(), 가 「」를 않기 「」는 인식되지 않습니다.fooSdk변수가 존재하면 컴파일 오류가 발생합니다.

다음 '먹다'를 합니다.declare키워드를 사용하여 컴파일러에 "믿어주세요, 이 변수가 존재하고 이 유형이 있습니다"라고 말합니다.컴파일러는 이 문을 사용하여 다른 코드를 정적으로 검사하지만 출력의 JavaScript로 변환하지는 않습니다.

declare const fooSdk = { doSomething: () => boolean }

새로운 Typescript 버전에서는 약간 다른 구문이 필요합니다.

declare const fooSdk : { doSomething: () => boolean }

마찬가지로 클래스 속성에 declare 키워드를 추가하여 컴파일러가 알지 못하거나 이해하지 못하는 독자적인 코드를 가지고 있다고 가정하고 이 속성을 작성하는 코드를 내보내지 않도록 컴파일러에게 지시할 수 있습니다.

특정 예는 변수가 아닌 유형을 선언하고 있으며 이미 JavaScript로 컴파일되지 않은 유형을 선언하고 있기 때문에 다릅니다.유형을 신고할 이유가 있는지 모르겠습니다.

여기 실제 세계의 예가 있다.

웹팩 핫 미들웨어를 사용하는 TypeScript React 앱이 있습니다.Webpack Hot Middleware는 TypeScript가 아니라 구식 JavaScript로 작성되어 있습니다.따라서 TypeScript 컴파일러가 체크할 수 있는 타입 선언은 없습니다.

「」가 됩니다.moduleWebpack Hot Middleware, TypeScript React, Console.log web web 。

module키도 도 있어요.module.hot을 사용법 (의) 컴파일러는 그 에 빨간색 .property 'hot' does not exist지하만!

TypeScript 컴파일러가 동의하도록 하려면 다음과 같이 선언합니다.

declare let module: any

의 「」module 브젝 of of of of of of of of of of of of of of of of of 의 종류가 .any타이프 스크립트빨간색도 없어지고 다른 코드를 컴파일하고 쓸 수 있게 되었습니다.

「」를 삭제했을 .declare , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , .let module: any편찬이 안 '이 안 된다'고 되어 있어요'module' already exists인정된 답변의 '주변'이 바로 그 의미입니다.

Typescript 문서에서:

유형 스크립트 - 다른 JavaScript 라이브러리 사용

TypeScript에서 작성되지 않은 라이브러리의 모양을 설명하기 위해서는 라이브러리가 제공하는 API를 선언해야 합니다.대부분의 JavaScript 라이브러리는 일부 최상위 개체만 표시하므로 네임스페이스는 이러한 개체를 표현하는 좋은 방법입니다.

실장을 정의하지 않는 선언을 「환경」이라고 부릅니다.일반적으로 이들은 .d.ts 파일에 정의되어 있습니다.C/C++에 익숙한 경우 .h 파일로 생각할 수 있습니다.몇 가지 예를 들어 보겠습니다.

주변 네임스페이스

널리 사용되는 라이브러리 D3는 d3라고 하는 글로벌 오브젝트에 그 기능을 정의합니다.이 라이브러리는 (모듈 로더가 아닌) 태그를 통해 로드되므로 선언에서는 네임스페이스를 사용하여 모양을 정의합니다.TypeScript 컴파일러가 이 쉐이프를 표시하기 위해서는 주변 이름 공간 선언을 사용합니다.예를 들어 다음과 같이 쓸 수 있습니다.

D3.d.ts(간단 발췌)

declare namespace D3 {
    export interface Selectors {
        select: {
            (selector: string): Selection;
            (element: EventTarget): Selection;
        };
    }
    // (...)
}

구현 코드를 작성하기 전에 declarate를 사용하여 컴파일러에 유형에 대해 알릴 수 있으며 TypeScript는 만족할 것입니다.

declare function foo(name: string): string

다음 시나리오를 고려해 주십시오.타이프스크립트 프로젝트가 있습니다.그런 다음 어떤 이유로든 JavaScript로 모듈을 작성하여 Typescript 코드로 사용합니다.

// getMyName.js
module.exports = function getMyName(name) {
    return name;
}

그런 다음 타이프스크립트 코드로 Import합니다.

// myCode.ts
import getMyName from 'getMyName'; //getMyName is a JS module not typescript

모듈 시(JS Import)allowJs은 「컴파일러」로 .false그렇지 않으면 JS 파일은 유형 정의 없이 해결됩니다.) 타이프 스크립트

Could not find a declaration file for module '/absolute/path/to/getMyName.ts'

타이프 스크립트 JS입니다. 위해 유형 유형 정의)를 해야 합니다.filename.d.ts)를 참조해 주세요.를 사용할 수 있도록 하기 위해declare그리고.export.

// getMyName.d.ts
declare function getMyName(name: string): string;

export default getMyName;

그 후 JS 모듈을 Import하면 typescript는 types에 액세스할 수 있기 때문에 불평하지 않습니다.

일부 라이브러리를 가져올 때 사용하는 delcare 키워드에는 *.d.ts와 같은 선언 유형 파일이 없습니다.

그 후 vs eslint not check the synthax and context 는 tsc 컴파일러를 디폴트로 사용하는 경우 구문 오류를 삭제하도록 선언하는 타당한 이유를 전달합니다.

언급URL : https://stackoverflow.com/questions/43335962/purpose-of-declare-keyword-in-typescript

반응형