Suggestion: Type annotations and interfaces for function declarations
Currently in TypeScript, function declarations cannot be typed in the same way as function expressions, e.g. this function can implement the `React.FC` interface: interface TestProps { message: string } const Test: React.FC<TestProps> = ({ message }) => { return <div>{message}</div> } But this function can't, at least not directly: function Test({ message }: TestProps) { return <div>{message}</div> } This becomes more of an issue if you try to add properties to the function object: Test.defaultProps = { message: 'hi' } It seems that currently the only way to specify the type for the function object in the second example is to create a new variable: const AliasForTest: React.FC<TestProps> = Test AliasForTest.defaultProps = { message: 'hi' } This seems like kind of an ugly workaround, so it seems that the current idiom is to just prefer arrow functions for cases like this. But this leads to inconsistency on teams that generally prefer function declarations over const expressions for top-level functions. Personally I find it more readable to see the word "function" for top-level functions rather than seeing "const", which is generally already all over the place in the code. There is even an ESLint rule for teams that share my preference (although I don't think it's been ported to TSLint yet): https://eslint.org/docs/rules/func-style. In any case, I have seen others express similar views
Posted by mbrowne on Feb 20, 2018, 7:55 PM
Tags
Related issues
Raise real-world problems, find people facing the same issue, and discuss solutions.4,000 issues0 comments
github (Marketing)
Proposal: Set `debugShowCheckedModeBanner` Default to false
Angular Layout Migration Guides
sitemap.xml
Let’s Define CSS 4
Improve the indexability (SEO) of Flutter apps on the web
ALL twitch.tv issues
Terminating Tokens
Suggestion: Type annotations and interfaces for function declarations
Suggestion: Type annotations and interfaces for function declarations
Currently in TypeScript, function declarations cannot be typed in the same way as function expressions, e.g. this function can implement the `React.FC` interface: interface TestProps { message: string } const Test: React.FC<TestProps> = ({ message }) => { return <div>{message}</div> } But this function can't, at least not directly: function Test({ message }: TestProps) { return <div>{message}</div> } This becomes more of an issue if you try to add properties to the function object: Test.defaultProps = { message: 'hi' } It seems that currently the only way to specify the type for the function object in the second example is to create a new variable: const AliasForTest: React.FC<TestProps> = Test AliasForTest.defaultProps = { message: 'hi' } This seems like kind of an ugly workaround, so it seems that the current idiom is to just prefer arrow functions for cases like this. But this leads to inconsistency on teams that generally prefer function declarations over const expressions for top-level functions. Personally I find it more readable to see the word "function" for top-level functions rather than seeing "const", which is generally already all over the place in the code. There is even an ESLint rule for teams that share my preference (although I don't think it's been ported to TSLint yet): https://eslint.org/docs/rules/func-style. In any case, I have seen others express similar views
Comments (0)
No comments yet. Start the discussion.