r5n-dev / vscode-react-javascript-snippets

Extension for React/Javascript snippets with search supporting ES7+ and babel features
MIT License
1.73k stars 441 forks source link

New ts rn snippet with named props interface #139

Closed nlindroos closed 4 years ago

nlindroos commented 4 years ago

Hi,

Thanks for a great extension. I didn't find any contributing guidelines, so I hope it's okay to create a PR. Let me know if I've missed something.

tsrnfi creates the following snippet:

import React from 'react'
import { View } from 'react-native'

interface MyComponentProps {

}

const MyComponent: React.FunctionComponent<MyComponentProps> = (props) => {
    return (
        <View>

        </View>
    )
}

export default MyComponent
Screenshot 2020-06-26 at 11 41 07

This snippet differs from the existing TypeScript snippets by using the React.FunctionComponent generic interface.

I'd suggest improving the types of all TypeScript snippets by actually typing the constant that holds the React component, as has been done in this PR, not simply the props. Even the types of props is more correct when typed this way, since e.g. props.children is automatically typed by the React.FunctionComponent generic.