TypeScript의 "* .d.ts"정보

*.d.tsTypeScript의 초보자이기 때문에 궁금 합니다. 그리고 누군가에게 이런 종류의 파일은 C ++의 "헤드 파일"과 비슷하지만 JS 전용이라고 들었습니다. 하지만 난에 순수 JS 파일을 변환 할 수 없습니다 *.d.ts내가 forcely (가) 변경하지 않는 한 파일 *.js에 *.ts. 그래서 JS 파일, TS 파일 및 파일의 세 파일이 *.d.ts있습니다.

1. 그들 사이의 관계는 무엇입니까?

2. *.d.ts파일을 어떻게 사용 합니까? *.ts파일을 영구적으로 삭제할 수 있다는 의미 입니까?

3. 그렇다면 *.d.ts파일은 어떤 JS 파일이 자신에게 매핑 되는지 어떻게 알 수 있습니까?

누군가 나에게 모범을 보여줄 수 있다면 매우 좋을 것입니다.

"d.ts"파일은 JavaScript로 작성된 API에 대한 유형 스크립트 유형 정보를 제공하는 데 사용됩니다. 아이디어는 기존 자바 스크립트 라이브러리 인 jQuery 또는 밑줄과 같은 것을 사용한다는 것입니다. 타입 스크립트 코드에서 그것들을 소비하려고합니다.

jquery, 밑줄 또는 기타 유형 스크립트를 다시 작성하는 대신 유형 주석 만 포함 된 d.ts 파일을 작성할 수 있습니다. 그런 다음 타입 스크립트 코드에서 순수한 JS 라이브러리를 사용하면서 정적 타입 검사의 타입 스크립트 이점을 얻을 수 있습니다.

d선언 파일 (Declaration Files)의 약자 :

TypeScript 스크립트가 컴파일되면 컴파일 된 JavaScript의 구성 요소에 대한 인터페이스 역할을하는 선언 파일 (확장명이 .d.ts)을 생성하는 옵션이 있습니다. 프로세스에서 컴파일러는 모든 함수 및 메소드 본문을 제거하고 내 보낸 유형의 서명 만 보존합니다. 그런 다음 결과 선언 파일을 사용하여 타사 개발자가 TypeScript에서이를 소비 할 때 JavaScript 라이브러리 또는 모듈의 내 보낸 가상 TypeScript 유형을 설명 할 수 있습니다.

선언 파일의 개념은 C / C ++에있는 헤더 파일의 개념과 유사합니다.

declare module arithmetics {
    add(left: number, right: number): number;
    subtract(left: number, right: number): number;
    multiply(left: number, right: number): number;
    divide(left: number, right: number): number;
}

jQuery 및 Node.js와 마찬가지로 기존 JavaScript 라이브러리에 대해 유형 선언 파일을 직접 작성할 수 있습니다.

널리 사용되는 JavaScript 라이브러리를위한 대규모 선언 파일 모음은 GitHub의 DefinitelyTyped 및 Typings Registry 에서 호스팅됩니다 . 리포지토리에서 선언 파일을 검색하고 설치하는 데 도움이되는 타이핑 이라는 명령 줄 유틸리티 가 제공됩니다.

나는 주석을 달 수 없으므로 이것을 대답으로 추가하고 있습니다.
우리는 기존 유형을 자바 스크립트 라이브러리에 매핑하는 데 어려움을 겪었습니다.

.d.ts파일을 javascript 파일에 맵핑하려면 파일에 javascript 파일 .d.ts과 동일한 이름을 지정하고 파일을 동일한 폴더에 유지 한 후 .d.ts파일에 필요한 코드를 지정 하십시오.

예를 들면 : test.js및 test.d.ts에 testdir/당신이이 같은 가져올 구성 요소 반응, 폴더 :

import * as Test from "./testdir/test";

.d.ts파일과 같은 네임 스페이스로 내 보낸 :

export as namespace Test;

export interface TestInterface1{}
export class TestClass1{}

특정 사례에 대한 실제 예 :

npm을 통해 공유하는 내 모듈 이 있다고 가정 해 봅시다 .

당신은 그것을 설치 npm install my-module

따라서 다음과 같이 사용하십시오.

import * as lol from 'my-module';

const a = lol('abc', 'def');

모듈의 논리는 모두 다음과 index.js같습니다.

