Convert existing components to TypeScript

src/components/header/index.js → src/components/header/index.tsx

@@ -12,7 +12,12 @@ import 'preact-material-components/List/style.css';
 import 'preact-material-components/Toolbar/style.css';
 // import style from './style';
 
-export default class Header extends Component {
+interface State {
+	darkThemeEnabled: any;
+}
+export default class Header extends Component<{}, State> {
+	dialog: any;
+	drawer: any;
 	closeDrawer() {
 		this.drawer.MDComponent.open = false;
 		this.state = {

src/routes/home/index.js → src/routes/home/index.tsx

@@ -2,9 +2,9 @@ import { h, Component } from 'preact';
 import Card from 'preact-material-components/Card';
 import 'preact-material-components/Card/style.css';
 import 'preact-material-components/Button/style.css';
-import style from './style';
+import * as style from './style.css';
 
-export default class Home extends Component {
+export default class Home extends Component<{}, {}> {
 	render() {
 		return (
 			<div class={style.home}>

src/routes/home/style.css.d.ts

@@ -0,0 +1 @@
+export const home: string;

src/routes/profile/index.js → src/routes/profile/index.tsx

@@ -1,9 +1,18 @@
 import { h, Component } from 'preact';
 import Button from 'preact-material-components/Button';
 import 'preact-material-components/Button/style.css';
-import style from './style';
+import * as style from './style.css';
 
-export default class Profile extends Component {
+interface Props {
+	user?: any;
+	path: any;
+}
+interface State {
+	time: any;
+	count: any;
+}
+export default class Profile extends Component<Props, State> {
+	timer: any;
 	state = {
 		time: Date.now(),
 		count: 10
@@ -30,7 +39,8 @@ export default class Profile extends Component {
 	};
 
 	// Note: `user` comes from the URL, courtesy of our router
-	render({ user }, { time, count }) {
+	render(props, { time, count }) {
+		const user = props.user;
 		return (
 			<div class={style.profile}>
 				<h1>Profile: {user}</h1>

src/routes/profile/style.css.d.ts

@@ -0,0 +1 @@
+export const profile: string;