순수 .js 파일에 대한 힌트 입력

2015년에 Typescript가 시작되었습니다. 저를 믿거나 말거나 개발자 커뮤니티에서 거부감이 있었습니다. 사무실의 새로운 사람이었기 때문인 것 같습니다.

나에게 묻는다면 Typescript는 굉장합니다. 멋진 수트처럼.

그러나 때때로 당신은 캐주얼한 모습을 찾고 있습니다; 스포츠 재킷과 청바지.

컴파일 단계를 건너뛰는 동안 여기 저기에 몇 가지 유형 힌트가 있으면 어떻게 합니까? .js 파일만 유지합니다.
글쎄, 실제로 가능합니다 (적어도 VSCode에서는).

이 최소한의 구조가 있다고 가정 해 봅시다.

  ├── package.json
  └── src
      │── index.js
      └── api.js

api.js에서 일부 타사를 가져와서 값을 매핑하고 자체 모델을 구축하고 있습니다. 예를 들어:

const getTickets = (username) => {
  return fetch("http://example.com/api/endpoint")
    .then((response) => ({ 
      id: ...,
      name: ..., 
      status: ...
    }))
}

나중에 우리는 다음과 같은 것을 가질 수 있습니다:

const doSomethingWithUserTickets = (username, tickets) => ...

지금까지는 좋았으니 인텔리센스를 개선해 봅시다.


먼저 프로젝트 루트에 tsconfig.json 및 types.d.ts 두 파일을 추가해야 합니다.

  ├── package.json
+ ├── tsconfig.json
+ ├── types.d.ts
  └── src
      │── index.js
      └── api.js

tsconfig.json에서 "안녕하세요. 이 .js 파일을 살펴보되 컴파일하지 마십시오."라고 말할 것입니다.

{
    "compileOnSave": false,
    "compilerOptions": {
        "noEmit": true,
        "allowJs": true,
        "checkJs": true,
        "target": "es6",
        "resolveJsonModule": true,
        "moduleResolution": "node"
    },
    "include": ["./src"]
}

types.d.ts에서 도메인에 필요할 수 있는 모든 유형을 선언합니다.

declare namespace TicketingSystem {
    interface Ticket {
        id: string;
        name: string; 
        status: 'OPEN' | 'IN_PROGRESS' | 'RESOLVED' | 'BLOCKED';
    }
}

Usually I name the namespace the same as the project (name at package.json); but this is personal.

이제 해당 유형을 JSDocs , VSCode will honor JSDoc 로 사용하십시오.

+ /**
+  * @param {string} username
+  * @return {Promise<TicketingSystem.Ticket[]>}
+  */
 const getTickets = (username) => {
   return fetch("http://example.com/api/endpoint")
     .then((response) => ({ 
       id: ...,
       name: ..., 
       status: ...
     }))
 }

+ /**
+  * @param {string} username
+  * @param {TicketingSystem.Ticket[]} tickets
+  */
 const doSomethingWithUserTickets = (username, tickets) => ...

외부 유형

더 많은 'hello world'를 얻자마자 우리는 npm 패키지를 설치하고... 조만간 제3자의 유형을 참조하게 될 것입니다.

좋은 소식은 우리도 다루고 있다는 것입니다. 제안은 types.d.ts에서 유형 별칭을 만드는 것입니다.

 declare namespace TicketingSystem {
     interface Ticket {
         id: string;
         name: string; 
         status: 'OPEN' | 'IN_PROGRESS' | 'RESOLVED' | 'BLOCKED';
     }
+
+   /* third party alias */
+   type Context = import("third-party-package").Context // whatever
+   type Storage = import("another-package").Storage // whatever
 }

이렇게 하면 다음과 같은 다른 유형으로 사용할 수 있습니다.

/** 
 * @param {TicketingSystem.Ticket} ticket
 * @param {TicketingSystem.Context} context
 * @param {TicketingSystem.Storage} storage
 */
const saveTicket = (ticket, context, storage) => ...

최종 팁

저는 객체 매개변수를 많이 사용합니다. 다음과 같이 입력합니다.

/** 
 * @param {object} param0
 * @param {TicketingSystem.Ticket} param0.ticket
 * @param {TicketingSystem.Context} param0.context
 * @param {TicketingSystem.Storage} param0.storage
 */
const saveTicket = ({ ticket, context, storage }) => ...

중형 및 대형 프로젝트를 위한 전체 TypeScript 설정을 권장합니다. 그러나 "여기 저기 일부 인터페이스"라는 아이디어는 소규모 프로젝트, POC, bash 유틸리티 및 스크립팅에 유용합니다.

--

Banner image: People illustrations by Storyset

읽어주셔서 감사합니다 💚.