TypeScript IDE Intellisense for React Native

이 포스트는 TypeScript로 React Native 개발을 할 때 Intellisense 작동을 원활히 하기 위한 팁을 모은 포스트이다.
나는 IDE로 VSCode 사용하고 있기 때문에 이 포스트도 VSCode를 기준으로 작성했다.

Styled Component styled.TextInput로 만든 ref에 대한 Intellisense

문제

React Native의 컴포넌트인 TextInput은 유저와 인터렉션 할 수 있는(입력 작업) 컴포넌트이다보니, 해당 DOM 노드에 직접 접근하기 위해 styled.TextInput에 property ref를 할당해야 할 때가 있다.

그러나 Styled Component v6.0.7 기준, styled.TextInput에 대한 ref에 할당하려는 변수를 useRef로 생성할 때 제네릭 타입을 TextInput으로 넣으면 Intellisense가 작동하지 않는다.
사실 React Native의 TextInput과 styled.TextInput은 같은 역할을 함에도 불구하고 말이다. 그래도 실행 시 작동은 한다. 다만 빨간줄이 그어져서 보기 불편하다.

해결

• Styled Component로 작성한 styled.TextInput을 React Native의 컴포넌트 TextInput으로 타입 캐스팅준다
• useRef로 ref를 생성할 때 useRef의 제네릭 타입에 React Native의 컴포넌트 TextInput 타입을 지정한다.

import React from 'react';
import styled from 'styled-components/native';

// Types
import type { TextInput } from 'react-native';

// Styled Components
export const StViewContainer = styled.View``;
export const StText = styled.Text``;
export const StTextInput = styled.TextInput`` as typeof TextInput;  // 타입 캐스팅

// Component
// 회원가입을 위해 이메일과 비밀번호를 입력받는다.
const Join = () => {
  const emailOnSubmitEditing = () => {
    passwordInputRef.current?.focus();
  };
  const passwordInputRef = React.useRef<TextInput>(null);  // useRef에 제네릭 타입으로 TextInput을 지정한다.

  return (
    <StViewContainer>
      <StTextInput
        placeholder="Email"
        keyboardType="email-address"
        autoCapitalize="none"
        autoCorrect={false}
        returnKeyType="next"
        value={email}
        onChangeText={(text) => setEmail(text)}
        onSubmitEditing={emailOnSubmitEditing}
      ></StTextInput>
      <StTextInput
        ref={passwordInputRef}  // ref의 Intellisense가 정상 작동한다.
        placeholder="Password"
        secureTextEntry
        value={password}
        returnKeyType="done"
        onChangeText={(text) => setPassword(text)}
      ></StTextInput>
    </StViewContainer>
  );
};