• 카테고리

    질문 & 답변
  • 세부 분야

    프로그래밍 언어

  • 해결 여부

    해결됨

안녕하세요. 제로초님 당신의 강의 매니아 입니다. typescript 모듈 관련 질문이 있어서요.

23.10.31 13:34 작성 조회수 163

0

정말 이부분이 궁금하고, 제가 chatgpt나 구글링 모든 방법을 다 동원해서 찾아 보았는데도, 궁금증 및 해결 방법을 찾을 수 가 없어서 혹시나 하는 마음에 질문을 남기게 되었습니다.

질문은 typescript 모듈 관련 질문 입니다.

 

react + typescript 개발을 하다가 깜빡하고 export를 빼먹은 적이 있었는데, 정말로 신기하게도 interface를 사용하고자 하는곳에서 import도 없어도 에러가 나지 않고 사용이 가능했습니다.

a.interface에서 타입 선언

b.component.tsx에서 사용

그래서 이부분이 궁금해서 꼭 이해하고 넘어가고 싶어서

ts 기본세팅을 해서 테스트 해보았고

//second.ts

//import meal없음
const lunch: meal = {
  menu: "ff",
};

//first.ts

interface meal {
  menu: string;
}
//export없음

not found meal 에러가 날줄 알았으나, 아무 이상 없이 작동함.

 

이거 굉장히 흥미롭다 생각해서 이번엔 nest.js에서 실험 해보았습니다.

//src/boards/boards.controller.ts

interface meal {
  menu: string;
}
//export없음

 

//src/boards/boards.service.ts

//import meal없음
const lunch: meal = {
  menu: "ff",
};

 

nest.js에서 tsconfig.ts

{
	"compilerOptions": {
		"module": "commonjs",
		"declaration": true,
		"removeComments": true,
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"allowSyntheticDefaultImports": true,
		"target": "ES2021",
		"sourceMap": true,
		"outDir": "./dist",
		"incremental": true,
		"strict": true,
		"skipLibCheck": true,
		"strictNullChecks": true,
		"strictBindCallApply": true,
		"forceConsistentCasingInFileNames": true,
		"noImplicitAny": true,
		"noFallthroughCasesInSwitch": true,
		"baseUrl": "./",
		"esModuleInterop": true, // 추가
		"paths": {
			"@/*": ["src/*"],
			"test/*": ["test/*"]
		}
	}
}

당연히 또 에러 없이 될줄 알았으나

에러발생: Cannot find name 'meal'.

 

??? 이거 저만 이해 안가나요.

 

여러번의 삽질의 끝에 또 한가지 흥미로운 사실을 알게 되었습니다.

 

nest.js에서는 src 밖에다가

//first.ts

//second.ts

만들어서 위와 똑같이 코드 작성하면 또 에러가 발생하지 않습니다.

 

정리하면,

우선적으로, 특정 경로 설정을 하지 않으면, 어디서든 사용이 가능한것 같습니다. (nestjs에서 src같은 설정)

  1. react-typescript에서 export없이 interface선언 import 없이 다른파일 export없는 interface 사용가능

  2. ts init로 typescript 프로젝트 처음부터 만들어서 export없이 interface선언 import 없이 다른파일 export없는 interface 사용가능

  3. nest.js에서 export없이 interface선언 import 없이 다른파일 export없는 interface 사용가능, 하지만 src 폴더 밖에서만 가능!

 

질문은 결론적으로 질문은

  1. 어떻게해서 이게 동작 하는건지가 너무 궁금 합니다.

  2. nestjs에서 src처럼 export import없이 사용 불가능하게 하려면 어떻게 해야할지...?

 

답변 1

답변을 작성해보세요.

0

  1. 일단 원래 ts에 export/import가 없으면 글로벌 스크립트가 됩니다. 다른 곳에서 타입 선언을 import 없이 가져올 수 있습니다. (참고로 강의에 있는 내용입니다)

  2. 이것도 마찬가지입니다.

  3. src 폴더 바깥에서도 돼야 합니다. 저는 지금 해보니 되네요.

rhkdtjd_12님의 프로필

rhkdtjd_12

질문자

2023.10.31

앗!!!!! 역시 갓로초 선생님 강의에 있는 내용이군요 ㅠㅠ 완강 하겠습니다.

답변 정말 감사합니다 :)

rhkdtjd_12님의 프로필

rhkdtjd_12

질문자

2023.10.31

근데 3.의 답글에서 src 폴더 바깥에서도 돼야 한다고 하셨는데, src 폴더 바깥에서는 되는데 src안에서는 안되는데 혹시 이건 왜그런건가용?

예를 들어
//src/boards/boards.controller.ts

interface meal {
  menu: string;
}
//export없음

//src/boards/boards.service.ts

//import meal없음
const lunch: meal = {
  menu: "ff",
};

에러발생: Cannot find name 'meal'.

에러가 발생 하더라고요.

 

//cats.controller.ts

image

//cats.service.ts

image

귀찮게 해드려 죄송합니다!!! 근데 너무 궁금해서요ㅠㅠ

interface가 있는 파일에 import/export가 없어야 합니다. 지금 interface 위 아래로 있잖아요. import/export가 있으면 스크립트가 아니라 모듈 파일이 되어서 명시적으로 import해야만 쓸 수 있습니다.

rhkdtjd_12님의 프로필

rhkdtjd_12

질문자

2023.10.31

와…. 무쳤다 당신은 천재입니까. 덕분에 이해가 팍팍 되었습니다. 나머지 강의 완강하고 복습까지 하겠습니다. 감사해요~