⭐️ 타입 모듈화
타입스크립트의 모듈이라는 개념은 ES6+의 export, import를 사용하는 Modules 개념과 같다.
✅ 실제로 서비스를 구현할 때 코드들이 많아지거나 특정 타입을 여러개의 파일에서 나누어 쓰게될 경우에는 한 곳에서 관리해서 사용하는 것이 가독성,유지보수 측면에서 효율적이다.
모듈화의 필요성
파일마다 자바스크립트의 고유한 영역이 나누어지는게 아니라서, 이런 부분들이 실제로 html파일을 로딩하더라고 변수의 유효범위가 분리가 되어있지 않기 때문에 변수가 중복되어 에러가 발생하거나 기타 예기치못한 상황들이 발생할 수 있었다. 그런 부분을 해결하기 위해 모듈화가 필요했다.
읽어보자!
Export
👉 ES6의 export와 같은 방식으로 변수, 함수, 타입, 인터페이스 등에 붙여 사용한다.
Import
👉 ES6의 import와 동일한 방식으로 사용한다.
기타 나머지에 대한 것들은 ... Go 👉 타입스크립트 핸드북
🌈 JS to TS
✅ JS 코드에 TS를 적용할 때 주의해야 할 점
- 기능적인 변경은 절대 하지 않을 것
- 테스트 커버리지가 낮을 땐 함부로 타입스크립트를 적용하지 않을 것
- 처음부터 타입을 엄격하게 적용하지 않을 것 (점진적으로 strict 레벨을 증가)
✅ JS 프로젝트에 TS 적용하는 절차
-
1️⃣ 타입스크립트 환경 설정 및 ts 파일로 변환
-
2️⃣ any 타입 선언
-
3️⃣ any 타입을 더 적절한 타입으로 변경
✅ TS 프로젝트 환경 구성
-
1️⃣ 프로젝트 생성 후 NPM 초기화 명령어로 package.json 파일을 생성
-
2️⃣ 프로젝트 폴더에서 npm i typescript -D로 타입스크립트 라이브러리를 설치
-
3️⃣ 타입스크립트 설정 파일 tsconfig.json을 생성하고 기본 값을 추가
{
"compilerOptions": {
"allowJs": true,
"target": "ES5",
"outDir": "./dist",
"moduleResolution": "Node",
"lib": ["ES2015", "DOM", "DOM.Iterable"]
},
"include": ["./src/**/*"],
"exclude": ["node_modules", "dist"]
}-
4️⃣ 서비스 코드가 포함된 자바스크립트 파일을 타입스크립트 파일로 변환
-
5️⃣ 타입스크립트 컴파일 명령어 tsc로 타입스크립트 파일을 자바스크립트 파일로 변환
✅ 엄격하지 않은 타입 환경(loose type)에서 프로젝트 돌려보기
- 프로젝트에 테스트 코드가 있다면 테스트 코드가 통과하는지 먼저 확인
- 프로젝트의 js 파일을 모두 ts 파일로 변경
- 타입스크립트 컴파일 에러가 나는 것 위주로만 먼저 에러가 나지 않게 수정
- 여기서, 기능을 사소하게라도 변경하지 않도록 주의
- 테스트 코드가 성공하는지 확인
✅ 명시적인 any 선언하기
- 프로젝트 테스트 코드가 통과하는지 확인
- 타입스크립트 설정 파일에 noImplicitAny: true를 추가
- 가능한 타입을 적용할 수 있는 모든 곳에 타입을 적용
- 라이브러리를 쓰는 경우 DefinitelyTyped에서 @types 관련 라이브러리를 찾아 설치
- 만약, 타입을 정하기 어려운 곳이 있으면 명시적으로라도 any를 선언
- 테스트 코드가 통과하는지 확인
✅ strict 모드 설정하기
- 타입스크립트 설정 파일에 아래 설정을 추가
{
"strict": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
}- any로 되어 있는 타입을 최대한 더 적절한 타입으로 변환
- as와 같은 키워드를 최대한 사용하지 않도록 고민해서 변경
참조 및 참고하기 좋은 사이트
