Разница между Интерфейсом и Типом в Тайпскрипт 2021. TypeScript Interface vs Type.

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 127

  • @MrStereolight
    @MrStereolight 9 месяцев назад +2

    офигительная лекция. Просто супер. Процветания тебе, Автор!

  • @dimitro.cardellini
    @dimitro.cardellini 3 года назад +51

    6:45 это очень спорное утверждение в отношении того, когда и что использовать. Интерфейсы и типы во многом взаимозаменяемы. Как следует из двух важных отличий интерфейсов от типов, а именно: не возможность расширить интерфес от union-типа, и невозможность расширить декларацию типа, то интерфейс надо использовать, когда потребуется по-разному расширять его декларацию (например, на бэке и на фронте setTimeout имеет разныую сигнатуру), а типы надо использовать, когда требуется создание union типов.
    Конечно, нужно учесть, что интерфейсы являются более привычными для сторонников классического (JAVA-подобного) ООП, и собственно, невозможность наследования от union типа обусловленна именно этим фактом.
    У нас на проектах: типы -- для анимичных моделей, интерфейсы -- для описания поведения. Фактически получается, что все доменные объекты описаны типами, а все сервисы описаны интерфейсами. у объектов нет методов, есть только поля, а у сервисов нет полей, только -- методы. Но, это все не более, чем соглашение одной команды для определенной группы проектов.
    В подавляющем большинстве случаев стоит выбрать тот инструмент, который более удобен (привычен) для вашей команды.

    • @wisejs
      @wisejs  3 года назад +3

      Говорю, как использую сам. Это не значит что все должны писать так же.

    • @ra-dro
      @ra-dro 3 года назад

      Мы тоже в команде придерживаемся подобного подхода.

    • @Mr.Bellamy
      @Mr.Bellamy Год назад +2

      Когда пользуешься типами на уровне A: string,, B: number, то от скуки возникает странное желение начинать спорить где и что лучше использовать...
      Когда пишешь свои универсальные типы на дженериках, то такой вопрос не стоит)

    • @dimitro.cardellini
      @dimitro.cardellini Год назад +3

      @@Mr.Bellamy ну, якщо сперичатися про програмування, то від нудьги, то сперичатися про сперічання, то, мабудь, від дуже великої нудьги ;)
      Я, наприелад, цілеом погоджуюся з Вашим висловом:
      "Говорю, как использую сам. Это не значит, что все должны писать так же".
      Шкода, що цього уточнення не має у відео, і шкода, що я з легкістю можу отримати посилання на це відео, як аргумент на використання синтаксісу інтерфейса для анемічної моделі.
      От і все.

  • @luten23
    @luten23 2 года назад +3

    Когда смотрю такие видео - понимаю, как мало я знаю... Спасибо за видео

  • @wisejs
    @wisejs  3 года назад +4

    Какие темы по TypeScript раскрывать в следующих видео?

    • @Tigrago
      @Tigrago 3 года назад +8

      Generic и когда их стоит использовать.

    • @yuriykosnicer6083
      @yuriykosnicer6083 3 года назад +2

      Mixins, особенно как юзать в ангуляре

    • @googdoit
      @googdoit 3 года назад +2

      Женерики

  • @artem6987
    @artem6987 Год назад +2

    Прям ваще годное видео - чётко, сжато, конкретно и по делу! Однозначно Like 👍

  • @fazzzy3160
    @fazzzy3160 8 месяцев назад +1

    Респект за сохраненное время!

  • @АлексейВитальевич-ы7у

    Круто объяснил! Спасибо огромное, все понятно, крутые примеры!

  • @alexandrponomarenko4100
    @alexandrponomarenko4100 3 года назад +4

    Хорошее видео! Четко и без воды

  • @N5O1
    @N5O1 6 месяцев назад +1

    0:25 для этих целей так же можно использовать и class и typeof любього объекта (но это считай будет type, только без присвоенного типа)

  • @romanpohribniak8471
    @romanpohribniak8471 3 года назад +4

    Спасибо что продолжаете радовать нас отличным контентом!

  • @azil2024
    @azil2024 3 года назад +2

    Спасибо друг за твою работу...

  • @N5O1
    @N5O1 6 месяцев назад +1

    мне кажется там все предельно понятно, если ты понимаешь концепцию интерфейса.
    а type им следовало назвать alias и тогда бы точно не было бы никаких путаниц

  • @voronko100
    @voronko100 8 месяцев назад +1

    Полезно, спасибо

  • @konstantinvoronin4687
    @konstantinvoronin4687 3 года назад +5

    Спасибо! Много новых тонкостей узнал.
    Очень доходчиво объяснил про разницу Type и Interface в Typescript

    • @wisejs
      @wisejs  3 года назад +1

      Спасибо за ключевые слова))

  • @nick_arseniy
    @nick_arseniy 3 года назад +2

    Урок очень хороший много понятно стало

  • @IlyaShaforostoff
    @IlyaShaforostoff 3 года назад

    спасибо, кратко, толково, без воды. случайно попал сюда, подписался

    • @wisejs
      @wisejs  3 года назад

      спасибо, сюда попали все случайно, но остаются не случайно😉

  • @STELLS541
    @STELLS541 Год назад +1

    Гооодно!!! 🙏🏻💪🏻

  • @alexandrvienik1575
    @alexandrvienik1575 3 года назад +29

    Хороший урок. Но по поводу последнего, то это субъективно. Так как это уже больше принимается на уровне команды и по сути отличий у них почти нет

    • @wisejs
      @wisejs  3 года назад +1

      Согласен. Это правило, которое использую я.

    • @whiteguards43
      @whiteguards43 2 года назад

      Привет всем, не могли бы подсказать, какой тип 'file' будет в реакте?

  • @bvfromruvitaliy
    @bvfromruvitaliy 3 года назад +1

    Хорошее видео, спасибо!

  • @zergzerg4844
    @zergzerg4844 10 месяцев назад +1

    Пардон, но я что-то не догнал вашего утверждения о том что длинна кортежа не меняется,. Почему тогда основываясь на вашем примере могу пушить данные в переменную с типом State и длинна массива меняется?

  • @maga_frank
    @maga_frank Год назад +1

    у меня в редакс тулките store ругается на этот интерфейс, переименовал в type и теперь норм. Не пойму в чем дело

  • @АлинаЧередниченко-п9ъ

    Все четко и по делу!👍🏻👍🏻👍🏻

  • @yee213
    @yee213 3 года назад +1

    Спасибо, очень полезно!

  • @aleksandrm3466
    @aleksandrm3466 3 года назад +4

    Очень хороший урок. Большой молодец👍, ждем продолжения

  • @dmytrovoronov9320
    @dmytrovoronov9320 3 года назад +4

    TypeScript и Saga

  • @SergAlexson
    @SergAlexson 3 года назад +1

    Спасибо! хороший урок!

  • @rmnkot
    @rmnkot 3 года назад +1

    Огонь, спасибо, больше ТС в ньюансах!

  • @МаксимИсаев-ъ5о
    @МаксимИсаев-ъ5о 2 года назад

    Красвава!

  • @Giri-16108
    @Giri-16108 3 года назад +13

    Покажите как типизировать API и функции высшего порядка. Годного материала не могу найти. Спасибо.

    • @DenisB-d5f
      @DenisB-d5f 3 года назад +1

      риал

    • @theywalkedlikemen4832
      @theywalkedlikemen4832 3 года назад +2

      дженерики в помощь

    • @nikdev8023
      @nikdev8023 3 года назад

      Он значительно лучше express и если вам нужна типизация, а для разработки хороших АПИ, она вам нужна, то это идеальный вариант

  • @sergeyvladimirov9994
    @sergeyvladimirov9994 2 года назад

    Хороший урок.
    Есть еще интересная тема - типы событий. Где и какие типы указывать, неясно.
    Еще интересная тема - ответ от сервера. Какие типы указать

  • @awenn2015
    @awenn2015 3 года назад

    Спс за годный контент, а то я в ts недавно, многих вещей ещё не знаю

  • @dimalukashenko4865
    @dimalukashenko4865 Год назад

    Хороший урок, спасибо за труд!

  • @Davie-gp2ej
    @Davie-gp2ej 3 года назад +3

    3:47
    Вторая запись не предлагает наличие методов массива в экземпляре

  • @SergeyNeskhodovskiy
    @SergeyNeskhodovskiy 3 года назад +4

    Отличное описание нюансов, краткое и ёмкое, спасибо

    • @wisejs
      @wisejs  3 года назад

      Спасибо за комментарий!

  • @AlexAlex-mq6sg
    @AlexAlex-mq6sg 3 года назад

    Интересно!

  • @Polite_person_
    @Polite_person_ 3 года назад +2

    Хотелось бы хорошо разобраться с декораторами.

  • @ДмитрийРазыгрович
    @ДмитрийРазыгрович 3 года назад

    Красавчик!

  • @dimitro.cardellini
    @dimitro.cardellini 3 года назад

    3:52 - Кортеж можно описать интерфейсом. Правда, это будет выглядеть несколько громоздко и непривычно, но это возможно:
    interface IState extends Array {
    [0]: number;
    [1]: (n: number) => void;
    length: 2;
    }
    const state: IState = [10, (n) => console.log(10 + n)];
    const [value, effect] = state;

    • @wisejs
      @wisejs  3 года назад +1

      Кортеж нельзя опиcать интерфейсом.
      В этой реализации можно деструктеризировать любое количество ствойств, и все они будут any. Что значит вы типизировали не кортеж, а 2 первых элемента массива.
      const [value, effect, a, b, c] = state;
      TypeScript не будет ругаться на такую запись.

    • @dimitro.cardellini
      @dimitro.cardellini 3 года назад

      @@wisejs
      Да, строго говоря, это действительно не кортеж.
      Это массив с по-разному типизированными элементами.
      И да, если так наследоваться, то лучше от Array.
      Немного безопаснее.

  • @klmplm
    @klmplm 3 года назад

    Круто!

  • @dimitro.cardellini
    @dimitro.cardellini 3 года назад

    3:40 NamesA и NamesB разные декларации. NamesB является аналогом вот такой:
    type NameC = { [idx: number]: string }
    У обоих деклараций, и NamesB и NamesC будут отсуствовать методы массива.
    const b: NamesB = ['a', 'b', 'c'];
    b.length -- выдасть ошибку "length" is not present in NamesB
    Аналогом NamesA будет:
    interface NamesD extends Array {};

    • @wisejs
      @wisejs  3 года назад

      Тут нужно отдавать приоритет типам.

    • @dimitro.cardellini
      @dimitro.cardellini 3 года назад +1

      @@wisejs NamesC тоже тип.
      И опять же, смотря что надо описать.
      Может так и надо сделать, чтобы не было методов массива и читать надо было по прямому индексу.
      Кстати, как параметр функции вполне подойдет

  • @romanchutak
    @romanchutak 3 года назад

    Хорошо осветил

  • @МаксимКалинин-р8ъ
    @МаксимКалинин-р8ъ 3 года назад +1

    Было бы интересно про перегрузку послушать тк на практике не приходилось использовать, соответственно полного понимания непосредственно, зачем реализована такая возможность нет. Буду благодарен за пример из жизни, а не на "котиках")))

  • @whiteguards43
    @whiteguards43 2 года назад

    Привет всем, не могли бы подсказать, какой тип 'file' будет в реакте?

  • @glushk1na
    @glushk1na 2 года назад

    вы вроде не сказали в ролике главного отличия, как написано в документации, что type cannot be re-opened to add new properties vs an interface which is always extendable

    • @romanmed9035
      @romanmed9035 2 года назад

      разве этого не звучало может не дословно, но по смыслу так?

    • @джамп
      @джамп 2 года назад

      6:02

  • @dimitro.cardellini
    @dimitro.cardellini 3 года назад

    2:02 надо еще SumC добавить. Аналог SumA.
    type SumС = {
    (a: number, b: number): number;
    }
    const sum: SumC = (a, b) => a + b;
    Здесь надо сказать, что SumA и SumC нужны когда для функии задаются дополнительные свойства (как, например, в случае с express), в остальных случаях функцию лучше тайпать, как SumB -- проще читается.

    • @wisejs
      @wisejs  3 года назад

      Да, верно. Второй ваш коммент RUclips забанил, не могу его прочесть и ответить.

    • @aleksandrzhilkin4800
      @aleksandrzhilkin4800 2 года назад

      о каких дополнительных свойствах идет речь? SumA.propertie = 123 ?

    • @aleksandrzhilkin4800
      @aleksandrzhilkin4800 2 года назад

      разобрался, верно

  • @КазковийБудинок
    @КазковийБудинок 3 года назад

    Красава!

  • @adilzhanbabakhan1369
    @adilzhanbabakhan1369 Год назад

    Это получается все что связано с Mapped types и Utility types лучше использовать в type?

    • @Mr.Bellamy
      @Mr.Bellamy Год назад

      лучше всего да, ибо через интерфейсы это как бы не получится)

  • @Nurgul626
    @Nurgul626 3 года назад +4

    В видео очень много ошибок и неточностей
    3:42
    NameA и NameB не идентичные типы, тут записть NameA эквивалентна типу Array, в то время как NameB это Record. Первое - массив строк, второе - объект с ключами типа number и значениями типа string, во втором случае отсутствуют поля и методы массива как length, push, pop и так далее
    5:16
    const obj: C = .... в этом случае поля age и name разрешены не потому что тип C объявлен как A | B, а потому что из-за структурной типизиции к объекту типа C можно добавить любое поле и он все еще будет иметь тип C. Сам тип A | B описывает либо поле name, либо age, но не два сразу. Для этог онужно использовать запись A & B

    • @romanmed9035
      @romanmed9035 2 года назад

      именно так и подумал когда смотрел видео. хорошо что Вы это выразили текстом.

  • @singlebw4065
    @singlebw4065 3 года назад

    Как динамически менять дженерик тип. Есть функция которая отрабатывает и получает DataCode от 1 - 11 . Нужно как то организова такой функционал. type AllKey = "A" | "B" | "C".... I_Test interface I_Test { name: string; item: Array ; }

    • @wisejs
      @wisejs  3 года назад

      Ничего не понял.

    • @singlebw4065
      @singlebw4065 3 года назад

      @@wisejs Как в разный момент времени подкидывать в let a:I_Test = {name: "Вася", items: [{model: "BMW"}] let a:I_Test = {name: "Петя", items: [{cityl: "Moscow"}] let a:I_Test = {name: "Борис", items: [{prof: "Повар-тракторист"}] и т. д. В функции в которой переменная "a" меняеться приходит так же при разном вызове одно из чисел от 1-11. типов так же от 1-11 существует мне как то надо их подкидывать ориентируясь на число

    • @wisejs
      @wisejs  3 года назад

      Можете пример кода прикрепить с ошибкой?

  • @TRON585
    @TRON585 3 года назад

    Вопрос по теме union, есть ли в ts возможность описать, например тип С, так, чтобы он принимал либо только свойство из типа А, либо только свойство из типа В?

    • @george32451
      @george32451 3 года назад

      Вроде как в самом ts нет встроенного утильного типа, но в целом это называется mutually exclusive types или XOR, на стэковерфлоу есть реализация, гугл выдаёт первой ссылкой

    • @alexs7931
      @alexs7931 2 года назад

      Возможно Record

    • @alexs7931
      @alexs7931 2 года назад

      type xor = keyof A | keyof B;

  • @ДмитрийРазыгрович
    @ДмитрийРазыгрович 3 года назад

    А скажи плиз свое мнение насчет типизации пропсов
    Type vs Interface

    • @wisejs
      @wisejs  3 года назад

      Я юзаю просто React.FC

    • @ДмитрийРазыгрович
      @ДмитрийРазыгрович 3 года назад

      @@wisejs а если кол-во пропсов 10+

    • @wisejs
      @wisejs  3 года назад +1

      Чаще всего это значит что компонент делает слишком много всего, и нужно изменить апи)

  • @MrStoikiy
    @MrStoikiy 3 года назад

    У меня как то был косяк с аргументами функции
    При такой записи:
    const getTableRows = (someArg: ISomeArg[], columns: ITypeA[] | ITypeB[]) => ....
    тайп скрипт ругался на: This expression is not callable.
    Я заменил это на
    const getTableRows = (someArg: ISomeArg[], columns: C[]) => ....
    и лыжи поехали.
    Это какой то Юнион тайп из мира интерфейса получился что ли?
    P.S В итоге всё равно пришлось переделать , а то выглядело не оч))

    • @wisejs
      @wisejs  3 года назад +1

      А причем здесь интерфейс? Extends тут выполняет совсем другую роль. Он ограничивает тип, а не расширяет его.

    • @AlexeyAndKartashov
      @AlexeyAndKartashov 3 года назад

      Можно было написать проще, с тем же результатом:
      `const getTableRows = (someArg: ISomeArg[], columns: (ITypeA | ITypeB)[]) => ...`
      С т.з. типобезопасности, `Array | Array` - это не то же самое, что `Array`.
      Но вот то, что переменная с типом `const arr: Array | Array` создаёт больше проблем, чем пользы - это реально вымораживает, даже если ITypeA и ITypeB структурно идентичны. В итоге приходится идти на компромисс (это ж ts, как тут без компромиссов) и менять тип на `const arr: Array` и тогда "лыжи начинают ехать"

  • @santokas3063
    @santokas3063 3 года назад +1

    Все классно, но очень быстро, мало примеров

    • @Wraith2401
      @Wraith2401 3 года назад +2

      по-моему, достаточно)

  • @МаксимЛибер-ф2н
    @МаксимЛибер-ф2н 3 года назад

    Спасибо за видео. А нету у Вас случайно в планах записать видео по правильному подключению роутов, если есть как публичные роуты так и приватные. В интернете есть разная информация: кто-то создает 2 объекта: publicRoutes и privateRoutes, в другом способе объект единый, но компонент делают свой - кастомный роут - privateRoute. И как правильно построить структуру, если например есть не только user и admin, а, допустим 3 уровня доступа, user; moderator; admin; Про то, как правильно организовать все в таком случае информации вообще нету. Спасибо

    • @wisejs
      @wisejs  3 года назад

      Хорошая идея, запишу себе 😉

  • @АндрейИльин-д6ж
    @АндрейИльин-д6ж 3 года назад +1

    не удаляй пока видос. я попозже посмотрю что ты там сделал.

    • @wisejs
      @wisejs  3 года назад

      Не планировал ))

  • @djubei2265
    @djubei2265 3 года назад

    расскажи про дженерики плз

  • @kdnlinker
    @kdnlinker 3 года назад

    Интерфейс должен определять методы, но никак не свойства, тогда сразу будет понимание разницы между типом и интерфейсом.

    • @denisdragomirik
      @denisdragomirik 3 года назад +1

      Удачи 😁

    • @kdnlinker
      @kdnlinker 3 года назад

      @@denisdragomirik golang или любой строго типизированный язык программирования тебе в помощь, чтобы разобраться в разнице между типом и интерфейсом. Даже всеми ненавидимый php с динамической типизацией знает что есть тип, а что есть интерфейс, и только нубы от тайпскрипта никак её не поймут.

    • @denisdragomirik
      @denisdragomirik 3 года назад

      @@kdnlinker а ти уяви, що в тебе не властивість, а геттер. А геттер - це метод. Якщо не згоден - вчи основи TypeScript. У C#, до речі, подібна концепція

    • @kdnlinker
      @kdnlinker 3 года назад

      @@denisdragomirik ghbx`v pltcm ctnnth b utnnth? ns rjulf yf [j[kzwrjv dtoftim? nj dtofq d cdjtq [j[kj;jgbb/ Включишь русскую раскладку и прочитаешь, а как у Зели спросишь.

    • @denisdragomirik
      @denisdragomirik 3 года назад

      @@kdnlinker Не збираюсь)

  • @alexkrit5184
    @alexkrit5184 3 года назад

    Интерфейс не попадает в компиляцию

    • @wisejs
      @wisejs  3 года назад

      Тип тоже. Тайпскрипт типы вообще не попадают в компиляцию.

  • @artma5
    @artma5 3 года назад

    Автор видео не понял смыслового различия между Interface и Type. В офф документации TypeScript, других С-подобных языках и книгах по ОПП есть чёткое описание предназначения. Для тех кто хочет это действительно понять, обратитесь к этой литературе.

    • @ilyalya2203
      @ilyalya2203 3 года назад

      в 2 словах? куда копать?

    • @romanmed9035
      @romanmed9035 2 года назад

      с учетом особенностей попробоавали везде использовать интерфейсы и только когда этого совсем нельзя, то типы и все нормально получается.

  • @bakaleisanich
    @bakaleisanich 3 года назад

    сайдет подписочка

  • @linkedLife999
    @linkedLife999 3 года назад

    Ещё нельзя наследовать классы от типов, только интерфейсы

    • @wisejs
      @wisejs  3 года назад

      Классы и от интерфейсов нельзя наследовать. Класс - это реализация интерфейса. A extends в интерфейсе работает с типом, что я и показываю в видео.

  • @ВсеволодРусинский
    @ВсеволодРусинский 2 года назад

    👉 Этот комментарий создан в качестве уважения автору и для продвижения его канала.

    • @romanmed9035
      @romanmed9035 2 года назад

      ответил с той же целью длинною более 4 слов, поскольку присутствует полезное содержимое.

    • @user-Duke2017
      @user-Duke2017 2 года назад

      @@romanmed9035 ну и я тогда поддержу, можно ещё политический срач развести, тогда комментариям не будет отбоя:)

    • @romanmed9035
      @romanmed9035 2 года назад

      @@user-Duke2017 ну срач наверное все же не надо. остановимся на приличном.

  • @starwalker.musician
    @starwalker.musician Год назад +1

    За что же JavaScript`у так не повезло?! TypeScript это - самая уродливая разработка которую я видел за 33 года работы программистом. Создавая его авторы не имели конкретной цели - внесли кучу путаницы, так и не делегировав относительность и приоритеты типов и интерфейсов. По всей видимости и сейчас не могут. Что мешало сделать интерпретатор с (например) Java или C# через WebAssembly - в JavaScript? Как я люблю Web разработку и как я устал от постоянной костылизации решений. Создание интерпретатора - не тривиальная задача! Но ...чего не хватает в мире JavaScript разработки так это - архитекторов!

    • @konstantinov_it
      @konstantinov_it Год назад

      Умом JS нам не понять,
      Аршином общим не измерить:
      У ней особенная стать -
      В JS мы можем только верить.

    • @starwalker.musician
      @starwalker.musician Год назад

      @@konstantinov_it Я думаю может просто не нужно его воспринимать так серьезно - как язык программирования. Он как был - script, так и остался - скриптом. В этом его прелесть. Да и javascript - не панацея, а одно из решений для web задач. Можно писать Web не только на JavaScript`е. Просто что последнее - менее популярное решение.

    • @starwalker.musician
      @starwalker.musician Год назад

      @@ugin-nb4sy Через лет 5 Vaadin и TS будет чем-то вроде jQuery или Adobe Flash - что с этим делать? Ты будешь сопровождать это барахло? )))

    • @starwalker.musician
      @starwalker.musician Год назад

      @@ugin-nb4syХах, ты какие-то курсы проходил? "Как поверить в себя за 15 дней" ? Малыш )) Откуда ты такой мотивированный? ))) Видно что ты еще - зеленый как трава ))) Твои розовые рассуждения выдают твой возраст, сын )

    • @starwalker.musician
      @starwalker.musician Год назад

      @@ugin-nb4syА шо ты такое вообще? AI который поверил в себя? Сын, мне вообще твое мнение - ...по барабану (мягко сказано). Мои скилы еще какой-то "июнь" не проверял 😀 Я плачу от такого расклада ))) Ты мне начинаешь нравится - ты смешной! 😀Может к тебе еще на курсы записаться? 😀😀😀😀😀

  • @john-weekend
    @john-weekend Год назад

    Урок сложный. Новичку непонятно

  • @СвириденкоВолодимир-х1с

    Сложно

  • @jamoliddinqodirov9866
    @jamoliddinqodirov9866 2 года назад

    ruclips.net/video/hGdx0hpZsvs/видео.html interface D {
    name?:string;
    age?:number;} интерфей так может