Cookie Consent by Free Privacy Policy Generator 📌 TS: Types vs. Interfaces


✅ TS: Types vs. Interfaces


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

A few days ago, we had a lively chat at work about how to type a package we're working on.

In the middle of our discussion, someone threw out there:

"Interface and type, they're basically the same, right?"

I was pretty taken aback! We ended up debating this a bit, and my colleague explained he meant that for a React app, it wouldn’t really matter whether we used types or interfaces for props or defining business models.

But actually, there are some important differences to keep in mind:

Type Aliases are super versatile.

You can use them for a bunch of different things like combining types, or defining arrays and tuples. No chance to implement that with interfaces:

type SomeType = 'a' | 'b' | string;
type Pair = [number, number];
type NamedVariable = (Input | Output) & { name: string };

Declaration Merging with Interfaces

One cool thing about interfaces is that you can add more details to them later through something called declaration merging. It’s like saying:

Hey, let’s add some more features to this existing interface
and you can do it anywhere in your code.

interface ICountry {
  name: string;
  capital: string;
}

interface ICountry {
  population: number;
  officialLanguage: string;
}

const france: ICountry = {
  name: 'France',
  capital: 'Paris',
  population: 67000000,
  officialLanguage: 'French'
};

Intersection vs Extending

Last but not least important thing to know is that type intersection and interface extensions work differently

// It's OK
type TUser = {
  id: string;
}

type TUserData = TUser & {
  id: number;
}

// Definitely not ok
/*
Interface 'UserData' incorrectly extends interface 'User'.
  Types of property 'id' are incompatible.
    Type 'number' is not assignable to type 'string'.
*/

interface User  {
  id: string;
}

interface UserData extends User {
  id: number;
}

Some other details can be found at the section Differences Between Type Aliases and Interfaces

While my buddy thought there wasn't much difference, knowing these details can help you decide which one to use and when. It may seem insignificant, but it's good to know about it.

Finally, it doesn't really matter whether you use interfaces or types for defining props or business entities in your React app. The key thing is just to make sure everyone on the team knows and follows the same rules you've set up.

...

✅ 7 Emerging Generative AI User Interfaces: How Emerging User Interfaces Are Transforming Interaction


📈 30.2 Punkte

✅ TS: Next Level Index Signatures Inside Interfaces and Types


📈 26.13 Punkte

✅ What is the difference between Interfaces vs Types in TypeScript?


📈 26.13 Punkte

✅ Difference between types and interfaces in Typescript


📈 26.13 Punkte

✅ Why I Always Choose to Use Types Instead of Interfaces?


📈 26.13 Punkte

✅ Understanding Types and Interfaces in TypeScript: A Comprehensive Guide


📈 26.13 Punkte

✅ Types vs Interfaces in TypeScript


📈 26.13 Punkte

✅ TypeScript: Interfaces vs Types - Understanding the Difference


📈 26.13 Punkte

✅ TS: Types vs. Interfaces


📈 26.13 Punkte

✅ You Should Be Using Types Instead Of Interfaces In TypeScript


📈 26.13 Punkte

✅ How to Choose Your Type: TypeScript Interfaces vs Types


📈 26.13 Punkte

✅ Data Types: 7 Key Data Types


📈 22.07 Punkte

✅ Containous Traefik up to 1.7.11 types/types.go API Request information disclosure


📈 22.07 Punkte

✅ What is Value Types and Reference Types in JavaScript


📈 22.07 Punkte

✅ Automatic Conversion between Primitive Types and Wrapper Class Types


📈 22.07 Punkte

✅ ⚛️ Demystifying React's Types: Ref types


📈 22.07 Punkte

✅ Cast Various Types into Decimal Types in SQL


📈 22.07 Punkte

✅ PHP 8 News: Union Types and Mixed Types


📈 22.07 Punkte

✅ Understanding Value Types and Reference Types in C#


📈 22.07 Punkte

✅ Infer Types to Avoid Explicit Types


📈 22.07 Punkte

✅ Plattformübergreifende Benutzer-Interfaces: Kirigami UI 2 setzt auf Qt Quick Controls 2


📈 15.1 Punkte

✅ XPQ4 makes Linux look like Windows - great for grandparents or those who hate different interfaces


📈 15.1 Punkte

✅ Ubuntu Linux view status of my network interfaces card


📈 15.1 Punkte

✅ Java 8 Lambda Expressions and Functional Interfaces


📈 15.1 Punkte

✅ Windows 7 build 6758 suddenly leaked online with revampled interfaces


📈 15.1 Punkte

✅ Understanding Libraries, Interfaces, and Abstract Contracts in Solidity


📈 15.1 Punkte

✅ NBlog Sept 4 - standardising ISMS data interfaces


📈 15.1 Punkte

✅ PyAnyAPI up to 0.6.0 YAML Parser Interfaces.py YAMLParser command injection


📈 15.1 Punkte

✅ Advanced Brain-Computer Interfaces With Java


📈 15.1 Punkte

✅ Layered Network Interfaces


📈 15.1 Punkte

✅ Voice Is The New Keyboard: Voice Interfaces In 2018 And Beyond


📈 15.1 Punkte

✅ Foreman bis 1.11.3/1.12.0 API interfaces Information Disclosure


📈 15.1 Punkte

✅ Min: sched_ext: scheduler architecture and interfaces


📈 15.1 Punkte











matomo

Datei nicht gefunden!