남의 패키지인 Redux & Axios 사용하기

definitelytyped github에 가보자.

https://github.com/DefinitelyTyped/DefinitelyTyped

types 폴더에 들어가보면 엄청나게 많은 패키지들이 들어있는데 누군가가 type을 만들어 놓은 것이다.(사용자들이 마음대로 써라고)

 

d3 라이브러리도 유명하다 다만 typescript가 없다.

https://github.com/d3/d3

 

vue는 자체에서 type을 지원하기 때문에 defenitelytyped vue가 없다.

패키지 자체에서 공식적으로 타입스크립트를 지원하기 때문ㅇ redux나 axios같은 경우도 definitely typed에서는 빠진다. 

 

패키지 자체에서 지원하지 않는 애들 d3나 jquery 같은 것들은 definitely typed에 들어있다.

 

vue같이 유명한 프레임워크는 vue 자체에서 d.ts를 만들어 놓았다.(axios와 같은 case)

https://github.com/vuejs/vue/blob/dev/types/index.d.ts

import { Vue } from "./vue";
import "./umd";

export default Vue;

 

d3 index.d.ts를 보면

https://github.com/definitelyTyped/DefinitelyTyped/blob/master/types/d3/index.d.ts

namespace는 아래 d3-되있는 것들을 d3로 다 묶어주는 역할을 한다.

export as namespace d3;

/**
 * Version number in format _Major.Minor.BugFix_, like 7.0.0.
 */
export const version: string;

export * from 'd3-array';
export * from 'd3-axis';
export * from 'd3-brush';
export * from 'd3-chord';
export * from 'd3-color';
export * from 'd3-contour';
export * from 'd3-delaunay';
export * from 'd3-dispatch';
export * from 'd3-drag';
export * from 'd3-dsv';
export * from 'd3-ease';
export * from 'd3-fetch';
export * from 'd3-force';
export * from 'd3-format';
export * from 'd3-geo';
export * from 'd3-hierarchy';
export * from 'd3-interpolate';
export * from 'd3-path';
export * from 'd3-polygon';
export * from 'd3-quadtree';
export * from 'd3-random';
export * from 'd3-scale';
export * from 'd3-scale-chromatic';
export * from 'd3-selection';
export * from 'd3-shape';
export * from 'd3-time';
export * from 'd3-time-format';
export * from 'd3-timer';
export * from 'd3-transition';
export * from 'd3-zoom';

코드로 따져보면 d3라는 객체를 namespace로 묶어준다고 한다.

import * as d3 from 'd3';

d3.array

d3-array의 index.d.ts 보면 

https://github.com/definitelyTyped/DefinitelyTyped/blob/master/types/d3-array/index.d.ts

GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.

 

Primitive Numeric max 이런 애들을 d3 index.d.ts에서 import 해서 바로 내보낸다.(d3.max, d3.numeric)

// d3-array index.d.ts

export type Primitive = number | string | boolean | Date;


export interface Numeric {
    valueOf(): number;
}

... 

export function max(iterable: Iterable<string>): string | undefined;

d3 index.d.ts


export * from 'd3-array'; // 이거는 import 해서 바로 내보낸다는 뜻이다.

 

jquery의 index.d.ts도 보자. 맨 밑에 이렇게 나와있다. common.js에서 보통 쓴다고 생각하자.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery/index.d.ts

...
...
...



export = jQuery;

export = jQuery;라고 되어있으니까 아래와 같이 써줘야 한다.

import $ = require('jquery');

// 두 번째껄로 써준다.
import * as $ from 'jquery';

// * as를 안쓰고 import $ from 'jquery'; 이렇게 써야겠다 하면
// tsconfig.json에다가 esModuleInterop: true라고 써준다.

 

그리고 jquery와 jquery에 대한 type을 설치하고 싶다하면 

즉 axios나 redux처럼 자체적으로 type을 지원하지 않는(vue는 자체적으로 타입지원)것들이 아니면 @types/jquery로해서 types를 같이 받아와야 한다.

 

 즉 jquery같이 definitely typed를 받을 때는 jquery와 @types를 같이 해준다.

npm i jquery @types/jquery

 

 

react도 한번 보자.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts

아래와 같이 export = React로 되있는데 react는 import 할 때 

export = React;
export as namespace React;

이렇게 한다.(common.js로 되어있기 때문에)

import * as React from 'react';

 

그리고 namespace가 있기 때문에 리액트에서는 React.Component라고 쓸 수 있다.(React가 namespace)

 

 

 

<출처 조현영: 웹게임을 만들며 배우는 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 - 인프런 | 강의