Add types for Mvc4 sample

Author: dustinsoftware

src/React.Sample.Mvc4/Content/Sample.tsx

@@ -7,23 +7,36 @@
  *  of patent rights can be found in the PATENTS file in the same directory.
  */
 
-type Foo = {}
+type AuthorProps = {
+	Name: string;
+	GithubUsername: string;
+};
 
-function CommentsBox(props) {
+type CommentProps = {
+	Author: AuthorProps;
+	Text: string;
+};
+
+type CommentsBoxProps = {
+	initialComments: CommentProps[];
+	page: number;
+};
+
+function CommentsBox(props: CommentsBoxProps) {
 	let [state, updateState] = React.useState({
 		comments: props.initialComments,
 		page: props.page,
 		hasMore: true,
-		loadingMore: false
+		loadingMore: false,
 	});
 
-	function loadMoreClicked(evt) {
+	function loadMoreClicked(evt: { preventDefault: () => void }) {
 		let nextPage = state.page + 1;
 		let comments = state.comments;
 		updateState(prevState => ({
 			...prevState,
 			page: nextPage,
-			loadingMore: true
+			loadingMore: true,
 		}));
 
 		let url = '/comments/page-' + (state.page + 1);
@@ -37,15 +50,15 @@ function CommentsBox(props) {
 				...prevState,
 				comments: comments.concat(data.comments),
 				hasMore: data.hasMore,
-				loadingMore: false
+				loadingMore: false,
 			}));
 		};
 		xhr.send();
 		evt.preventDefault();
 	}
 
-	let commentNodes = state.comments.map(comment => (
-		<Comment author={comment.Author}>{comment.Text}</Comment>
+	let commentNodes = state.comments.map((comment: CommentProps) => (
+		<CommentRow author={comment.Author}>{comment.Text}</CommentRow>
 	));
 
 	function renderMoreLink() {
@@ -72,9 +85,9 @@ function CommentsBox(props) {
 	);
 }
 
-class Comment extends React.Component {
+class CommentRow extends React.Component<{ author: AuthorProps }> {
 	static propTypes = {
-		author: PropTypes.object.isRequired
+		author: PropTypes.object.isRequired,
 	};
 
 	render() {
@@ -89,9 +102,9 @@ class Comment extends React.Component {
 	}
 }
 
-class Avatar extends React.Component {
+class Avatar extends React.Component<{ author: AuthorProps }> {
 	static propTypes = {
-		author: PropTypes.object.isRequired
+		author: PropTypes.object.isRequired,
 	};
 
 	render() {

src/React.Sample.Mvc4/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "React.Sample.Mvc4",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^16.8.12",
+    "@types/react-dom": "^16.8.3",
+    "@types/reactstrap": "^7.1.3",
+    "typescript": "^3.4.3"
+  }
+}

src/React.Sample.Mvc4/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "module": "commonjs",
+    "target": "es6",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "noEmit": true,
+    "types": ["./types"],
+    "lib": ["es2015", "dom"]
+  },
+  "include": ["./Content/**/*"]
+}

src/React.Sample.Mvc4/types/index.d.ts

@@ -0,0 +1,27 @@
+import {
+	Component as _Component,
+	useState as _useState,
+	Dispatch,
+	SetStateAction,
+} from 'react';
+
+// Globally available modules must be declared here
+// Copy type definitions from @types/react/index.d.ts, because namespaces can't be re-exported
+
+declare global {
+	namespace React {
+		function useState<S>(
+			initialState: S | (() => S),
+		): [S, Dispatch<SetStateAction<S>>];
+		function useState<S = undefined>(): [
+			S | undefined,
+			Dispatch<SetStateAction<S | undefined>>
+		];
+		interface Component<P = {}, S = {}, SS = any>
+			extends ComponentLifecycle<P, S, SS> {}
+	}
+	const Reactstrap: any;
+	const PropTypes: any;
+}
+
+export const test = 1;