[TS] declare / d.ts / index signatures

 

 

 

 

---

 

 

 

 

---

 

 

 

 

declare

 

 

 외부 js 파일 import 했을 때, 파일이 ts로 작성된게 아니라 js로 작성된 파일이면 에러가 발생한다.

 

 이럴 때 declare 쓰면 이미 정의된 변수나 함수,타입을 재정의하여 '타입에러나 변수없다는 에러' 방지할 수 있다,

// data.js
let a = 1;
let b = {name : 'kim'}

//index.ts (data.js파일에서 변수 a를 가져다가 쓰고싶을 때)

declare let a : number;

'a 라는 변수를 이 파일에서 잠깐 정의한다" (a라는 변수 어디에 있으니까 그만 징징거려라)

js로만 작성된 외부 라이브러리 쓸 때 유용, ts 버전이 없다면 직접 declare로 타입작성하면 된다.

ts파일들은 변수만들 타입 까먹어도 자동으로 타입지정이 되어있으니 굳이 쓸 필요는 없다.

 

 

✔️ declare 붙은 코드들은 js로 변환되지 않는다. ( 컴파일러에게 힌트를 주는 역할의 코드임 )

✔️ tsconfig.json - allowJs 옵션을 true로 켜두면 js파일도 타입지정이 알아서 implicit 하게 된다.

 

 

 

 

---

 

 

 

 

Ambient Module

 

 

 

🔻 Ambient Module : 전역으로 쓸 수 있는 파일

 

: ts파일에 입력한 변수와 타입은 전부 global 변수 취급받는다

= 타입스크립트는 import export 없이도 타입들을 다른 파일에서 가져다 쓸 수 있다.

 

// data.ts

type Age = number;
let 나이 : Age = 20;

// index.ts

console.log(나이+1) //가능
let people : Age = 30; //가능

 

 

🔻 import / export 키워드가 하나라도 있는 파일은 local module이 된다.

    그 파일에 있는 모든 변수는 export를 해줘야 다른파일에서 사용가능하다.

    ( ts파일이 다른 파일에 영향끼치는 것을 막고 싶으면 export 키워드를 강제로 추가하면 된다. export {} 빈것도 상관없음)

 

 

 ✔️ local module에서 전역으로 변수 만들고 싶으면 'declare global' 을 붙인다.

     ( 일종의 namespace 문법이다. global 이라는 이름으 namespace에 추가된다고 보면된다. )

declare global {
  type People = string;
}

 

 

 

---

 

 

 

 

d.ts

 

 

 

 - 타입정의만 따로 저장해놓고 import해서 쓴다.

 - 프로젝트에서 사용하는 타입을 정리해놓을 레퍼런스용으로 사용한다.

 - 파일명.d.ts. (definition의 d)

 - import export 없어도 기본적으로 local module 이다.

 

 

 

1. 타입정의만 넣을 수 있다.

   type ~ , interface ~ 

   함수는 중괄호 붙이기 불가능하고, parameter / return 타입만 지정가능하다.

export type Age = number;
export type multiply = (x :number ,y :number) => number
export interface Person { name : string }

 

 

2. 정의한 타입은 export 해서 쓴다.

    d.ts 파일은 ts파일이 아니어서 ambient module이 되지않으므로 export 해서 가져다 쓴다.

 

 

 

  ✔️  레퍼런스용으로 쓰려면 ts파일마다 d.ts 파일을 자동생성한다. (안생길경우 import문법 지우고 해봄)

        'declaration' : true 

         자동생성의 경우 따로 수정할 수 없다.

// tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "es6",
        "declaration": true,
    }
}

 

 

 ✔️ d.ts를 global module로 만들고 싶을 때

      : 프로젝트 내에 types/common 이런 폴더 두개 생성하고

       tsconfig.json 파일에 "typeRoots" : ["./types"] 옵션 추가한다. 

       ( [ ] 안에있는 폴더의 타입들은 global하게 이용가능 ) 

       ( d.ts 자동생성 기능 끄고 실행 )

{
    "compilerOptions": {
        "target": "es5",
        "module": "es6",
        "declaration": true,
        "typeRoots" : ["./types"]
    }
}

 

 

✔️ 유명한 JS 라이브러리들은 d.ts 파일을 제공한다.

 

    - 요즘은 npm으로 라이브러리 설치시 타입스크리트 타입정의된 버전 따로 찾아서 설치가능하다

       npm 설치하면 node_modules/@typees 경로에 타입이 설치된다.

       타입스크립트 컴파일러는 자동으로 여기 있는 타입파일을 참고해서 타입가져온다.

       ( "typeRoots" 옵션있는경우 node_modules/@types 폴더를 직접 추가하고 install진행. )

   

    - 타입부분만 따로 설치.

       ( ex: npm install --save @types/jquery 하면 폴더생성 )

 

https://github.com/DefinitelyTyped/DefinitelyTyped

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

 

 

 

 

---

 

 

 

 

implements

 

 

Object용 타입을 만들 때, 아직 어떤 속성이 들어올지 모르면 index signatures를 사용한다.

 

[ key : string ] : string

= 모든 string 타입 key의 value는 string이다.

interface StringOnly {
  [key: string]: string;
}

let obj: StringOnly = {
  name: "kim",
  age: 20,
  location: "seoul",
};

 

 

예외로 한 key값만 지정가능

interface StringOnly1 {
  [key: number]: string | number;
  2: number;
}

let obj1: StringOnly1 = {
  1: "kim",
  2: 20,
  3: "seoul",
};

 

 

 

---

 

 

 

Recursive Index Signatures

 

 

중첩된 object를 한 번에 타입지정 하고 싶을 때 

interface로 지정해도 되지만

 

font-size는 Mytype이랑 똑같이 생겼다고 타입을 만들어준다.

interface Mytype {
  "font-size": Mytype | number;
}

let obj9: Mytype = {
  "font-size": {
    "font-size": {
      "font-size": 14,
    },
  },
};