module.exports = function(firstString, secondString) {

  // your code

  return result
}

입력을 추가하려면 파일을 작성하십시오 index.d.ts.

declare module 'my-module' {
  export default function anyName(arg1: string, arg2: string): MyResponse;
}

interface MyResponse {
  something: number;
  anything: number;
}

@takeshin이 말했듯이 .d는 typescript (.ts)의 선언 파일을 나타냅니다.

이 게시물에 대한 답변을 진행하기 전에 몇 가지 사항을 명확히해야합니다.

1. Typescript는 자바 스크립트의 구문 상 상위 집합입니다.
2. Typescript는 자체적으로 실행되지 않으므로 javascript로 변환 해야합니다 ( typescript에서 javascript로 변환 )
3. "유형 정의"및 "유형 검사"는 typescript가 javascript에 제공하는 주요 애드온 기능입니다. ( 타입 스크립트와 자바 스크립트의 차이점을 확인하십시오 )

타이프 라이터 그냥 구문 상위 집합 인 경우 당신이 생각하는 경우에, 무슨 혜택이 제공합니까 - https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system

이 게시물에 답변하려면-

우리가 논의했듯이 타입 스크립트는 자바 스크립트의 상위 집합이며 자바 스크립트로 변환해야합니다. 따라서 라이브러리 또는 타사 코드가 typescript로 작성되면 결국 javascript 프로젝트에서 사용할 수있는 javascript로 변환되지만 그 반대도 마찬가지입니다.

예를 들어-

자바 스크립트 라이브러리를 설치하는 경우-

npm install --save mylib

그리고 타입 스크립트 코드로 가져 오십시오.

import * from "mylib";

오류가 발생합니다.

"모듈 'mylib'을 (를) 찾을 수 없음."

@Chris가 언급했듯이 밑줄, Jquery와 같은 많은 라이브러리는 이미 자바 스크립트로 작성되었습니다. 타입 스크립트 프로젝트를 위해 해당 라이브러리를 다시 작성하는 대신 대체 솔루션이 필요했습니다.

이를 위해 위의 mylib.d.ts와 같이 * .d.ts라는 이름의 Javascript 라이브러리에 유형 선언 파일을 제공 할 수 있습니다. 선언 파일은 각 javascript 파일에 정의 된 함수 및 변수의 형식 선언 만 제공합니다.

이제 당신이 시도 할 때-

import * from "mylib";

mylib.d.ts를 가져 와서 자바 스크립트 라이브러리 코드와 타이프 스크립트 프로젝트 간의 인터페이스 역할을합니다.

이 답변은 TypeScript로 변환하지 않으려는 JavaScript가 있지만을 최소한으로 변경하여 유형 검사의 이점을 원한다고 가정합니다 .js. ㅏ.d.ts파일은 매우 C 또는 C ++ 헤더 파일과 같다. 그 목적은 인터페이스를 정의하는 것입니다. 예를 들면 다음과 같습니다.

mashString.d.ts

/** Makes a string harder to read. */
declare function mashString(
    /** The string to obscure */
    str: string
):string;
export = mashString;

mashString.js

// @ts-check
/** @type {import("./mashString")} */
module.exports = (str) => [...str].reverse().join("");

main.js

// @ts-check
const mashString = require("./mashString");
console.log(mashString("12345"));

여기서 관계 mashString.d.ts는 인터페이스를 정의하고 인터페이스를 mashString.js구현하며 인터페이스를 main.js사용하는 것입니다.

형식 검사가 작동하도록하려면 파일에 추가 // @ts-check 하십시오 .js. 그러나 이것은 main.js인터페이스를 올바르게 사용하는지 확인 합니다. 또한 mashString.js올바르게 구현 /** @type {import("./mashString")} */하기 위해 내보내기 전에 추가 합니다.

당신은 당신의 초기를 만들 수 있습니다 .d.ts 파일을tsc -allowJs main.js -d 다음 필요에 따라 수동으로 편집하여 유형 확인 및 문서를 개선 할 수 있습니다.

대부분의 경우 구현과 인터페이스의 이름은 here mashString입니다. 그러나 대체 구현을 가질 수 있습니다. 예를 들어 이름 mashString.js을 바꾸고 reverse.js다른 이름 을 가질 수 encryptString.js있습니다.