커스텀 패키지 타이핑

typescript로 만들어진 패키지인 redux가 최고고 javascript로 만들어졌지만 index.d.ts를 제공하는 axios가 두번째로 좋고

 

세번째로 좋은거는 definitelytyped에 있는 것들이고 네번째 유형이 definitelytyped에 없는 것들이다.

한번 찾아보자. can-use-dom이라는 라이브러리를 설치하고

npm i can-use-dom

 

아래 코드를 치면 에러가 나온다. 즉 아무도 can-use dom에 대한 type을 만들어 놓지 않았다.

npm i @types/can-use/dom

npm i @types/can-use/dom Error

 

라이브러리 자체는 존재한다.

https://www.npmjs.com/package/can-use-dom

 

 

아래 코드를 치게되면 

import * as canUseDom from 'can-use-dom'

 

에러가 발생한다. 즉 can use dom의 d ts파일을 못찾겠다는 것이다. 에러내용대로 npm i --save-dev @types/can-use-dom을 시도했는데 없었다. 이게 문제다.

'canUseDom'이(가) 선언은 되었지만 해당 값이 읽히지는 않았습니다.ts(6133)

모듈 'can-use-dom'에 대한 선언 파일을 찾을 수 없습니다. 'c:/Users/kjh/Desktop/ts-webgame/lecture/node_modules/can-use-dom/index.js'에는 암시적으로 'any' 형식이 포함됩니다.
해당 항목이 있는 경우 'npm i --save-dev @types/can-use-dom'을(를) 시도하거나, 'declare module 'can-use-dom';'을(를) 포함하는 새 선언(.d.ts) 파일 추가ts(7016)

 

이렇게 type이 없는 것은 우리가 직접 타이핑을 해줘야 한다. can use dom이든 뭐든 타입 없는 것들을 직접 타이핑 해줄 때 다 해줄 필요없고 내가 쓸 부분만 타이핑을 해주면 된다.

타이핑을 한번 해줘보자. types라는 폴더를 만들고 can use dom파일을 만들어 주자. 이제 직접 선언 해줘보자.

// can-use-dom.d.ts

declare module "can-use-dom";

// lecture.ts

import canUseDOM from 'can-use-dom';

console.log(canUseDOM);

 

lecture.ts에서 인식이 되지 않으므로 tsconfig.json에다가

 

tsconfig.json에서 내가 만든 타입들 적어놨다고 typeRoots라는 폴더라고 명시해줘야 한다. 

그리고 include부분을 빼줘야 한다.(lecture.ts에만 범위를 주고 typeRoots를 적용하니까 안된다. 빼주자)

 

이제 lecture.ts에 있는 can-use-dom에서 go to definition으로 하면 can-use-dom.d.ts로 이동하는 것을 볼 수 있다.

// tsconfig.json 아래로 변경

{
    "compilerOptions": {
        "strict": true,
        "strictNullChecks": true,
        "lib": ["ES5", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020", "DOM"],
        "typeRoots": ["./types"] 
    },
    "exclude": ["*.js"],
    "include": ["lecture.ts"]
}

// tsconfig.json

{
    "compilerOptions": {
        "strict": true,
        "strictNullChecks": true,
        "lib": ["ES5", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020", "DOM"],
        "typeRoots": ["./types", "./node_modules/@types"] 
    },
    "exclude": ["*.js"],
}

// can-use-dom.d.ts
declare module "can-use-dom" {
    const canUseDOM: boolean;
    export default canUseDOM;
}

// lecture.ts

import canUseDOM from 'can-use-dom';

console.log(canUseDOM);

 

 

그리고 가끔씩 전역객체인 window에다가 뭐를 추가할 때가 있다. 이럴때 오류가 한번 씩 난다. 타이핑을 또 해주자

window.hello = 'a';

types폴더에 index.d.ts를 만들고 작성해준다,

// index.d.ts

declare global {
    export interface Window {
        hello: string;
    }
}

 

그리고 error에 대한 코드도 놓고싶어서 작성하면 에러가뜬다.

window.hello = 'a';
const error = new Error('');
error.code;

index.d.ts에다가 추가해주자. global 부분에 빨간색이 뜨는데 오류내용을 보자.

// index.d.ts

declare global {
    export interface Window {
        hello: string;
    }
    interface Error {
        code?: any;
    }
}

import나 export 쓰는 것들이 외부모듈이고 namespace는 내부모듈

전역 범위에 대한 확대는 외부 모듈 또는 앰비언트 모듈 선언에만 직접 중첩될 수 있습니다.ts(2669)

ambient module은 d ts 하는거 즉 내가 만든 모듈은 declare해서 써주는 것이 ambient module이다.

그러나 global인 경우에는 ambient 모듈을 못 쓰니까 export{}(안넣어주면 global에서 에러가 발생)라고 써준다. 그러면 두개가 합쳐진다.

// index.d.ts
export {}

declare global {
    export interface Window {
        hello: string;
    }
    interface Error {
        code?: any;
    }
}

// lecture.ts

import canUseDOM from 'can-use-dom';

console.log(canUseDOM);

window.hello = 'a';
const error = new Error('');
error.code;

 

 

 

 

 

<출처 조현영: 웹게임을 만들며 배우는 TypeScript>

https://www.inflearn.com/course/%EC%9B%B9%EA%B2%8C%EC%9E%84%EC%9D%84-%EB%A7%8C%EB%93%A4%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-typescript/dashboard

웹 게임을 만들며 배우는 TypeScript - 인프런 | 강의