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