TypeScript Type Checking for React Props: Embracing Static Types

Building Solid Component Interactions with Type Safety

Typescript the superset of Javascript.
No more lazy variable declaration
(╥﹏╥)

From dynamic typing to static typing I was shocked ⚡ when I started learning typescript while learning next js. 🧑🏻‍💻 It went wild because you need to declare the data type for each props you will be passing. 😵

I know this is beneficial to avoid future crazy errors during runtime but hell yeah javascript is already hard to understand well typescript made it harder as fvck.
(˶˃ᆺ˂˶)

TypeScript must be compiled to JavaScript to run in web browsers 🌐

still javascript but stronger and harder ╮ (. ❛ ᴗ ❛.) ╭

Let's break this code below 👇 and
understand why props is not enough
⁽⁽(੭ꐦ •̀Д•́ )੭*⁾⁾

Copy Code

1
2import React from "react";
3import { useTheme } from "next-themes";
4import SyntaxHighlighter from 'react-syntax-highlighter';
5import { atomOneDark, atomOneLight} from "react-syntax-highlighter/dist/esm/styles/hljs";
6
7interface CodeProps{
8    codeString: string
9}
10
11const Code = ({
12    codeString
13}:CodeProps) => {
14
15    const {theme} = useTheme()
16
17    let style  = theme === "dark" ? atomOneDark : atomOneLight;
18
19    return ( 
20        <div className="rounded-xl w-[50%] p-3 text-sm">
21            <SyntaxHighlighter
22            language="typescript"
23            showLineNumbers
24            style={style}
25            wrapLines={true}
26        >
27            {codeString}
28            </SyntaxHighlighter>
29        </div>
30     );
31}
32 
33export default Code;
34

TypeScript is a strongly typed programming language

This will not work basically:

1
2const Code = ({...props}) => {
3    return ( 
4        <div>
5            {props}
6        </div>
7    );
8}
9
10export default Code;
11

We need to declare the type of the props that we will be passing:

1
2interface CodeProps{
3    codeString: string
4}
5

Interfaces define the structure of an object,
specifying the properties it can have and their expected types.
In the example the data type is string for codeString.

1
2interface CodeProps{
3    codeString: string
4}
5
6//---------------------//
7
8const Code = ({
9    codeString
10}:CodeProps)
11

Now we define the component const Code then
we uses object destructuring
to extract a specific prop { codeString } from the component's props object.
:CodeProps adds a type annotation to ensure that the destructured prop codeString adheres to the CodeProps interface defined earlier.
This TypeScript feature helps with type safety and code clarity.

1
2return ( 
3    <div>
4        {codeString}
5    </div>
6 );
7}
8

This line defines the component's body.
The codeString value interpolated within curly braces ({}) will render the provided code string within the div.

For Example

We now will use the component Code

1
2import Code from "./somewhere/code"
3
4const UseCode = () => {
5
6    // code sample
7    const codeString = `
8        const Code = ({...props}) => {
9            return ( 
10                <div>
11                    {props}
12                </div>
13            );
14        }
15        
16        export default Code;
17    `;
18
19    return(
20        <div>
21            <Code codeString={codeString}/>  
22        </div>
23    )
24}
25