TypeScript 성명 파일

성명 파일 개요
제3자 라 이브 러 리 를 사용 할 때,우 리 는 그것 의 성명 파일 을 인용 해야만 대응 하 는 코드 보완,인터페이스 알림 등의 기능 을 얻 을 수 있다.
성명 문 이 무엇 입 니까?
만약 에 우리 가 제3자 라 이브 러 리 jQuery 를 사용 하고 싶다 면 html 에서라벨 을 통 해 jQuery 를 도입 한 다음 에 전체 변수$나jQuery를 사용 할 수 있 습 니 다.예:

$('body')

그러나 ts 에서 컴 파일 러 는$또는jQuery가 무엇 인지 모른다.

$('body') //Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i @types/jquery`.

이때 우 리 는declare var를 사용 하여 그 유형 을 정의 해 야 한다.

declare var $: (selector: string) => any;
$('body')

declare var변 수 를 정의 하지 않 고 전체 변수$의 유형 만 정 의 했 을 뿐 컴 파일 시의 검사 에 만 사용 되 고 컴 파일 결과 에서 삭 제 됩 니 다.
성명 파일 이 무엇 입 니까?
보통 우 리 는 성명 문 구 를 하나의 단독 파일index.d.ts에 넣 습 니 다.이것 이 바로 성명 파일 입 니 다.

interface myInfoType {
    name?: string;
    age?: number;
    [params:string]: any;
}
declare const myInfo: myInfoType;
declare const $: (selector: string) => any;

성명 파일 은.d.ts 를 접미사 로 해 야 합 니 다.
ts 는 프로젝트 의 모든*.ts파일 을 분석 합 니 다.물론.d.ts로 끝 나 는 파일 도 포함 되 어 있 습 니 다.그래서 우리 가jQuery.d.ts을 프로젝트 에 넣 었 을 때 다른 모든*.ts파일 은$의 유형 정 의 를 얻 을 수 있 습 니 다.

├── src #         
│    ├── category //    
│    │    ├── demo1
│    │    ├── demo2
│    │    └── ...
│    ├── components //    
│    ├── util //    
│    └── custom.d.ts //          
├── index.html //      
├── .gitignore //git    
├── .eslintrc.js //eslint    
├── package.json //   
├── tsconfig.json //ts  
├── webpack.config.build.js //webpack  
├── webpack.config.base.js //webpack    
└── webpack.config.js //      

여전히 해석 할 수 없다 면tsconfig.json의files,include,exclude설정 을 확인 하여index.d.ts파일 이 포함 되 어 있 는 지 확인 할 수 있 습 니 다.
그 러 니까 파일 이 코드 로 사용 할 최상 위 디 렉 터 리 아래
제3자 성명 문건
우 리 는 직접 다운로드 해서 사용 할 수 있 지만,더욱 추천 하 는 것 은@types제3자 라 이브 러 리 의 성명 파일 을 통일 적 으로 관리 하 는 것 이다.@types의 사용 방식 은 매우 간단 합 니 다.npm 로 대응 하 는 성명 모듈 을 직접 설치 하면 됩 니 다.jQuery 로 예 를 들 면:

npm install @types/jquery --save-dev

성명 서 를 쓰다
서로 다른 장면 에서 성명 파일 의 내용 과 사용 방식 은 차이 가 있 을 수 있다.
라 이브 러 리 의 사용 장면 은 주로 다음 과 같은 몇 가지 가 있다.

[전역 변수]():탭 을 통 해 제3자 라 이브 러 리 를 도입 하고 전역 변수

를 주입 합 니 다.

[npm 패키지]():import foo from 'foo'가 져 오기 로 ES6 모듈 규범

에 부합 합 니 다.

[UMD 라 이브 러 리]():탭 을 통 해 도입 할 수도 있 고import를 통 해 도입 할 수도 있 습 니 다

[전역 변수 직접 확장]():탭 을 통 해 도입 한 후 전역 변수의 구 조 를 바 꿉 니 다

[npm 패키지 나 UMD 라 이브 러 리 에서 전역 변 수 를 확장 합 니 다]():npm 패키지 나 UMD 라 이브 러 리 를 참조 한 후 전역 변수의 구 조 를 변경 합 니 다

[모듈 플러그 인]():또는import을 통 해 가 져 온 후 다른 모듈 의 구조 변경

