πŸ‘©β€πŸ’» Π Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ интСрфСйсами ΠΈ Ρ‚ΠΈΠΏΠ°ΠΌΠΈ Π² typescript Вопрос, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ попался ΠΌΠ½Π΅ Π½Π° собСсС ΠΈ ΠΌΠ½Π΅ Π½Π΅ ΡƒΠ΄Π°Π»ΠΎΡΡŒ Π΅Π³ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Ρ€Π°ΡΠΊΡ€Ρ‹Ρ‚ΡŒ. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² основных отличиях.

1. БинтаксичСскоС ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅.

ОбъявлСниС Ρ‡Π΅Ρ€Π΅Π· ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова interface ΠΈ type.

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΡ‹ Π² ts: `interface User { name: string; age: number; }

Π’ΠΈΠΏΡ‹ Π² ts: `type User = { name: string; age: number; };

2. Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΡ‹ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ интСрфСйсы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова extends

`interface Person { name: string; }

interface User extends Person { age: number; }

Π’ΠΈΠΏΡ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ² & (пСрСсСчСниС).

`type Person = { name: string; };

type User = Person & { age: number; };

3. ОбъСдинСниС ΠΈ пСрСсСчСниС

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΡ‹ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ объСдинСниС (|) ΠΈΠ»ΠΈ пСрСсСчСниС (&) Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ. Они ΠΌΠΎΠ³ΡƒΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ интСрфСйсы.

Π’ΠΈΠΏΡ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ объСдинСниС ΠΈ пСрСсСчСниС:

`type A = { a: string }; type B = { b: number }; type C = A | B; // ОбъСдинСниС type D = A & B; // ΠŸΠ΅Ρ€Π΅ΡΠ΅Ρ‡Π΅Π½ΠΈΠ΅

4. Π”Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ слияниС

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΡ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ слияниС. Если Π²Ρ‹ ΠΎΠ±ΡŠΡΠ²Π»ΡΠ΅Ρ‚Π΅ Π΄Π²Π° интСрфСйса с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ, ΠΎΠ½ΠΈ автоматичСски ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ΡΡ.

`interface User { name: string; }

interface User { age: number; }

const user: User = { name: "John", age: 30, };

Π’ΠΈΠΏΡ‹ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ слияниС. Если Π²Ρ‹ ΠΏΠΎΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ ΠΎΠ±ΡŠΡΠ²ΠΈΡ‚ΡŒ Π΄Π²Π° Ρ‚ΠΈΠΏΠ° с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ, это Π²Ρ‹Π·ΠΎΠ²Π΅Ρ‚ ΠΎΡˆΠΈΠ±ΠΊΡƒ.

5. ИспользованиС с ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π°ΠΌΠΈ

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΡ‹ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ для описания ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ². Π’ΠΈΠΏΡ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹, объСдинСния ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ слоТныС структуры

6. ИспользованиС Π² классах

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΡ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ классами с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова implements.

`interface Person { name: string; greet(): void; }

class User implements Person { name: string; constructor(name: string) { this.name = name; } greet() { console.log(Hello, ${this.name}); } }

Π’ΠΈΠΏΡ‹ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ классами Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ.```````

repost

133

input message

Π½Π°ΠΏΠΈΡˆΠΈΡ‚Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚

Π΅Ρ‰Π΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² этом сообщСствС

Π΅Ρ‰Π΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² этом соообщСствС

Π²ΠΎΠΉΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ

ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° интСрСсных ΠΏΡ€ΠΎΡ„ΠΈ

Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ большС возмоТностСй

ΠΏΠΎΠΊΠ° Π² Π²Π΅Π±-вСрсии Π΅ΡΡ‚ΡŒ Π½Π΅ всё β€” ΠΌΡ‹ вовсю Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ Π½Π°Π΄ Π½Π΅ΠΉ

сСтка β€” cΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Π°Ρ ΡΠ΅Ρ‚ΡŒ для Π½Π΅Ρ‚Π²ΠΎΡ€ΠΊΠΈΠ½Π³Π° ΠΎΡ‚ hh.ru

ΠΏΠ΅Ρ€Π΅ΡΠ΅ΠΊΠ°ΠΉΡ‚Π΅ΡΡŒ с Ρ‚Π΅ΠΌΠΈ, ΠΊΡ‚ΠΎ повлияСт Π½Π° ваш ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