I recently started working with TypeScript. I must say I really appreciate it and it makes total sense to use it to develop and code more robust apps/websites. But there is some confusing part about the interface and type part. I have this Array of blog posts with nested objects like id, title, website, color etc. Now I am mapping through the array and assigning the interface Prop to its parent component.

I am now wondering if it's ok to combine interface with type or should it be reversed or only one used? And how about the naming confession?

import { motion } from 'framer-motion';

    import Link from 'next/link';
    
    // import { Project } from '@typings/propTypes';
    
    import SectionHeader from '@components/SectionHeader';
    
interface Project {
  id: string;
  title: string;
  website: string;
  color: {
    css: string;
  };
  logo: {
    url: string;
    alt?: string;
  };
}


    const Projects = ({ projectsList }: { projectsList: Project[] }) => (
      <>
        <SectionHeader title="Latest Projects" />
        <div className="card--grid grid grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[100px] sm:auto-rows-[120px] md:auto-rows-[200px]">
          {projectsList.map(({ id, logo, title, website, color }, index) => (
            <motion.div
              key={id}
              className="rounded-md"
              style={{ backgroundColor: `${color.css}` }}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true }}
              transition={{
                duration: 0.1,
                stiffness: 200,
                delay: index * 0.085,
                type: 'spring'
              }}
              variants={{
                hidden: { opacity: 0, scale: 0.6 },
                visible: { opacity: 1, scale: 1 }
              }}
            >
              <Link href={website}>
                <a
                  target="_blank"
                  className="flex flex-col items-center justify-center w-full h-full"
                >
                  <div className="flex flex-col items-center justify-center relative w-full h-full max-w-[64px] md:max-w-[100px] lg:max-w-[120px]">
                    <picture>
                      <source srcSet={logo.url} type="image/webp" />
                      <img
                        className="object-contain w-full h-full"
                        title={title}
                        src={logo.url}
                        alt={logo.alt}
                      />
                    </picture>
                  </div>
                </a>
              </Link>
            </motion.div>
          ))}
        </div>
      </>
    );
    
    export default Projects;

it's pretty confusing still that there is minimal difference between type and interface. What do some experienced developers who use TS think and would you write it down or do it better?

CodePudding user response：

There is nothing wrong with using interface over type or type over interface or combining both. Types and interfaces are very similar except a few differences. It is just a matter of taste. Though I prefer interface over type.

Type aliases and interfaces are very similar, and in many cases you can choose between them freely. Almost all features of an interface are available in type. The key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.

Also, If you looking from performance perspective while intersecting 'types', interfaces are preferable as noted here.