오늘 내 프로젝트에서 th무th 한 UI 변환을 위해 headless UI 라이브러리를 implement 받았어. 그리고 라이브러리 안이 어떻게 생겼는지 구경해봤지.
근데 라이브러리에서 declare라는 걸 보게 되어서 찾아봤지.
💎"declare"
보통 어떤 object나 variable 등을 선언할 때 var, let, const 를 쓰잖아. 근데 이 라이브러리에서는 declare를 사용하더라. 예시 코드를 보여줄꼐.
declare type ButtonProps = 'id' | 'type' | 'disabled' | 'onKeyDown' | 'onClick'; 그래서 이걸 찾아봤지. 헿
🎯decalre란
declare은 compiler에게 "얘는 이미 존재하는 칭구야. 그러니까 다른 코드에서 참조될 수 있어. 그리고 Javascript로 컴파일 될 필요가 없어."라고 알려주는 keyword래.
🎯사용법
옛날 ver.
declare const foo = { doSomething: () => number }최근 ver.
declare const goo : { doSomething: () => number }🎯언제 사용해?
Javascript로만 만들어진 라이브러리 등을 사용할 때, Typescript만 가지고 있는 문법같은게 있잖아.
예를 들어서 type myType = "type1" | "type2"; 와 같은 거 말이야.
그럴 때, compiler한테 이 Typscript 코드는 Javascript로 변환 할 필요가 없다고 알려주는 역할을 해.
참고로 Typescript는 다른 언어랑은 다르게 컴파일러가 Typescript 코드를 받았을 때, 바이트코드가 아닌 Javascript 코드로 변환해 줘. 그럼 다시 Javascript를 바이트코드로 변환해주는 과정을 거치게 돼.
🎯번외: Ampersand(&)
위의 예시 중 최신 버전 코드인 goo를 선언할 때, 아래와 같이 할수 도 있어.
declare const goo : { (doSomething: () => number) & (<myType>) }🙏참고 사이트
😉stackoverflow
https://stackoverflow.com/questions/43335962/purpose-of-declare-keyword-in-typescript
