VS Code에서 TypeScript 쓰다 보면 자동완성이 특정 속성 지정 이후 안 되는 문제

JavaScript TypeScript
1

TypeScript를 사용한지 얼마 되지 않았습니다. :baby_chick:

리액트 네이티브 개발하면서 VS Code에서 TS를 사용 중입니다. 그런데 VS Code에서 특정 값 지정 이후부터 해당 부분의 자동완성이 되지 않는 경우들이 있는데 이런 경험 없으신가요?

아래 처럼 잘 되다가…
image

특정 속성 noBorder를 지정한 후 부터는 해당 return 값(Options 타입)에 대한 자동완성이 동작하지 않습니다. (꼭 noBorder 뿐만 아니라 특정 속성들을 지정하고나면 이럽니다.)
image

위 예제는 react-native-navigation 의 Options라는 Type입니다. 단순화 해서 아래와 같이 만들어보면 이건 정상작동합니다. 단순히 VS Code의 자동완성 버그인지 아니면 Type 정의에 문제가 있는건지 궁금하네요.

export interface OptionsTopBar {
    /**
     * #### (iOS specific)
     * @default false
     */
    noBorder?: boolean;
    barStyle?: 'default' | 'black';
    searchBar?: boolean;
}
export interface Options {
    topBar?: OptionsTopBar;
}

class MyClass {
    static getOption():Options {
        return {
            topBar:{
                noBorder: false,

            }
        }
    }
}
function myFunction():Options {
    return {
        topBar: {
            noBorder: false,
            
        }
    };
}
2

어딘가 루프로 되어 있는게 아닌지 의심해 봅니다.
저는 오래쓰면 느려지긴 해도 안되는건 처음 봐요.

1개의 좋아요
3

뭔가 그런 것 같네요. 자동완성에서 뭔가 한계가 있는 것 같아요. 원인을 파해처 보려다가도 아직 TS 초보라 엄두가 안나요.

4

한계는 아니고 라이브러리가 타입정의를 잘못했을거 같아요.
타입 정의를 수정하거나 원하는 타입으로 casting해서 쓰세요ㅎㅎ

5

@types/react-native 와 react-native-navigation 의 TS 자동완성에서 동일한 현상이 있어서 뭔가 자동완성 구현의 문제인가 의심했어요.

자동완성 안되는거 상당히 신경쓰이니 일단 타입정의부터 한번 들여다 보면서 TS랑 더 친해져봐야겠어요. :grinning:

6

그런데 인터페이스가 I로 시작되질 않네요.
설정의 문제이긴 하지만 가급적 따라주는게 건강에 좋지 않을까 생각됩니다.
아님 그냥 예제라 저렇게 두신건지도.

7

@thomasJang 저건 react-native-navigation의 타입정의를 옮긴 거에요. TS의 Interface에 I를 붙이자 말자에 대해 여러 의견들이 있던데 저는 일단 안쓰고 있어요. :slight_smile: TS 초보이다보니 어떠한 판단에 의해 결정한건 아니고 제가 요즘 자주 들어다보는 타입정의(react-native, react-native-navigation)에서는 안 붙이고 있어서 그냥 따라 하고 있어요. 혹시 TS처음 접하실 때 도움이 되었던 자료 있으면 공유부탁합니다. :wink:

8

복잡해지면 어떤게 인터페이스인지 혼동이 오기 때문에 lint 컨벤션에서 I를 강제하고 있습니다.
그외에는 크게 강제하고 있는 요소는 없어요.