() translation by (you can also view the original English article)
После прочтения вводного учебника TypeScript теперь вы можете написать собственный код TypeScript в среде IDE, которая его поддерживает, а затем скомпилировать его в JavaScript. В этом уроке вы узнаете о различных типах данных, доступных в TypeScript.
JavaScript имеет семь разных типов данных: Null, Undefined, Boolean, Number, String, Symbol (введено в ES6) и Object. TypeScript определяет еще несколько типов, и все они будут подробно рассмотрены в этом руководстве.
Тип данных Null
Как и в JavaScript, тип данных null в TypeScript может иметь только одно допустимое значение: null. Нулевая переменная не может содержать другие типы данных, такие как число и строка. Установка переменной в значение null приведет к удалению ее содержимого, если оно есть.
Помните, что когда флаг strictNullChecks установлен в true в tsconfig.json, только значение null присваивается переменным с нулевым типом. Этот флаг отключен по умолчанию, а это означает, что вы также можете присвоить значение null переменным другим типам, например number или void.
1 |
// With strictNullChecks set to true
|
2 |
let a: null = null; // Ok |
3 |
let b: undefined = null; // Error |
4 |
let c: number = null; // Error |
5 |
let d: void = null; // Error |
6 |
|
7 |
// With strictNullChecks set to false
|
8 |
let a: null = null; // Ok |
9 |
let b: undefined = null; // Ok |
10 |
let c: number = null; // Ok |
11 |
let d: void = null; // Ok |
Undefined тип данных
Любая переменная, значение которой вы не указали, имеет значение undefined. Тем не менее, вы также можете явно указать тип переменной в undefined, как в следующем примере.
Имейте в виду, что переменная с типом type, установленная в undefined, может иметь только неопределенное значение. Если для параметра strictNullChecks установлено значение false, вы также сможете назначать undefined переменные с числами, строками и т.д.
1 |
// With strictNullChecks set to true
|
2 |
let a: undefined = undefined; // Ok |
3 |
let b: undefined = null; // Error |
4 |
let c: number = undefined; // Error |
5 |
let d: void = undefined; // Ok |
6 |
|
7 |
// With strictNullChecks set to false
|
8 |
let a: undefined = undefined; // Ok |
9 |
let b: undefined = null; // Ok |
10 |
let c: number = undefined; // Ok |
11 |
let d: void = undefined; // Ok |
Тип данных Void
Тип данных void используется для обозначения отсутствия type у переменной. Установка переменных, имеющих тип void, может быть не очень полезной, но вы можете установить возвращаемый тип функций, которые ничего не возвращают в void. При использовании с переменными тип void может иметь только два допустимых значения: null и undefined.
1 |
// With strictNullChecks set to true
|
2 |
let a: void = undefined; // Ok |
3 |
let b: void = null; // Error |
4 |
let c: void = 3; // Error |
5 |
let d: void = "apple"; // Error |
6 |
|
7 |
// With strictNullChecks set to false
|
8 |
let a: void = undefined; // Ok |
9 |
let b: void = null; // Ok |
10 |
let c: void = 3; // Error |
11 |
let d: void = "apple"; // Error |
Тип данных Boolean
В отличие от типов данных number и string, boolean имеет только два допустимых значения. Вы можете установить только его значение как true, так и false. Эти значения много используются в структурах управления, где выполняется один кусок кода, если условие true, а другой фрагмент кода выполняется, если условие false.
Вот очень простой пример объявления булевых переменных:
1 |
let a: boolean = true; |
2 |
let b: boolean = false; |
3 |
let c: boolean = 23; // Error |
4 |
let d: boolean = "blue"; // Error |
Тип данных number
Тип данных number используется для представления как целых чисел, так и значений с плавающей запятой в JavaScript, а также TypeScript. Однако вы должны помнить, что все числа внутренне представлены как значения с плавающей запятой. Числа также могут быть указаны как шестнадцатеричные, восьмеричные или двоичные литералы. Имейте в виду, что в ES6 были введены восьмеричные и двоичные представления, и это может привести к разному коду JavaScript в зависимости от версии, на которую вы нацелены.
Существуют также три дополнительных символьных значения, которые подпадают под тип number: + Infinity, -Infinity и NaN. Вот несколько примеров использования типа number.
1 |
// With strictNullChecks set to true |
2 |
let a: number = undefined; // Error |
3 |
let b: number = null; // Error |
4 |
let c: number = 3; |
5 |
let d: number = 0b111001; // Binary |
6 |
let e: number = 0o436; // Octal |
7 |
let f: number = 0xadf0d; // Hexadecimal |
8 |
let g: number = "cat"; // Error |
9 |
|
10 |
// With strictNullChecks set to false |
11 |
let a: number = undefined; // Ok |
12 |
let b: number = null; // Ok |
13 |
let c: number = 3; |
14 |
let d: number = 0b111001; // Binary |
15 |
let e: number = 0o436; // Octal |
16 |
let f: number = 0xadf0d; // Hexadecimal |
17 |
let g: number = "cat"; // Error |
Когда целевая версия установлена на ES6, вышеуказанный код будет скомпилирован в следующий JavaScript:
1 |
let a = undefined; |
2 |
let b = null; |
3 |
let c = 3; |
4 |
let d = 0b111001; |
5 |
let e = 0o436; |
6 |
let f = 0xadf0d; |
7 |
let g = "cat"; |
Следует отметить, что переменные JavaScript все еще объявляются с помощью let, который был введен в ES6. Вы также не видите сообщений об ошибках, связанных с type разных переменных, потому что код JavaScript не знает типы, которые мы использовали в коде TypeScript.
Если для целевой версии установлено значение ES5, код, написанный ранее, будет скомпилирован следующим образом:
1 |
var a = undefined; |
2 |
var b = null; |
3 |
var c = 3; |
4 |
var d = 57; |
5 |
var e = 286; |
6 |
var f = 0xadf0d; |
7 |
var g = "cat"; |
Как вы можете видеть, на этот раз все вхождения ключевого слова let были изменены на var. Также обратите внимание, что восьмеричные и двоичные числа были изменены на их десятичные формы.
Тип данных string
Строковый тип данных используется для хранения текстовой информации. И JavaScript, и TypeScript используют двойные кавычки ("), а также одинарные кавычки ('), чтобы окружать текстовую информацию в виде строки. Строка может содержать ноль или более символов, заключенных в кавычки.
1 |
// With strictNullChecks set to true
|
2 |
let a: string = undefined; // Error |
3 |
let b: string = null; // Error |
4 |
let c: string = ""; |
5 |
let d: string = "y"; |
6 |
let e: string = "building"; |
7 |
let f: string = 3; // Error |
8 |
let g: string = "3"; |
9 |
|
10 |
// With strictNullChecks set to false
|
11 |
let a: string = undefined; // Ok |
12 |
let b: string = null; // Ok |
13 |
let c: string = ""; |
14 |
let d: string = "y"; |
15 |
let e: string = "building"; |
16 |
let f: string = 3; // Error |
17 |
let g: string = "3"; |
TypeScript также поддерживает шаблонные строки или литералы шаблонов. Эти шаблонные литералы позволяют вставлять выражения в строку. Буквы шаблонов заключаются в обратном тике (`) вместо двойных кавычек и одинарных кавычек, которые заключают обычные строки. Они были представлены в ES6. Это означает, что вы получите разный JavaScript в зависимости от версии, на которую вы нацеливаете. Ниже приведен пример использования шаблонных литералов в TypeScript:
1 |
let e: string = "building"; |
2 |
let f: number = 300; |
3 |
|
4 |
let sentence: string = `The ${e} in front of my office is ${f} feet tall.`; |
После компиляции вы получите следующий JavaScript:
1 |
// Output in ES5
|
2 |
var e = "building"; |
3 |
var f = 300; |
4 |
var sentence = "The " + e + " in front of my office is " + f + " feet tall."; |
5 |
|
6 |
// Output in ES6
|
7 |
let e = "building"; |
8 |
let f = 300; |
9 |
let sentence = `The ${e} in front of my office is ${f} feet tall.`; |
Как вы можете видеть, литерал шаблона был изменен на обычную строку в ES5. В этом примере показано, как TypeScript позволяет использовать все последние функции JavaScript, не беспокоясь о совместимости.
Типы данных Array и Tuple
Вы можете определять типы массивов двумя способами в JavaScript. В первом методе вы указываете тип элементов массива, за которым следует [], который обозначает массив этого типа. Другим методом является использование типа массива типа Array<elemType>. В следующем примере показано, как создавать массивы с помощью обоих этих методов. Указание null или undefined как один из элементов приведет к ошибкам, когда флаг strictNullChecks имеет значение true.
1 |
// With strictNullChecks set to false
|
2 |
let a: number[] = [1, 12, 93, 5]; |
3 |
let b: string[] = ["a", "apricot", "mango"]; |
4 |
let c: number[] = [1, "apple", "potato"]; // Error |
5 |
|
6 |
let d: Array<number> = [null, undefined, 10, 15]; |
7 |
let e: Array<string> = ["pie", null, ""]; |
8 |
|
9 |
|
10 |
// With strictNullChecks set to true
|
11 |
let a: number[] = [1, 12, 93, 5]; |
12 |
let b: string[] = ["a", "apricot", "mango"]; |
13 |
let c: number[] = [1, "apple", "potato"]; // Error |
14 |
|
15 |
let d: Array<number> = [null, undefined, 10, 15]; // Error |
16 |
let e: Array<string> = ["pie", null, ""]; // Error |
Тип данных кортежа позволяет создать массив, в котором тип некоторых элементов заранее известен. Тип остальных элементов может быть только одним из типов, которые вы уже указали для кортежа. Вот пример, который это прояснит:
1 |
let a: [number, string] = [11, "monday"]; |
2 |
let b: [number, string] = ["monday", 11]; // Error |
3 |
let c: [number, string] = ["a", "monkey"]; // Error |
4 |
let d: [number, string] = [105, "owl", 129, 45, "cat"]; |
5 |
let e: [number, string] = [13, "bat", "spiderman", 2]; |
6 |
|
7 |
e[13] = "elephant"; |
8 |
e[15] = false; // Error |
Для всех кортежей в нашем примере мы установили type первого элемента в number и type второго элемента в string. Поскольку мы указали только type для первых двух элементов, остальные из них могут быть либо строкой, либо числом. Создание кортежей b и c приводит к ошибке, потому что мы пытались использовать строку как значение для первого элемента, когда мы упоминали, что первым элементом будет число.
Аналогично, мы не можем установить значение элемента tuple в false после указания, что оно будет содержать только строки и числа. Вот почему последняя строка приводит к ошибке.
Тип данных Enum
Тип данных enum присутствует во многих языках программирования, таких как C и Java. Он отсутствовал в JavaScript, но TypeScript позволяет создавать и работать с перечислениями. Если вы не знаете, что такое enums, они позволяют создавать коллекцию связанных значений, используя запоминающиеся имена.
1 |
enum Animals {cat, lion, dog, cow, monkey} |
2 |
let c: Animals = Animals.cat; |
3 |
|
4 |
console.log(Animals[3]); // cow |
5 |
console.log(Animals.monkey); // 4 |
По умолчанию нумерация перечислений начинается с 0, но вы также можете установить другое значение для первого или любых других членов вручную. Это изменит значение всех членов, следующих за ними, увеличив их значение на 1. Вы также можете установить все значения в enum вручную.
1 |
enum Animals {cat = 1, lion, dog = 11, cow, monkey}
|
2 |
let c: Animals = Animals.cat; |
3 |
|
4 |
console.log(Animals[3]); // undefined |
5 |
console.log(Animals.monkey); // 13 |
В отличие от предыдущего примера, значение Animals[3] на этот раз не undefined. Это связано с тем, что значение 3 было присвоено собаке, но мы явно установили его значение равным 11. Значение для коровы остается равным 12, а не 3, потому что значение должно быть больше, чем значение последнего члена.
Типы Any и Never
Допустим, вы пишете программу, где значение переменной определяется пользователями или кодом, написанным в сторонней библиотеке. В этом случае вы не сможете правильно установить тип этой переменной. Переменная может быть любого типа, такого как строка, число или логическое значение. Эту проблему можно решить, используя тип any. Это также полезно, когда вы создаете массивы с элементами смешанных типов.
1 |
let a: any = "apple"; |
2 |
let b: any = 14; |
3 |
let c: any = false; |
4 |
let d: any[] = ["door", "kitchen", 13, false, null]; |
5 |
|
6 |
b = "people"; |
В приведенном выше коде нам удалось присвоить число переменной b, а затем изменить ее значение на строку без какой-либо ошибки, потому что тип any может принимать все типы значений.
Тип never не используется для представления значений, которые никогда не должны возникать. Например, вы можете назначить тип never в качестве возвращаемого значения функции, которая никогда не возвращается. Это может произойти, когда функция всегда выдает ошибку или когда она застревает в бесконечном цикле.
1 |
let a: never; // Ok |
2 |
let b: never = false; // Error |
3 |
let c: never = null; // Error |
4 |
let d: never = "monday"; // Error |
5 |
|
6 |
function stuck(): never { |
7 |
while (true) { |
8 |
}
|
9 |
}
|
Заключение
В этом учебном пособии представлены все типы, доступные в TypeScript. Мы узнали, как присвоение переменной значения другого типа приводит к ошибкам в TypeScript. Эта проверка поможет вам избежать множества ошибок при написании больших программ. Мы также узнали, как настроить различные версии JavaScript.
Если вы ищете дополнительные ресурсы для изучения или использования в своей работе, посмотрите, что у нас есть на рынке Envato.
В следующем уроке вы узнаете о интерфейсах в TypeScript. Если у вас есть какие-либо вопросы, связанные с этим учебным курсом, дайте мне знать в комментариях.
