Серия: Как понять и использовать JavaScript и TypeScript
Типы лежат в основе TypeScript и придают ему сверхсилу. Чем лучше мы понимаем, как и когда использовать типы, тем лучше мы, как разработчики, можем использовать TypeScript. Ниже приведены 10 наиболее распространенных вариантов использования типов в TypeScript.
Введите аннотации к переменным
При объявлении переменной мы также можем опционально дать ей аннотацию типа.
const message: string = “hello”
Аннотации типов параметров
При определении сигнатуры функции вы можете при желании задать параметру аннотацию типа. В приведенном ниже примере функция «print» имеет параметр с именем «значение», который был снабжен аннотацией типа «строка».
function print(value: string) {
console.log("the value passed in is", value)
}
Аннотации типов объектов
При определении объекта вы можете указать каждому свойству необязательный тип. Это можно использовать для определения параметров типа объекта для функций. Это не работает при создании объектной переменной.
function print(value: { name: string, title: string }) {
console.log("the value passed in is", value)
}
Мы также можем дать определение типа объекта в виде псевдонима типа или интерфейса, который немного отличается. Мы коснемся их в ближайшее время.
Аннотации типов объединения
В TypeScript мы можем комбинировать использование отдельных типов при аннотировании значения, чтобы разрешить использование различных типов значений в нашем коде. Хорошей практикой является определение того, какой тип параметра был получен в нашем коде и соответствующей функциональности ветвления. Это называется Защита типов, мы обсудим это в отдельной статье. В приведенном ниже примере параметр «value» представляет собой аннотацию Union Type. «Значение» может быть типа «число» или «строка».
function print(value: number | string) {
console.log("the value passed in is: " + value);
}
Аннотации возвращаемого типа
В отличие от JavaScript, мы можем объявить, будем ли мы получать возвращаемое значение или нет, и мы можем объявить, каким будет тип этого возвращаемого значения.
Вот пример функции, которая возвращает значение. Значение будет иметь тип «число».
function getTheNumberOne(): number {
return 1;
}
Вот пример функции, которая не возвращает значение. Void — это тип, используемый для объявления того, что значение не будет возвращено.
function printHelloWorld(): void {
console.log('Hello World!')
}Псевдонимы типов
Если вы однажды объявили объектный тип, скажем, в качестве параметра функции, а теперь снова его используете. Самое время подумать об использовании псевдонимов типов.
В следующем примере вы увидите, что мы не можем использовать примитивные типы, но мы можем использовать в них объединенные типы и мы можем использовать необязательные свойства как показано со свойством «имя».
type Point = {
x: number | string;
y: number | string;
name?: string
};
Псевдонимы типов не обязательно должны быть типами объектов, их можно использовать с любым типом.
type identifier = number | string;
Интерфейсы
Интерфейсы похожи на Псевдонимы типов, они часто взаимозаменяемы, но есть несколько отличий. Наиболее важным из них является то, что Псевдонимы типов нельзя изменить сразу после их объявления. Вы можете расширить их через то, что называется «пересечением».
Ниже приведен пример расширения Interface.
interface Car {
motor: boolean
}
interface Truck extends Car {
flatbed: boolean
}
const truck = getTruck()
truck.motor
truck.flatbed
А вот пример расширения Псевдоним типа.
type Car {
motor: boolean
}
type Truck = Car & {
flatbed: boolean
}
const truck = getTruck()
truck.motor
truck.flatbed
И, наконец, вот пример, где мы добавляем новые свойства в Интерфейс.
interface Car {
make: string;
}
interface Car {
model: string;
}
const truck: Car = {
make: "ford",
model: "escort",
};
Утверждения типа
Иногда вы будете знать что-то о значении, чего не может знать TypeScript. В таких ситуациях вы можете использовать утверждение типа, чтобы указать, какого типа должно быть значение. Вот два способа объявить утверждения типов.
// Standard Notation
const hello = "hello" as string;
console.log("the string contains : " + hello);
// Angular Notation
let bye = "goodbye";
const goodbye = <string>bye;
console.log("the string contains : " + goodbye)
Типы литералов
Помимо примитивных и объектных типов, псевдонимов типов и интерфейсов, у нас также могут быть определенные числа и строки в качестве типа. Такой как…
const hello: "hello" = "hello"
Поначалу это может показаться глупым, но может оказаться полезным, когда вы думаете о фиксированных значениях, которые можно использовать в комбинации для ограничения возможных значений параметра или свойства. Отличным примером может быть ограничение возможных значений, кроме параметра функции.
function printNumberOne(number: "one" | 1) {
console.log("The number is", number)
}
В приведенном выше примере вы, возможно, заметили, что мы смешали литеральные примитивные типы в типе объединения. Вы также можете смешивать литеральные типы между псевдонимами типов и примитивными типами.
Вы также можете использовать литеральные типы в аннотации возвращаемого типа.
Буквальные выводы
Если переменная объявлена с const, но не имеет аннотации типа или утверждения типа, TypeScript определит ее тип.
const URL = "https://www.example.com"
В приведенном выше примере переменная объявлена как неизменяемая, и поэтому предполагается, что она имеет не тип string, а тип string literal type. Это может быть полезно при передаче значений функциям, в которых используются литеральные типы.
В моей следующей статье под названием «Как TypeScript работает с нулевыми значениями JavaScript и неопределенными значениями». Мы узнаем, как TypeScript использует эти значения и как мы можем использовать их соответствующие типы TypeScript для написания лучшего кода.
Надеюсь, вы нашли эту статью понятной и информативной. Пожалуйста, продолжайте возвращаться в этот блог, чтобы узнать больше о тонкостях, сложностях и нюансах JavaScript и TypeScript. Как всегда, оставьте комментарий и дайте мне знать, если что-то нужно добавить, вычесть или исправить.
