TypeScript_Project3:Type Definition

▶ type definition : 타입스크릅트에게 몇몇 자바스크립트 코드의 타입을 설명해주기 위해 사용

 

▶ lib: lib는 합쳐진 라이브러리 정의 파일(declaration file)을 특정해주는 역할을 함.: 

mouse hover시, 관련문서 확인 가능

See more 클릭 시, 확인가능

 

• 타입스크립트는 몇몇 자바스크립트 코드와 api의 타입을 설명할 수 있도록 해줌

▶ 우리는 타입스크립트와 다양한 것들의 타입에 대해 소통해야함

• 문제점 : 대부분의 경우 우리는 외부 패키지나 프레임워크 라이브러리를 사용하게되는데, 그것들은 타입스크립트가 아닌 자바스크립트로 만들어졌음
  • 자바스크립트로 만들어진 라이브러리를 타입스크립트 프로젝트에 사용하기 위해선 타입의 정의를 함으로써 타입스크립트에게 알려줘야함
  • 이때 사용되는 것이 declartaion file

 

▶ Example

• myPackage.js생성
  • index파일로이동, myPackage.js가 node의 모듈인 것처럼 표기
  • (누가 github와 같은 공유저장소에 올려놓은 js라고 가정!)

타입스크립트는 해당 코드가 무엇인지 알길이 없음

• strict:true : 타입스크립트로써 타입에 관련되어 보호하기 위하여 strict모드 true설정

tsconfig.json -> strict:true 속성추가

strict모드이기에 오류(myPackage가 무엇인지 정의X)

• decoration file :  자바스크립트 코드의 모양을 타입스크립트에 설명해주는 파일
  • 타입스크립트에게 localStorage와 document의 모양에 대해 설명하기 위한파일

선언되지 않았음을 의미함

• myPackage.d.ts : myPackage의 정의파일
  • 타입스크립트에게 구현이 아닌 타입에 대해서만 설명하는 파일!
  • ctrl+모듈 누르면 .d.ts파일로 이동가능하고, 이 파일은 타입스크립트에게 해당 모듈의 모양을 설명하기 위해 작성한 것임

정의 파일 생성

오류가 사라진 것 확인

 

 

• 대부분 npm이나 git과 같은 곳에서 받아온 패키지를 사용할 것이기에 알아야 하는 사항
• 그리고 그 패키지들은 대부분 자바스크립트로 구현되었을 것
• 우리는 타입스크립트에게 패키지가 어떻게 생겼고, 어떤 함수랑 다른것들이 있는지 설명(선언)해줘야 타입스크립트가 안에 뭐가 들어있는지를 확인하고 우리를 보호해줄 수 있음 -> 이것이 declaration file임