TS integration WIP

global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+	const content: { [className: string]: string };
+	export default content;
+}

package.json

@@ -105,7 +105,8 @@
     "stylelint-prettier": "^3.0.0",
     "stylelint-webpack-plugin": "^4.1.0",
     "terser-webpack-plugin": "^5.3.7",
-    "typescript": "^5.0.2",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.1.6",
     "webpack": "^5.76.2",
     "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^5.0.1",

src/Header/SkipLink/SkipLink.jsx → src/Header/SkipLink/SkipLink.tsx

@@ -1,9 +1,13 @@
 import React from "react";
-import PropTypes from "prop-types";
 import styles from "./SkipLink.module.scss";
 
-const SkipLink = (props) => {
-	const handleClick = (e) => {
+interface SkipLinkProps {
+	to: string;
+	children: React.ReactNode;
+}
+
+const SkipLink = (props: SkipLinkProps) => {
+	const handleClick = (e: React.MouseEvent) => {
 		const href = e.currentTarget.getAttribute("href");
 
 		if (href && href.indexOf("#") === 0) {
@@ -27,13 +31,4 @@ const SkipLink = (props) => {
 	);
 };
 
-//TODO Convert proptypes to typescript
-SkipLink.propTypes = {
-	to: PropTypes.string.isRequired,
-	children: PropTypes.oneOfType([
-		PropTypes.arrayOf(PropTypes.node),
-		PropTypes.node,
-	]).isRequired,
-};
-
 export default SkipLink;

tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node"
+  }
+}

webpack.config.js

@@ -37,6 +37,14 @@ module.exports = function (env, argv) {
 
 		module: {
 			rules: [
+				{
+					test: /\.tsx?$/,
+					exclude: /node_modules/,
+					use: "ts-loader",
+					resolve: {
+						extensions: [".tsx", ".ts", ".js"],
+					},
+				},
 				{
 					test: /\.jsx?$/,
 					enforce: "pre",