전역 변수
전역 변수의 성명 파일 을 사용 할 때npm install @types/xxx --save-dev로 설치 되 어 있 으 면 설정 이 필요 하지 않 습 니 다.그렇지 않 으 면 성명 파일 에 전역 변 수 를 설명해 야 합 니 다.
전역 변수의 성명 파일 은 주로 다음 과 같은 몇 가지 문법 이 있 습 니 다.

[선언 var/const/let]()전역 변수

[declare function]()전역 방법 성명

[declare class]()전역 클래스 성명

[declare enum]()전역 매 거 진 유형 성명

[declare namespace]()성명(하위 속성 포함)전역 대상

[interface 와 type]()전역 형식 설명

declare var/const/let
전역 변수의 종 류 를 정의 하 는 데 사용 하기;

interface myInfoType {
    name?: string;
    age?: number;
    [params:string]: any;
}
declare var myInfo:myInfoType;
declare let myInfo:myInfoType;
declare const myInfo:myInfoType; //                

일반적으로 전역 변 수 는 수정 이 금 지 된 상수 이기 때문에 대부분const이나var가 아 닌let을 사용 해 야 한다.
주의해 야 할 것 은 성명 문 에서 유형 만 정의 할 수 있 고 성명 문 에서 구체 적 인 실현 을 정의 하지 마 십시오.

declare const test = function(para) {
    return para;
}
//An implementation cannot be declared in ambient contexts.

declare function declare function전역 함수 의 유형 을 정의 합 니 다.

declare function test(para: string):any;

통일 도 유형 만 정의 할 수 있 고 구체 적 으로 실현 할 수 없다.

declare function test(para: string):any{
    return para;
}
//An implementation cannot be declared in ambient contexts.ts(1183)

declare class
전역 변수 가 같은 클래스 일 때,우 리 는declare class로 그 유형 을 정의 합 니 다

declare class student {
    name: string;
    constructor(name: string);
    hello(): string;
}

마찬가지 로declare class문 구 는 유형 만 정의 할 수 있 고 구체 적 인 실현 을 정의 할 수 없다.예 를 들 어 hello'방법의 구체 적 인 실현 을 정의 하면 오 류 를 보고 할 수 있다.

declare class student {
    name: string;
    constructor(name: string);
    hello(){
        return this.name;
    };
}
//An implementation cannot be declared in ambient contexts.ts(1183)

declare namespace namespace는 ts 초기 에 모듈 화 를 해결 하기 위해 만 든 키워드 로 중국 어 를 네 임 스페이스 라 고 부른다.
ES6 의 광범 위 한 응용 에 따라 이 제 는 ts 중의namespace를 더 이상 사용 하 는 것 을 권장 하지 않 고 ES6 의 모듈 화 방안 을 추천 하기 때문에 우 리 는 더 이상 학습namespace의 사용 을 필요 로 하지 않 는 다.namespace탈락 되 었 으 나 성명 파일 에서declare namespace는 비교적 자주 사용 되 는 것 으로 전체 변 수 는 하나의 대상 이 고 많은 하위 속성 을 포함 하고 있 음 을 나타 낸다.

declare namespace jQuery {
    function ajax(url: string, settings?: any): void;
}

인터페이스 와 type
전역 변 수 를 제외 하고 우리 도 노출 되 기 를 바 라 는 유형 이 있 을 수 있 습 니 다.형식 성명 파일 에서 저 희 는interface또는type를 직접 사용 하여 전체적인 인터페이스 나 유형 을 설명 할 수 있 습 니 다.

interface fetchOptions {
    method?: 'GET' | 'POST';
    credentials?: string;
    headers?: any;
    [params: string]: any;
}
let options: fetchOptions = {
    method: 'GET',
    credentials: 'include'
}

이름 충돌 방지
가장 바깥쪽 에 노출 된interface또는type는 전체 프로젝트 에 전체 유형 으로 작용 할 수 있 으 므 로 우 리 는 가능 한 한 전체 변수 나 전체 유형의 수량 을 줄 여야 한다.그래서 그들 을namespace내 려 놓 는 것 이 좋 습 니 다.

declare namespace fetchSetting {
    interface fetchOptions {
        method?: 'GET' | 'POST';
        credentials?: string;
        headers?: any;
        [params: string]: any;
    }
}
let options: fetchSetting.fetchOptions = {
    method: 'GET',
    credentials: 'include'
}