#typescript

TypeScript 개발자라면, tsconfig.json이 개발자들에게 얼마나 중요한지 아시죠? TypeScript로 개발하는 대부분의 프로젝트에서 tsconfig.json은 프로젝트의 설정을 정의하고 TypeScript 컴파일러가 동작하는 방식을 결정하는 핵심 파일입니다. 이 글에서는 2ality 블로그에서 다룬 내용을 기반으로 tsconfig.json의 주요 개념과 활용법을 살펴보겠습니다. TypeScript를 사용 중이거나 도입을 고려 중인 분들에게 도움이 되고자 기본 개념부터 예제까지 정리해보았습니다. tsconfig.json이란 무엇인가? tsconfig.json은 TypeScript 프로젝트의 컴파일러 옵션과 파일을 정의하는 구성 파일입니다. 이 파일을 통해 TypeScript 컴파일러인 tsc가 어떤 파일을 컴파일할지, 어떤 규칙을 적용할지, 어떤 출력을 생성할지를 결정할 수 있어요. 기본 구조 다음은 간단한 tsconfig.json 예제입니다. { "compilerOptions": { "target": "ES6", "module": "CommonJS", "strict": true, "outDir": "./dist" }, "include": ["src/**/*"], "exclude": ["node_modules", "dist"] } 설명 compilerOptions: 컴파일러의 동작 방식을 설정합니다. target: 컴파일된 JavaScript의 ECMAScript 버전을 설정합니다. module: 모듈 시스템을 정의합니다. strict: TypeScript의 엄격 모드를 활성화합니다. outDir: 컴파일된 파일이 저장될 디렉터리를 지정합니다. include: 컴파일 대상이 되는 파일이나 디렉터리를 지정합니다. exclude: 컴파일에서 제외할 파일이나 디렉터리를 지정합니다. 주요 설정 옵션 compilerOptions에서 중요한 설정들 아래는 자주 사용되는 주요 설정들입니다. target JavaScript로 트랜스파일링될 ECMAScript 버전을 설정합니다. 예: "ES5", "ES6", "ES2020" module 모듈 시스템을 정의합니다. 예: "CommonJS", "ESNext", "AMD" Tip: Node.js 환경에서는 CommonJS를, 최신 브라우저에서는 ESNext를 주로 사용합니다. strict TypeScript의 모든 엄격 모드를 활성화합니다. 엄격 모드가 활성화되면 문법 검사를 강력하게 해줍니다. paths와 baseUrl 프로젝트 내에서 모듈을 더 간단히 import할 수 있도록 도와줍니다. { "compilerOptions": { "baseUrl": "./", "paths": { "@components/*": ["src/components/*"] } } } 위 설정으로 다음과 같은 단축 import가 가능해집니다. import { Button } from "@components/Button"; include와 exclude include: 특정 파일이나 디렉터리만 컴파일 대상으로 지정합니다. 예: "src/**/*"는 src 폴더의 모든 파일을 포함합니다. exclude: 특정 파일이나 디렉터리를 컴파일에서 제외합니다. 예: "node_modules"를 제외하여 불필요한 파일을 제외합니다. 실전 예제: React 프로젝트에서 tsconfig.json 설정하기 React 프로젝트에서는 다음과 같은 설정이 일반적입니다. { "compilerOptions": { "target": "ES6", "module": "ESNext", "jsx": "react-jsx", "strict": true, "baseUrl": "./", "paths": { "@hooks/*": ["src/hooks/*"], "@utils/*": ["src/utils/*"] }, "outDir": "./build", "esModuleInterop": true }, "include": ["src/**/*"], "exclude": ["node_modules", "build"] } 주요 포인트 jsx: React의 JSX 구문을 지원하도록 설정합니다. esModuleInterop: CommonJS 모듈과의 호환성을 향상시킵니다. paths: 모듈 경로를 간단히 설정할 수 있습니다. 알아두면 좋은 팁 tsc --init 명령어 사용 TypeScript 프로젝트에서 기본 tsconfig.json 파일을 생성하려면 tsc --init 명령어를 사용하세요. 필요한 기본 옵션들이 자동으로 생성됩니다. VS Code와의 통합 VS Code는 tsconfig.json을 자동으로 인식해 코드 작성과 디버깅을 도와줍니다. 타입 추론과 IntelliSense를 활용해 개발 생산성을 높일 수 있어요. 점진적 전환 기존 JavaScript 프로젝트를 TypeScript로 전환할 때는 allowJs 옵션을 활성화해 점진적으로 파일을 변환하는 것이 좋습니다. 결론 tsconfig.json은 TypeScript 프로젝트에서 꼭 필요한 설정 파일입니다. 올바르게 설정하면 프로젝트의 가독성과 유지보수성이 크게 향상됩니다. 또한, 다양한 옵션을 적절히 활용하면 팀 협업과 개발 속도를 모두 개선할 수 있어요. TypeScript를 도입하거나 최적화하고 싶다면, 이번 기회에 tsconfig.json을 꼼꼼히 살펴보세요. 요컨대, tsconfig.json은 단순히 설정 파일 그 이상입니다. 개발 환경을 최적화하고 TypeScript의 강력한 기능을 활용하는 데 핵심적인 역할을 하니까요. 이번 기회에 을 좀 더 이해하는 기회가 되었길 바랍니다✨

import DateRangePicker from "@wojtekmaj/react-daterange-picker"; import { useDispatch } from "react-redux"; import { dateFetch } from "components/feature/FetchSlice"; import styled from "styled-components"; type ValuePiece = Date | null; type Value = ValuePiece | [ValuePiece, ValuePiece]; export default function CustomCalendar() { const dispatch = useDispatch(); const [value, onChange] = useState<Value>([new Date(), new Date()]); return ( <CalendarBox> <Calendar>조회 기간</Calendar> <StlyedDateRangePicker onChange={onChange} value={value} onCalendarClose={() => { dispatch( dateFetch({ startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), }) ); console.log(value); }} /> </CalendarBox> ); } StlyedDateRangePicker는 styled component로 만든 DateRangePicker 라이브러리 컴포넌트입니다. DateRangePicker 에서 날짜 2개를 선택하면 value라는 배열에 Date 객체 2개가 들어갑니다. 그리고 onCalendarClose 함수가 동작하면서 redux로 만들어놓은 startDate, endDate 객체에 각각 date를 toISOString() 처리한 값이 할당되는 로직입니다. 날짜를 선택하기 전에는 value={value}의 value 배열요소인 Date객체 값이 null 값이니까 type ValuePiece = Date | null; 타입지정을 해줬습니다. startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), 근데 위 코드의 value[0], value[1] 에러가 나더라구요. 'value' is possibly 'null'.ts(18047) Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'Date | [ValuePiece, ValuePiece]'. Property '0' does not exist on type 'Date | [ValuePiece, ValuePiece]'. null 값일 수도 있다길래 옵셔널체이닝을 줬는데 여전히 에러가 발생합니다.. 해결방법을 도무지 모르겠네요.. 도와주시면 진심으로 감사하겠습니다ㅠㅠㅠ