I am completely new to typescript.
Currently, I'm working on a project that has a lot of pre-configured react components in JavaScript files (.js). My task now is to convert everything to TypeScript (.tsx) without triggering any ESLint errors. Unfortunately, I can't use the non-null assertion (!) due to my ESLint configuration.
My current challenge is converting a portal component (createPortal) to TypeScript, and I'm encountering various errors based on the types I define.
This is the code snippet:
import { useRef, useEffect, useState } from "react";
import { createPortal } from "react-dom";
import React from "react";
import { useCallback } from "react";
type ClientOnlyPortalProps = {
children: React.ReactNode;
// Is there a type for CSS id?
selector: string;
};
export default React.memo(function ClientOnlyPortal({
children,
selector,
}: ClientOnlyPortalProps) {
const ref = useRef<Element | DocumentFragment | null>(null);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//1. not sure if this is correct^
const [mounted, setMounted] = useState(false);
if (ref == null) {
}
useEffect(
useCallback(() => {
ref.current = document.querySelector(selector);
setMounted(true);
^^^^
//2. ref.current has a ts error if I remove null from #1
console.log("ClientOnlyPortal useEffect fired");
}, [selector])
);
return mounted ? createPortal(children, ref.current) : null;
^^^^^^^^^^^
//3. This error is always here
});
- If I remove null from here, then I get an error @ #2.
This is potential error @ #2:
Cannot assign to 'current' because it is a read-only property.ts(2540)
- This error is always here:
Argument of type 'Element | DocumentFragment | null' is not assignable to parameter of type 'Element | DocumentFragment'.
Type 'null' is not assignable to type 'Element | DocumentFragment'.ts(2345)
Any assistance would be highly appreciated!
Hoping that by converting all my JavaScript components into TypeScript, I will significantly improve my skills in TypeScript. In need of a TypeScript tutor :/
.................................................................