Типы данных | JavaScript Camp
Как вы уже знаете TypeScript является статически типизированным языком. Статически типизированный язык, это язык программирования, который имеет систему типов. Зачем же нужны типы? Типы данных используются для добавления статических ограничений на программные элементы, такие как функции, переменные и свойства. Это позволяет компилятору и средствам разработки осуществлять более тщательную проверку и поддержку в процессе разработки. Хоть JavaScript является динамически типизируемым языком, типы там всё же присутствуют, но присваивание происходит во время выполнения кода, а не во время компиляции. Все типы JavaSсript присутствуют и в TypeScript, но TypeScript по-другому с ними работает и добавляет свои типы.
Типы в TypeScript
Все типы в TypeScript являются подтипами главного типа, которым является тип any
. Тип any
— единственный, который может представлять любое значение JavaScript без всяких ограничений. Все остальные типы накладывают определенные ограничения на свои значения.
Any
Тип any
используется, когда мы не знаем какой тип должна иметь та или иная переменная. Эта переменная может быть получена из некоего динамического содержимого, как например, если бы использовалась некая сторонняя библиотека. В таких случаях нужно отказаться от проверки типов и позволить таким переменным проходить проверку во время компиляции. Для того, чтобы это сделать, нужно указать переменной тип any
с помощью ключевого слова any
.
let variable: any
Пример
let isAny: any
console.log(isAny + ', Тип: ' + typeof isAny)
isAny = 'string1'
console.log(isAny + ', Тип: ' + typeof isAny)
isAny = 4
console.log(isAny + ', Тип: ' + typeof isAny)
isAny = {}
console.log(isAny + ', Тип: ' + typeof isAny)
Boolean
Тип boolean
является логическим типом и представлен значениями true
и false
. Объявляется при помощи ключевого слова boolean
.
Пример
let isVar1: boolean = false,
isVar2 = true
console.log(isVar1 + ', Тип: ' + typeof isVar1)
console.log(isVar2 + ', Тип: ' + typeof isVar2)
Number
В TypeScript, как и в JavaScript, все производные от number
являются 64-битными числами двойной точности с плавающей запятой. Кроме десятичного и шестнадцатеричного формата, поддерживаются бинарный и восьмеричный, введенные в ECMAScript 2015.
Пример
let isNumBin: number = 0b00110111, // Binary
isNumOct: number = 0o67, // Octal
isNumDec: number = 55, // Decimal
isNumHex = 0x37 // Hex
console.log(isNumHex + 0xf + ', Тип: ' + typeof isNumHex)
String
Тип string
представляет собой последовательность символов в кодировке Unicode UTF-16. Строки могут быть заключены в одинарные или двойные кавычки, а также в обратные апострофы (инициаторы так называемых шаблонных строк).
Пример
let isVar1: string = 'строка',
isVar2 = 'другая строка'
console.log(isVar1 + ', Тип: ' + typeof isVar1)
console.log(isVar2 + ', Тип: ' + typeof isVar2)
Symbol
Тип Symbol
предоставляет уникальные идентификаторы, которые могут быть использованы как ключи для свойств объекта.
Значения типа symbol создаются с помощью вызова конструктора Symbol
.
let sym1 = Symbol()let sym2 = Symbol('key') // Необязательный строковый ключ
Void
Тип void
это нечто противоположное any
, то есть отсутствие каких-либо типов. Чаще всего он используется в качестве возвращаемого типа функций, которые не возвращают никакого значения.
Пример
let learnTypeScript = (): void => {
console.log('Эта функция ничего не возвращает!')
}console.log(learnTypeScript() + ', Тип: ' + typeof learnTypeScript())
Never
Тип never
представляет тип, значение которого никогда не наступает. Например, never
является типом, который возвращает функция, которая всегда бросает исключения или выход из которой никогда не происходит (например, бесконечный цикл). Переменные также могут иметь данный тип, например, для того, чтобы никогда не принимать значение true
.
Пример
let error = (message: string): never => {
throw new Error(message)
}
Null/Undefined
В TypeScript оба типа undefined
и null
фактически имеют имена undefined
и null
соответственно. Как и void
, сами по себе они не особо полезны:
let u: undefined = undefined
let n: null = null
Структуры
Обычно в TypeScript не разделяют понятия типа и структуры, потому что структура тоже является типом. Но так как структура – это составной тип данных, который состоит из разных типов, сгруппированных под одним, мы выделили такие типы в отдельную часть.
Array (массив)
Тип Array
используется для указания элементов массива. Определить массив можно двумя способами:
- []
- Array<elemType>
В первом методе вы указываете тип элементов массива, за которым следует []
, который обозначает массив этого типа.
Пример
let isArrOfStr: string[] = ['string1', 'string2'],
isArrOfNum: number[] = [1, 2, 3, 4, 5]
console.log(isArrOfNum[4] + ', Тип: ' + typeof isArrOfNum)
Tuple (кортеж)
Тип Tuple
или кортеж представляет собой массив, каждому из элементов которого можно указать свой тип. Обычно такая структура используется для предоставления набора данных, например, записи в базе данных.
Пример
let isTuple: [string, boolean] = ['string1', false]
console.log(isTuple[0] + ', Тип: ' + typeof isTuple[0])
console.log(isTuple[1] + ', Тип: ' + typeof isTuple[1])
Enum (перечисление)
Тип enum
используется для объявления перечисления — отдельного типа, который состоит из набора именованных констант, называемого списком перечислителей. Перечисления пришли в TypeScript из C#. Например, для вашего удобства вы можете создать enum
дней. По умолчанию первый перечислитель имеет значение 0
, и значение каждого последующего перечислителя инкрементируется на единицу.
Пример
enum isEnumAnimal {cat, rabbit, horse, dog, hen, cow, sheep}
console.log(isEnumAnimal.rabbit + ', Тип: ' + typeof isEnumAnimal.rabbit)
console.log(isEnumAnimal[1] + ', Тип: ' + typeof isEnumAnimal[1])enum isEnumWeek {Mon = 34, Tue, Wed, Thu, Fri, Sat, Sun}
console.log(isEnumWeek[34] + ' or ' + isEnumWeek.Tue + ', Тип: ' + typeof isEnumWeek)
Работа с типами
Для начала следует рассказать основные моменты для работы с типами в TypeScript.
Аннотация типов
В TypeScript аннотация типа или указание типа осуществляется с помощью оператора двоеточия : type
, после которого следует идентификатор типа. TypeScript является статически типизированным языком, поэтому после того как идентификатор будет связан с типом, изменить тип будет невозможно.
Пример
// let variable: type = value
let isNumber: number = 777, // явно
anotNumber = 888, // неявно
isString: string = 'string1', // явно
anotString = 'string2' // неявно
console.log('isNumber - ' + typeof isNumber + '\n anotNumber - ' + typeof anotNumber)
Так же присвоить тип переменной можно через конструкцию Union.
typeof (Запрос типа)
Механизм запроса типа Type Queries
позволяет получить тип, связанный со значением по его идентификатору и в дальнейшим использовать его как обычный тип. Запрос типа осуществляется оператором typeof
, после которого идет идентификатор, ссылающийся на значение. Запрос типа также может располагаться в местах указания типа.
let isVar1: string
let isVar2: typeof isVar1
Пример
let isString: string = 'string'
enum isEnumAnimal {cat, rabbit, horse}
console.log('isString - ' + typeof isString)
console.log('isEnumAnimal - ' + typeof isEnumAnimal)
Объединения
Объединение Union
— это мощный механизм, позволяющий создавать из множества существующих типов логическое условие, по которому данные могут принадлежать только к одному из указанных типов. Объединение указывается с помощью оператора прямой черты |
, по обе стороны которой располагаются типы данных.
let variable = type1 | type2 | type3
Переменной, которой был присвоен объединенный тип, может быть присвоено значение, принадлежащие к одному из объединенных типов.
Пример
let isUnion: string | number | boolean
isUnion = 1
console.log(isUnion + ', Тип: ' + typeof isUnion)isUnion = false
console.log(isUnion + ', Тип: ' + typeof isUnion)isUnion = 'Hello'
console.log(isUnion + ', Тип: ' + typeof isUnion)
Пересечение
Пересечение Intersection
— механизм TypeScript, который позволяет рассматривать множество типов данных как единое целое. Пересечение указывается с помощью оператора амперсанда &
, по обе стороны которого указываются типы данных.
let variable: type1 & type2 & type3
Переменной, которой был указан тип пересечение type1
и type2
и type3
, должно быть присвоено значение, принадлежащее к типам type1
и type2
и type3
одновременно. Другими словами, значение должно обладать всеми обязательными признаками каждого типа, определяющего пересечение.
Пример
interface Colorful {
color: string
}
interface Circle {
radius: number
}// ---cut---
function draw(circle: Colorful & Circle) {
console.log(`Color was ${circle.color}`)
console.log(`Radius was ${circle.radius}`)
}// okay
draw({ color: 'blue', radius: 42 })// oops
draw({ color: 'red', raidus: 42 })
Псевдонимы типов
Для любого типа можно создать его псевдоним и использовать его в дальнейшем. Псевдоним типа объявляется при помощи ключевого слова type
.
type isAlias = type
Пример
type isAlias = string | number | booleanlet isVar: isAlias
isVar = 1
console.log(isVar + ', Тип: ' + typeof isVar)
isVar = false
console.log(isVar + ', Тип: ' + typeof isVar)
isVar = 'Hello'
console.log(isVar + ', Тип: ' + typeof isVar)
Тип Assertions
Тип assertion
представляет модель преобразования значения переменной к определенному типу. Обычно в некоторых ситуациях одна переменная может представлять какой-то широкий тип, например any
, который по факту допускает значения различных типов. Однако при этом нам надо использовать переменную как значение строго определенного типа. И в этом случае мы можем привести к этому типу. Есть две формы приведения.
- Ключевое слово as
- Оператор <>
Первая форма заключается в применении оператора as
:
Пример
let isAny: any = 777
let isNumber = isAny as number
console.log(isNumber + ', Тип: ' + typeof isNumber)
Вопросы
Какой самый главный тип данных в TypeScript?
- any
- never
- void
В какой кодировке символы типа String?
- ASCII
- Unicode UTF-16
- Windows 1251
Чем является тип Number?
- 16-битными числами
- 32-битными числами
- 64-битными числами
Для чего переменные могут принимать тип never?
- Чтобы возвращать только true
- Чтобы возвращать только false
- Чтобы никогда не возвращать true
Какая из структур используется для указания каждому элементу свой тип данных?
- array
- tuple
- enum
С помощью чего происходит аннотация типа?
#
as
:
C помощью чего можно объеденить типы?
|
\
&
С помощью чего указывается пересечение типов?
$
|
&
Теперь мы готовы с вами изучать TypeScript, но для того чтобы понять на сколько вы усвоили этот урок пройдите тест в мобильном приложении в нашей школы по этой теме.
Ссылки
- TypeScript Lang
- Спривочник TypeScript
- Сanonium
Contributors ✨
Thanks goes to these wonderful people (emoji key):
IIo3iTiv | Dmitriy Vasilev 💵 |
Что означает javascript\:void 0? (Часто задаваемые вопросы)
Введение
Слово «void» буквально означает ноль или пробел. С точки зрения программирования это относится к возврату пустого значения или неопределенного значения. Теперь давайте разберемся, как void используется для управления поведением веб-страниц с использованием Javascript с помощью ключевого слова javascript:void(0).
Что означает Javascript:void(0)?
Чтобы начать с javascript:void(0), давайте разберемся, что означает void с точки зрения программирования, на примере следующих функций явно и неявно соответственно.
Здесь, в явном методе, функция возвращает неопределенное значение, как показано ниже:
В то время как в неявном методе функция выполняет сложение двух чисел и ничего не возвращает (неопределенное значение не возвращается явно), как показано ниже:
Другими словами, void означает, что ничего не возвращается независимо от того, что делает функция.
Теперь давайте разберемся, что такое javascript 0 на самом деле. Давайте разбираться по крупицам.
JavaScript: :
Код javascript:
Код:
Вывод:
Как видно из приведенного выше примера, браузер не обрабатывает href как указанный путь. Вместо этого он обрабатывает его как код JavaScript, разделенный точкой с запятой и сопровождаемый ключевым словом «9».0019 javascript «.
void() :
Насколько вы могли понять, что такое void() на самом деле. Если вы все еще не можете это понять, не волнуйтесь! Давайте разберемся с реальной телевизионной рекламой шоколадного бренда, в которой говорится
Например:
На приведенном ниже рисунке, как вы можете видеть, мы взяли две переменные ‘result’ и ‘result1’, чтобы лучше понять ключевое слово void(). Переменная ‘result’ содержит оцененное числовое выражение. Переменная ‘result1’ содержит оцениваемое числовое выражение в качестве аргумента ключевого слова void. Как видите, ключевое слово void ничего не делает и возвращает значение undefined, в то время как без ключевого слова void оно возвращает оцененное выражение как 23.
Теперь вы можете подумать, является ли void вычислением выражения? Это нормально, что он возвращает значение как неопределенное, но как мы можем узнать, что он вычисляет выражение? Не волнуйтесь, давайте разберемся с этим на примере ниже:
Пример:
Вывод:
Как видно из приведенных выше снимков, аргументы в операторе void работают правильно, когда они оцениваются, но они возвращают значение как неопределенное.
Синтаксис
Описание
Если мы не хотим, чтобы гиперссылка переходила на другую страницу или перезагружала ту же страницу. Используя ключевое слово javascript, мы можем запустить код JS для реализации изменений в поведении сети, таких как изменение цвета, стиля шрифта и т. д., используя его в тегах HTML (таких как теги привязки и т. д.).
Ключевое слово javascript в сочетании с void(0) означает, что ничего не делает, что означает отсутствие перезагрузки/навигации или запуска и выполнения кода.
В приведенном ниже примере слово «Это ничего не сделает» создается браузером как гиперссылка с использованием тега привязки, но оно не может перейти на другую страницу.
0 в качестве аргумента, переданного оператору void(), который ничего не делает и возвращает неопределенное значение. Как мы видели ранее, мы также можем передавать код JavaScript в качестве аргументов оператору void().
Код:
Вывод:
Предотвращение перезагрузки страницы с помощью JavaScript:void0
Ключевое слово void() указывает браузеру не возвращать ничего или неопределенное значение.
Использование ссылок с ключевым словом javascript:void(0) , потому что иногда ссылка может запускать код JavaScript (например, изменение цвета фона, размера шрифта и т. д. при нажатии на гиперссылку) в фоновом режиме, но это позволяет избежать ненужной навигации/перенаправления на другие страницы. В этом случае выражения будут использоваться в качестве аргументов (которые могут быть кодом Javascript, такими как методы селектора запросов и т. д.), переданными ключевому слову void().
Пример
Давайте на другом примере разберемся, что такое ключевое слово javascript:void(), как мы используем код Javascript в операторе void(), и он ничего не возвращает и т. д.
Используя ключевое слово javascript:void 0, мы делаем слово «Предотвращает повторную загрузку или переход на другие веб-сайты» кликабельной ссылкой с использованием тега привязки без перенаправления или перезагрузки страницы на https://scaler.com, или, другими словами, мы можем сказать, что это мертвая/пустая/нулевая ссылка.
Мы также использовали код Javascript в операторе void() для изменения цвета фона на серый с помощью метода queryselector().
Использование Javascript:Void 0 в Anchor Tag
Давайте лучше и кристально ясно разберемся с использованием javascript:void(0) на другом примере:
Пример:
Вывод:
Как видите, мы создали две гиперссылки с использованием тегов привязки, а именно «Я зеленая недействительная ссылка» и «Нажмите на ссылку».
Первая гиперссылка имеет код Javascript в своей операции void, который делает цвет гиперссылки зеленым без перенаправления/перехода куда-либо.
Во второй гиперссылке мы передаем javascript:void 0; затем следует ссылка на веб-сайт с атрибутом href. Здесь мы также используем атрибут onclick, который показывает окно предупреждения при нажатии на гиперссылку. При нажатии кнопки «ОК» и закрытии диалогового окна предупреждения страница не будет перенаправлена на указанную ссылку веб-сайта из-за используемого ключевого слова javascript:void 0.
Теперь давайте продолжим случай со второй гиперссылкой, где мы не используем javascript:void 0 в теге привязки, вместо этого давайте просто используем «#», как показано ниже:
Пример (с использованием «#» в теге привязки):
Вывод:
Используя «#» в теге привязки, мы не делаем «href» для какого-либо пути перенаправления, кроме как для владения той же страницей, аналогично тому, как работает концепция создания закладки на веб-странице. Другими словами, используя «#» в теге привязки, мы сделали неработающую ссылку.
Теперь давайте рассмотрим тот же пример, только используя javascript:void(0), как показано ниже:
Пример (с использованием «javascript:void(0)» в теге привязки):
Вывод:
Теперь из приведенных выше примеров мы можем сделать два вывода:
(i) Использование «javascript:void(0)» в теге привязки может предотвратить перезагрузку страницы, а функции JavaScript можно легко вызывать при одиночном или двойном щелчке при использовании «#», веб-страница перезагружается после закрытия окна предупреждения.
(ii) Использование «javascript:void(0)» в теге привязки занимает относительно меньше времени для выполнения, чем использование «#».
JavaScript:Void(0) Альтернативы
Существует несколько альтернатив (включая «#» в теге привязки) для javascript:void(0), а именно:
i) Использование .preventDefault():
Пример: 9 0020
Вывод:
ii) Использование return false:
Пример:
Вывод:
Как видно из обоих вышеприведенных методов, они дадут тот же результат, что и при использовании JavaScript:void(0).
Если мы не используем метод .preventDefault(), ссылка перенаправит нас по указанному пути.
Точно так же, если мы используем метод return false, щелчок возвращает false, и браузер не будет предпринимать никаких действий для навигации по другим страницам/избежания перезагрузки страницы.
Сравнивая эти два метода с точки зрения производительности, из их выходных снимков мы можем заметить, что .preventDefault() является относительно более быстрым методом, чем метод return false, и поддерживает бездействие системы в течение того же диапазона времени.
Совместимость браузера
Давайте взглянем на совместимость браузера void() с различными устройствами (мобильными, настольными и т. д.) и серверами, такими как Node.js, Deno и т. д.
Браузер | Мобильный | Рабочий стол | Сервер |
---|---|---|---|
Chrome | 18 | 1 | |
Firefox | 4 | 1 | |
Opera | 10.1 | 4 | |
Safari | 3 | 3.1 | |
Edge | 9022 4 12 | ||
Internet Explorer | 5 | ||
Deno | 1 | 90 220||
Node. js | 0.10.0 |
Обратите внимание, что выше приведены номера версий с соответствующим браузером о совместимости оператора void(), например, Chrome 1 означает, что оператор void поддерживается в Chrome для всех версий >=1.
Рекомендуется иметь в виду, что если мы используем современный браузер, поддерживающий JavaScript 1.8.5, использование ключевых слов undefined и void(0) приведет к одинаковым результатам, за исключением того, что void может принимать выражение в качестве аргумента и вычислять его. Принимая во внимание, что в старых браузерах, которые не поддерживают JavaScript 1.8.5, с точки зрения совместимости лучше использовать void(0) вместо undefined, поскольку undefined является глобальным свойством, которое можно изменить, присвоив ему любое значение.
Заключение
Ключевое слово javascript:void() оценивает выражение внутри него (включая код javascript), но ничего не делает.
Ключевое слово javascript:void() используется для предотвращения перезагрузки веб-страницы или перехода на другие страницы в браузере.
Ключевое слово javascript:void() ничего не возвращает или не имеет значения в качестве значения.
Есть альтернативы javascript:void() ключевые слова, такие как метод .preventDefault(), метод return false, использование «#» в теге привязки и т. д.
Метод javascript:void() относительно проще и быстрее, чем другие рассмотренные выше методы.
Мы также обсудили совместимость ключевого слова void() с различными браузерами, чтобы понять разницу между void() и undefined с точки зрения современных и старых браузеров с точки зрения поддержки Javascript 1.8.5.
Странные типы TypeScript: unknown, void, never, any, null и undefined io
TypeScript имеет очень сложную и мощную систему типов. Однако для некоторых она также представляет собой тайну в ее более глубоких чертах. Среди них особые типы могут быть причиной зависаний мозга для многих, поэтому давайте подробно рассмотрим, что они все означают.
Void
Тип void представляет собой отсутствие любого типа. В частности, он используется для описания возвращаемого значения функций, которые ничего не возвращают. Никакое значение не может быть присвоено переменной типа void, за исключением undefined
. Кроме того, если у вас нет параметра --strictNullChecks
, включенного в компиляторе TypeScript, вы, в принципе, также можете назначить null
для переменных void. Тем не менее, я настоятельно советую вам избегать этого и всегда иметь --strictNullChecks
включен, поскольку он обеспечивает более безопасное и предсказуемое поведение приложения. Кроме того, это позволяет вам меньше беспокоиться о том, следует ли вам проверять на недействительность.
Any
На противоположном конце спектра находится тип any, который представляет буквально любой тип. Переменной типа любой
может быть присвоено любое возможное значение, и она никогда не вызовет ошибки компиляции. Точно так же функция, которая возвращает или
, может возвращать произвольные объекты, атомарные значения или даже ничего, и все равно будет действительна. Кроме того, вы можете всегда обращаются к произвольным свойствам и методам из переменной любого типа
без жалоб компилятора. С другой стороны, у вас нет гарантии, что фактическое значение, содержащееся там во время выполнения, будет соответствовать вашим ожиданиям. Работа с или
иногда неизбежна, особенно при работе с библиотеками, написанными на чистом javascript или с родными привязками. В то же время я не рекомендую замалчивать предупреждения. Если возможно, получите определение типа для сторонних библиотек из репозиториев типов, таких как DefinitelyTyped, или напишите свои объявления типов самостоятельно.
Unknown
Неизвестный тип похож на any
тем, что он также представляет тип, который априори неизвестен. Однако он ведет себя несколько иначе, чем любой
:
- любое значение может быть присвоено переменной типа
неизвестно
или возвращено из функции, объявленной с типом возвратанеизвестно
; - однако, в то время как
любой
может быть назначен без предупреждений или ошибок любому другому типу,неизвестен
не может и вызовет ошибку компиляции; - Кроме того, если вы попытаетесь получить доступ к какому-либо свойству или методу переменной
неизвестного типа
, компилятор укажет на это как на ошибку.
unknown
безопаснее для США, чем any
, поскольку он ограничивает все операции, которые вы можете выполнять с переменными и возвращаемыми значениями. Мне также нравится думать о unknown
как о «мне все равно, какого это типа» и нахожу его особенно полезным для определения обратных вызовов.