TypeScript 주요 문법 및 개념에 대한 답변 모음

1. Typescript 에서 type alias vs interface, 어떤걸 주로 사용하시나요?

TypeScript에서 함수의 매개변수와 반환값 타입을 지정할 때, 주로 type alias를 사용하시나요, 아니면 interface를 사용하시나요?

답변

개인적으로 사용하는 기준입니다 외부 통신이나 혹은 변동가능성이 없고 성능이 중요한 부분에는 Type을 사용하구요 내부적으로 DTO, Command, Query 혹은 기타 변동 가능성이나 확장 가능성이 있는 부분에는 Interface를 사용합니다. 타입의 경우엔 타입 검사결과를 캐싱하고 인터페이스의 경우엔 연산 시점에 요소에 대한 검사가 진행된다고 알고 있어 성능의 경우 타입이 좋지만 기타 확장성이나 재선언 혹은 extends 등 interface 를 사용하였을 때 가져다주는 이점이 큼에 따라서 개인적으로는 보통 interface를 주로 사용합니다

2. typescript에서 useRef.current는 null 체크가 필수인가요?

useRef를 이용해서 focus를 하도록 하고 있는데 typescript에서 오류가 납니다. 아래 코드와 같습니다. 동작은 잘 하는데 코드의 밑줄이 신경쓰입니다.

답변

안녕하세요! 결론부터 말씀드리면, inputRef.current의 타입은 TextInput이라는 것이 확실시되어야 해요. focus는 null이 아니라 TextInput이라는 타입에 존재하는 메소드이기 때문입니다. (엄밀하게는 null 체크를 해야한다기보다 TextInput이라는 것이 확실시되어야 한다는 말이 정확해요. 왜냐하면 useRef 선언 시점에 null을 넣지 않고 string이나 number같은 타입을 넣어도 focus를 동작하게 할 수는 있거든요. 사실 아무도 그렇게 쓰지도 않고 별로 중요한 얘기도 아니라, 여기서는 그냥 넘어가겠습니다🙂) 따라서 아래와 같이 사용하시면 될 것 같아요. 1번) if문 사용 useEffect(() => { if (isRead && inputRef.current) { inputRef.current.focus(); } }, []); 2번) optional chaining 사용 useEffect(() => { if (isRead) { inputRef.current?.focus(); } }, []); 3번) Type Assertion(타입 단언) 사용 <- 이 부분이 맨 처음 말씀드린 내용인데, 이렇게 쓰는 게 별로 일반적이지는 않습니다. 1번 또는 2번 방법 중에서 골라 쓰시면 될 거 같아요! useEffect(() => { (inputRef.current as TextInput).focus(); }, []); 추가 설명드리면, 질문자님께서 만드신 코드의 if (isRead && inputRef && inputRef.current)에서 inputRef는 null 체크를 할 필요가 없습니다. 왜냐하면 inputRef에는 useRef 선언 당시 React.RefObject<TextInput>라는 타입의 object를 할당하기 때문이에요. inputRef의 타입: React.RefObject<TextInput> inputRef.current의 타입: TextInput 또는 null 혹시 이게 진짜인지 궁금하시면 아래 예시 코드와 같이 로그를 한 번 찍어보세요! import { useEffect, useRef } from "react"; const App = () => { const inputRef = useRef<HTMLInputElement>(null); console.log("실제 DOM에 마운트되기 전이에요."); console.log(inputRef); console.log(inputRef.current); useEffect(() => { console.log("실제 DOM에 마운트된 후에요."); console.log(inputRef); console.log(inputRef.current); }, []); return <input ref={inputRef} />; }; export default App; 아마 아래처럼 로그가 찍힐겁니다. 실제 DOM에 마운트되기 전이에요. { current: null } null 실제 DOM에 마운트된 후에요. { current: input } <input> inputRef는 마운트 전/후 모두 null인 적이 없고 언제나 current를 속성으로 가지고 있는 object네요! 조금이나마 도움이 되셨길 바라며, 혹시라도 더 궁금하신 점 있으시면 댓글 남겨주세요~

3. typescript 에서 d.ts 파일은 어떤 상황에서 사용해야 하나요 ?

JS 만 사용하다가 typescript 를 배우기 시작했는데 d.ts 라는 파일 용도 이해가 잘 안됩니다. 잘못 사용하면 타입 오류가 발생하는것 같아서 그냥 사용하지 않는게 더 좋을것 같은데 꼭 사용해야 하는 상황이 있는걸까요 ?

답변

d.ts를 작성하면 js로 작성된 파일도 타입을 읽어 올 수 있다는 장점이 있고 또 컴포넌트 내부에 타입을 정의하면 파일이 길어질 수 있고, 유틸처럼 범용으로 사용한 파일이 있는 경우 타입 파일들이 파편화 될텐데, 이를 한 곳에서 관리 할 수 있어요. 그리고 3rd party의 타입을 별도로 정해주고싶을 때도 d.ts를 작성했었습니다!

4. react, typescript에서 테스트코드를 작성하고 싶은데 뭘 쓰면 좋을까요? 선배님들 도와주세요...

안녕하세요 저는 프론트엔드 개발자 취업준비생입니다. 취업준비와 병행하며 포트폴리오용 웹사이트 제작하고 싶어서 팀에 합류했는데요! 프론트는 react와 typescript를 사용하는 게 확정이 됐고, 저 포함 프론트 팀원 3명 다 테스트코드 작성 경험이 없어서 이번에 도입해보려고 합니다. Q. 구글링을 해보니 가장 많이 나오는게 jest인 것 같은데 어떤 걸로 하는걸 추천하시나요?

답변

말씀하신 것처럼 jest를 추천합니다. Cypress도 많이 사용하는데 jest보다 기능이 많아서 처음 접하시면 조금 어려우실 수도 있을 것 같고 처음이시라면 jest로 진행해보시는 것을 추천합니다!

5. 타입스크립트 keyof typeof 는 뭔가요?

안녕하세요 코드를 보다가 type PackageTypes = keyof typeof Package; 라는 코드를 봤는데 여기서 keyof typeof는 뭔가요? PacakgeTypes에 마우스를 올려보면 "curated" | "drafted" | "single" 이런식으로 나오는데 뭔지 잘 모르겠네요.

답변

하나씩 풀어서보면 이해하시기 쉬울 것 같습니다. keyof typeof Package 일단 keyof 부터 보시면 object의 키 값을 읽어온다고 합니다. (https://www.typescriptlang.org/docs/handbook/2/keyof-types.html) 다음 typeof 는 해당 변수의 type을 뜻한다고 합니다. (https://www.typescriptlang.org/docs/handbook/2/typeof-types.html) 마지막 Package는 정보가 없지만 아마도 "curated", "drafted", "single"이라는 정보를 담고 있는 enum 이겠죠? enum Package { curated, drafted, single } 와 같은 형태로 선언됐을거라고 생각합니다. 다시 keyof typeof Package를 보시면 "Package의 타입의 키"를 뜻한다는 것을 알 수 있게 됩니다. 한가지 더 첨언하자면, enum이라고 추측한 이유는 타입스크립트 enum에 keyof를 사용하면 그냥 객체 형태에 사용하는 것처럼 동작하지 않는다고 공식 문서에 나와있습니다. enum의 키 값을 읽어오는 예시로 keyof typeof를 쓰고 있는 것을 알 수 있습니다. (https://www.typescriptlang.org/docs/handbook/enums.html#enums-at-compile-time)