Еще не ТС? Быстрый старт с TypeScript

предисловие

TS теперь используется все больше и больше, и те, кто изучает компьютеры, должны продолжать учиться, чтобы лучше соответствовать этой эпохе.Это краткое изложение предыдущего изучения TS Сяоланом, которое может быстро помочь каждому начать работу с TS. очень всеобъемлющий Некоторые часто используемые, но могут удовлетворить обычные потребности, вы можете посмотреть официальные документы для получения подробной информации, вот простое введение, я надеюсь, что это может помочь всем

Прошлые основные моменты:

Быстрый старт Vuex для рукописного ввода Easy Vuex

От понимания к глубокому виртуальному DOM и реализации алгоритма сравнения

Написание простого ответа vue поможет вам понять принцип ответа.

От использования до самостоятельной реализации простого Vue Router — просто взгляните на это

Необходимые базовые знания о фронтенд-интервью, хотя и немногочисленные, но вы не можете не знать

1. Установка

TSПреимущества и недостатки

сделать глобальную установку

npm install -g typescript

2. Примитивные типы данных

Я думаю, что это противоречит теме подсветки кода Nuggets.Код здесь относительно простой, поэтому я сделаю скриншот непосредственно.

Добавляем после переменной: 类型Вы можете указать тип данных, а установка других типов сообщит об ошибке

Сначала рассмотрим основные типы.

1. Строкаstring

Двойные кавычки(") или одинарные кавычки (') представляет строку

2. Числаnumber

Поддержка десятичных/шестнадцатеричных/двух/восьмеричных

3. Логическийboolean

может быть толькоtrue/false

4.undefined

не очень полезно

5.null

не очень полезно

6. Пустоvoid

нет использования любого типа, бесполезное возвращаемое значение функцииvoid, возвращаемое значение пусто (undefined)

7. Любой типany

Здесь, когда тип неясен, вы можете использоватьanyЛюбой тип, не используется, если в этом нет крайней необходимости

Unknowтип иanyможет вместить любое соотношение типовanyБезопасность

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

7. Буквальный

То, что определено, может быть назначено только

3. Сложные типы

1. Массивarray

Установите тип массива, как в этом примереtrueЭто сообщит об ошибке, оно не принадлежитnumber, элементы массива должны быть указанного типа, то же самое верно и для других типов

2. Кортежиtuple

ВыучилPythonВы должны быть знакомы с ним.На самом деле, вы можете думать об этом как о массиве, вы можете объявить несколько типов массивов, чтобы вы могли вставлять данные нескольких типов данных, которые представляют собой массив фиксированной длины.

3. Интерфейсinterface

Это может легко помочь нам определитьOjbectтип, который очень гибкий и может описывать различные типы объектов

иjavaизinterfaceЕсть некоторые отличия, давайте кратко рассмотрим ниже, особенности описаны ниже.

существуетinterfaceсвойство добавлено？Можетпропускать

Ниже мы даемheightДобавить к?

readonlyНеизменяемый, не может быть изменен после определения, так ли это иconstВроде как, ноconstдля переменной,readonlyдля свойств

Ниже мы помещаемidдобавитьreadonly

4. Функцияfuntion

Мы хотим указать функциютип вводаивозвращаемый тип

существуетпосле параметраза которым следует двоеточие для объявления типа параметра, в()后面Тип возвращаемого значения объявления двоеточия

Передача дополнительных параметров приведет к ошибке

Мы также можем добавить к функциинеобязательный параметриспользовать здесь?Вот и все, поэтому мы можем вызывать два параметра или три параметра, не сообщая об ошибке.

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

мы можем добавить это？становится необязательным параметром

В дополнение к описанному выше методу декларативного написания существует также метод написания выражений.

С вышеуказанным пониманием, давайте поговорим оОпределенный тип функцииПеременные

Функция здесь по-прежнему та, что выше

мы определяемmysumУкажите его тип, чтобы получить функцию, которую мы определили выше.

()который является типом входного параметра

=>Представительвозвращаемое значениетип

:Последние — это все типы объявлений, которые не имеют ничего общего с логикой кода.

мы только что сказалиinterfaceможет описывать различные типы, то мы используемinterfaceдля описания типа функции

Обратите внимание на то, что я использовал раньше=>для указания типа возвращаемого значения

здесь в()Задний: 返回值类型

5. Типы союзовunion types

Но когда тип переменной может быть нескольких типов, мы можем использоватьany,ноanyДиапазон слишком велик, меньше, чемв крайнем случаеНе используй,

Если мы знаем, какой из этих типов это, мы можем использоватьтип союзаиспользовать|отдельный

Например, следующий пример,hahaможет бытьnumberилиstring

Уведомление: может получить доступ только до того, как не будет присвоенияОбщие методы и свойства, как в следующем примере,numberнетlengthАтрибуты

6. Объектыobject

мы напрямуюlet a: object;Разве это не имеет смысла, потому чтоjsСлишком много объектов. .

мы можем использовать это так

свойство должно быть типа{ name: string; age: number; }середина

4. Утверждениеtype inference

Когда переменная типа union передается выше, мы объявляем этот тип какnumber | stringон не может позвонитьlengthметод

Машина не может судить об этом типе, но мы знаем этот тип лучше, чем машина, мы можем указать тип искусственноstringЗдесь мы можем использоватьутверждение типа

1. Мы используемasутверждать

2. Есть еще один способ записи<类型>Оба функционируют одинаково

5. Типовая защитаtype guard

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

Реализуйте тот же метод, что и выше

Тип защиты кромеtypeofКроме того, естьinstanceof,in

6. Классclass

существуетES6Есть понятие классаTSДобавьте несколько функций в класс, вот лишь несколько часто используемых.

Сначала напишите базовый класс

Начнем с 3 модификаторов доступа

Public: измененные свойства или методы распространены вв любом местеможет получить доступ

Private: Украшенное свойство или метод является только частнымэтот классдоступ в

Protected: оформленное свойство или метод защищены вэтот классив подклассев состоянии получить доступ

Например, укажите родительский классmoneyДоступ естьprivate, только вParentДоступ, доступ к подклассу будет ошибкой

Мы можем установить права доступа кprotected, чтобы подклассы могли получить доступ

статические свойстваstatic

вышеname moneyДоступ к этим двум свойствам осуществляется через экземпляр

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

такой жеstaticметод можно модифицировать с помощьюstaticДекорированный метод называется методом класса и может быть вызван непосредственно с помощью класса

только чтениеreadonly

Мы добавляем атрибутreadonlyгарантировать это свойствотолько чтение,Не может быть изменен, если он существуетstaticмодификатор, написанный после

абстрактный классabstract

TSНовый абстрактный класс, давайте кратко поговорим о концепции Когда мы пишем класс, мы не хотим использовать класс для создания экземпляра напрямую ** (не может быть новым) ** Затем мы устанавливаем его как абстрактный класс, так что он не может быть использован экземпляром

может передаваться только по наследству

существуетclassдобавлено доabstractмодификатор,

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

Например: у абстрактного класса животных есть вызываемый метод, невозможно, чтобы каждое животное звучало одинаково, мы можем установить его как абстрактный метод, и его реализует конкретная функция подкласса (как ее вызывать, зависит от подкласса. написать)

инкапсуляция свойств иjavaТо же самое, не говоря уже об этом...

7. Интерфейсinterface

Почему появляется интерфейс

Чтобы решить дилемму наследования (класс может только наследовать другой класс и не может реализовать множественное наследование)

Есть и другая ситуация,людиумеет стирать,стиральная машинаОн также может стирать белье.Стиральная машина и люди не могут найти общий родительский класс.Мы можем извлечь функцию стирки белья и написать ее в виде интерфейса.людиистиральная машинаПросто реализуйте этот интерфейс

мы можем использоватьimplementsреализовать интерфейс

Интерфейс может быть мультиреализован

Интерфейсы могут наследоваться до

Следующий пример интерфейса наследует другой интерфейс, поэтому людям нужно реализовать только один интерфейс.

8. Перечислениеenum

Константы часто используются в проектах, хотяconstКонстанты могут быть объявлены, но некоторые постоянные значения находятся в диапазоне, здесь нам нужно использоватьenumобрабатывать

1. Числовое перечисление

Может изменить начальное значение в перечислении

2. Перечисление строк

3. Постоянное перечисление

существуетenumдобавить фронтconstВот и все, это улучшает производительность

Почему я это говорю, я скомпилировал приведенное выше перечисление строк вjsНапример, сравните это с составлением константного перечисления

Постоянное перечисление, чтобы узнать напрямуюWeek.TuesdayВерх ушел

9. Дженерики

Дженерики похожи на заполнитель и переменную.При их использовании мы можем передать определенный тип в качестве параметра и вывести его без изменений.

Например, в этом примере мы хотим вернуть значение, здесь я написал это какnumber

На практике не обязательноnumber, мы можем решить это с помощью дженериков, определенный тип передается и какой тип возвращается

Краткое введение в дженерики

здесьTЭквивалентно заполнителю, добавленному после метода (переменной, интерфейса и т. д.)<T>

Разве это не выглядит так просто, но на самом деле

Затем, когда я использую метод getValue, мне нужно толькоАргументыУказываем тип, компилятор не тупой, он может знать типы наших параметров и присваивать ихT

несколько параметров

При его использовании разумно оценивайте входящий тип и изменяйте его.T,U, это действительно удобно

мы можем использоватьinterfaceограничивать дженерики

существуетTпозжеextends Ilen,определениеIlenКод внутри говорит,Tдолжен иметьlengthАтрибуты

Это вызывается в методеparams.lengthне сообщит об ошибке

существуетсвоего родаИспользуйте дженерики

существуетинтерфейсИспользуйте дженерики

существуетмножествоИспользуйте дженерики

На самом деле существует множество способов использования дженериков, вот простое введение

10. Псевдонимы типов

использоватьtypeпсевдоним типа

11. Крестовый тип

использовать&подключить

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

Вывод:

Эта статья представляет собой резюме, сделанное Сяоланом, когда он узнал больше о ТС в марте.Если она не является исчерпывающей, она часто используется.Если она является всеобъемлющей, мне нужно много писать. . . Официальный документ yyd, но вы можете использовать эту статью, чтобы быстро начать работу.На самом деле Xiaolang использует TS в течение определенного периода времени, и он чувствует, что некоторые дженерики очень сложны и сильно стандартизированы, а многие сторонние библиотеки скрыто. Ясно, я не могу понять, что я только что написал. Каждый раз, когда я что-то пишу, я должен думать об определении типа. Я не могу дождаться, чтобы разбить компьютер... Шучу, мне еще нужно набраться терпения. .

Использованная литература:Официальная документация ТС