14) Учебник по TypeScript

Ниже приведены типы:

• Число
• строка
• логический
• Любые
• пустота

Число:

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

Синтаксис:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

Вот несколько важных методов, которые можно использовать в типах Number:

toFixed () — он преобразует число в строку и сохранит десятичные разряды, присвоенные методу.

toString () — этот метод преобразует число в строку.

valueOf () — этот метод вернет примитивное значение числа.

toPrecision () — этот метод отформатирует число до указанной длины.

Пример: со всеми методами String

let _num :number = 10.345;
_num.toFixed(2); // "10.35"
_num.valueOf(); // 10.345
_num.toString(); // "10.345"
_num.toPrecision(2); //"10"

строка

Строка: только строковые значения

Синтаксис:

let str :string = "hello world";

Вот несколько важных методов, которые можно использовать в типах String:

• split () — этот метод разбивает строку на массив.
• charAt () — этот метод выдаст первый символ для заданного индекса.
• indexOf () — этот метод выдаст позицию первого вхождения для заданного ему значения.
• Replace () — этот метод принимает 2 строки, сначала значение для поиска в строке, и, если оно присутствует, заменит его, будет 2-е и вернет новую строку.
• Trim () — этот метод удалит пробелы с обеих сторон строки.
• substr () — этот метод даст часть строки, которая будет зависеть от позиции, заданной как начало и конец.
• substring () — этот метод даст часть строки, которая будет зависеть от позиции, заданной как начало и конец. Символ в конечной позиции будет исключен.
• toUpperCase () — преобразует строку в верхний регистр
• toLowerCase () — преобразует строку в нижний регистр.

Пример:

let _str:string = "Typescript";

_str.charAt(1); // y
_str.split(""); //["T", "y", "p", "e", "s", "c", "r", "i", "p", "t"]
_str.indexOf("s"); //4 , gives -1 is the value does not exist in the string.
_str.replace("Type", "Coffee"); //"Coffeescript"
_str.trim(); //"Typescript"
_str.substr(4, _str.length); //"script"
_str.substring(4, 10); //"script"
_str.toUpperCase();//"TYPESCRIPT"
_str.toLowerCase();//"typescript"

логический

Примет логические значения, такие как true, false, 0 и 1.

Синтаксис:

let bflag :boolean = 1;
let status :boolean = true;

Любые

Синтаксис:

let a :any = 123
a = "hello world"; // changing type will not give any error.

Переменные, объявленные с использованием любого типа, могут принимать переменную как строку, число, массив, логическое значение или значение void. Typescript не выдаст никакой ошибки во время компиляции; это похоже на переменные, объявленные в JavaScript. Используйте любую переменную типа, только если вы не уверены в типе значения, которое будет связано с этой переменной.

пустота

Тип Void чаще всего используется в качестве возвращаемого типа для функции, которой не нужно ничего возвращать.

Синтаксис:

function testfunc():void{
 //code here
}

Массив — это тип данных в машинописи, в котором вы можете хранить несколько значений. Давайте узнаем, как объявлять и назначать значения для массива.

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

Объявите и инициализируйте массив

Синтаксис:

let nameofthearray : Array<typehere>

пример

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; //array with string and numbers mixed.

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

Различные способы доступа к элементам из массива

Чтобы получить элементы из массива, значения начинаются с индекса 0 до длины массива.

Пример:

let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers			
years[0]; // output will be 2016			
years[1]; // output will be 2017			
years[2]; // output will be 2018			
years[3]; // output will be 2019

Вы также можете получить элементы из массива, используя цикл for, как показано ниже:

Использование для цикла

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i=0;i<=years.length; i++) {
     console.log(years[i]);
}
Output:
2016
2017
2018
2019

Использование цикла for-in

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i in years) {
     console.log(years[i])
}

Output:
2016
2017
2018
2019

Использование for-of loop

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let  i of years) {
     console.log(i)
}
Output:
2016
2017
2018
2019

Использование цикла foreach

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
years.forEach(function(yrs, i) {
  console.log(yrs);
});
Output:
2016
2017
2018
2019

Объект Typescript Array имеет множество свойств и методов, которые помогают разработчикам легко и эффективно обрабатывать массивы. Вы можете получить значение свойства, указав arrayname.property и выходные данные метода, указав массив name.method ().

свойство длины

=> Если вы хотите узнать количество элементов в массиве, вы можете использовать свойство length.

Обратный метод

=> Вы можете изменить порядок элементов в массиве с помощью обратного метода.

Метод сортировки

=> Вы можете сортировать элементы в массиве, используя метод сортировки.

Поп-метод

=> Вы можете удалить последний элемент массива, используя метод pop.

Метод сдвига

=> Вы можете удалить первый элемент массива, используя метод shift.

Толчок метод

=> Вы можете добавить значение в качестве последнего элемента массива.

метод конкат

=> Вы можете объединить два массива в один элемент массива.

Пример для свойства length

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.length);  // 12

Пример обратного метода:

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.reverse());  //  ["Dec", "Nov", "Oct", "Sept", "Aug", "July", "June", "May", "April", "March", "Feb", "Jan"]

Пример для метода сортировки:

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.sort()); // ["April", "Aug", "Dec", "Feb", "Jan", "July", "June", "March", "May", "Nov", "Oct", "Sept"]

Пример для метода pop:

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.				

console.log(months.pop()); //Dec

Пример для метода смены:

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.			

console.log(months.shift()); // Jan

Пример для метода push:

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
years.forEach(function(yrs, i) {			
  console.log(yrs); // 2015 , 2016,2017, 2018, 2019,2020				
});

Пример для метода concat:

let array1: Array<number> = [10, 20, 30]; 			
let array2: Array<number> = [100, 200, 300];			
console.log(array1.concat(array2)); //[10, 20, 30, 100, 200, 300]

Typescript — это расширенный набор JavaScript, поэтому все, что можно сделать в JavaScript, также возможно в typcript. Класс — это новая функция, добавленная начиная с ES6, поэтому ранее в JavaScript была использована функция типа класса с использованием функции с функциональностью прототипа для повторного использования кода. Используя класс, вы можете иметь наш код почти близким к языкам, таким как java, c #, python и т. Д., Где код можно использовать повторно. Благодаря функции класса в Typescript / JavaScript это делает язык очень мощным.

Вот основной синтаксис класса в машинописи:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class
}

Пример: рабочий пример класса

class Students {
    age : number;
    name : string;
    roll_no : number;
    
    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
} 

В приведенном выше примере у вас есть класс, который называется «Студенты». У него есть свойства age, name и roll_no.

Конструктор в классе Typescript

Пример класса Студенты, который мы определили выше, имеет конструктор, как показано ниже:

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

Метод конструктора имеет параметры age, name и roll_no. Конструктор позаботится об инициализации свойств при вызове класса. Свойства доступны с помощью этого ключевого слова. Пример this.age для доступа к свойству age, this.roll_no для доступа к roll_no и т. Д. У вас также может быть конструктор по умолчанию, как показано ниже:

constructor () {}

Методы внутри класса Typescript

В примере «Студенты» есть методы, определенные, например, getRollNo (), getName (), getAge (), которые используются для предоставления сведений о свойствах roll_no, name и age.

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

Создание экземпляра класса в Typescript

Пример:

В машинописи для создания экземпляра класса необходимо использовать оператор new. Когда мы создаем экземпляр класса с помощью оператора new, мы получаем объект, который может получить доступ к свойствам и методам класса, как показано ниже:

let student_details = new Students(15, "Harry John", 33);
student_details.getAge(); // 15
student_details.getName(); // Harry John

Компиляция класса Typescript в JavaScript

Вы можете использовать команду tsc, как показано ниже, для компиляции в Javascript.

Команда: tsc Students.ts

Вывод кода Javascript при компиляции выглядит так:

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

В Javascript Класс преобразуется в функцию, вызываемую самостоятельно.

Наследование классов

Классы могут быть унаследованы с помощью расширения ключевых слов в машинописи.

Синтаксис наследования классов:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

класс B сможет совместно использовать методы и свойства класса A.

Вот рабочий пример класса, использующего Inheritance

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge(); // output is 24
_std1.setMarks(500);
_std1.getMarks(); // output is 500

У вас есть два класса, человек и студент. Класс Student расширяет Person, и объект, созданный в Student, может получить доступ к своим собственным методам и свойствам, а также к классу, который он расширил.

Теперь давайте добавим еще несколько изменений в вышеприведенный класс.

Пример:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge(); // output is 24
_std1.getMarks(); // output is 500

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

В машинописи вам нужно назвать супер волю всех параметров как базовых параметров в нем. Это должно быть первым делом внутри конструктора. Супер выполнит конструктор расширенного класса.

Typescript поддерживает публичные, приватные и защищенные модификаторы доступа к вашим методам и свойствам. По умолчанию, если модификаторы доступа не заданы, метод или свойство считается общедоступным, и они будут легко доступны из объекта класса.

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

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

Пример:

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is "+ this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);  
        this.tmarks = tmarks;    
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }
    
    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks(); // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails(); // output is Name is Sheena

• Частные свойства или методы не могут быть доступны как объектом класса, так и производным классом, они предназначены для внутреннего использования внутри класса.
• Защищенные свойства и методы также не могут быть доступны для созданного объекта. Они доступны внутри класса и доступны классу, расширяющему его.
• Открытые свойства и методы объявляются без каких-либо ключевых слов. К ним легко получить доступ с помощью объекта класса извне.

Одна из основных особенностей Typescript — это интерфейсы. Интерфейс — это набор определенных правил, которые должны быть реализованы объектом, использующим его. Сущность может быть классом, функцией или переменной. Интерфейс может быть составлен из свойств и методов. Вы можете определить свойства как необязательные, используя «?» синтаксис для этого свойства или метода. Интерфейс добавляет строгую проверку типа для любой функции, переменной или класса, реализующего интерфейс.

Синтаксис интерфейса в Typescript:

interface Dimension {
    width: string;
    height: string;
}

Вы определили интерфейс с именем Dimension, который имеет свойства width и height, и оба имеют тип в виде строки.

Теперь этот интерфейс может быть реализован с помощью переменной, функции или класса. Вот пример переменной, реализующей интерфейс Dimension.

Пример:

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

Подпись интерфейса Dimension имеет ширину и высоту, и оба являются обязательными. В случае, если при реализации интерфейса какое-либо свойство будет пропущено или тип будет изменен, это приведет к ошибке времени компиляции при компиляции кода в javascript.

Приведенный выше код при компиляции в javascript выглядит следующим образом:

var _imagedim = {
    width: "100px",
    height: "200px"
};

Давайте теперь посмотрим, как использовать интерфейс с функцией.

Использование интерфейса в функции в качестве типа возврата

Пример:

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

В приведенном выше примере интерфейс Dimension реализован в функции getDimension () в качестве возвращаемого типа. Тип возвращаемого значения getDimension () должен соответствовать свойствам и типам, указанным для Interface Dimension.

Скомпилированный код для Javascript будет выглядеть следующим образом:

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

Во время компиляции, если тип возвращаемого значения не совпадает с интерфейсом, он выдаст ошибку.

Интерфейс как функциональный параметр

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width +"-"+ dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // will get "300px-250px" 

Итак, в приведенном выше примере вы использовали Interface Dimension в качестве параметра функции getDimension (). При вызове функции необходимо убедиться, что переданный ей параметр соответствует определенному правилу интерфейса.

Скомпилированный код для Javascript будет выглядеть следующим образом:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

Интерфейс реализации класса

Чтобы использовать интерфейс с классом, вам нужно использовать ключевое слово Implements .

Синтаксис для класса, реализующего интерфейс:

class NameofClass implements InterfaceName {
}

Следующий пример показывает работу интерфейса с классом.

interface Dimension {
    width : string,
    height: string,
    getWidth(): string; 
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

В приведенном выше примере вы определили интерфейс Dimension со свойствами width и height как типа string, так и метода getWidth (), который возвращает значение в виде строки.

Скомпилированный код для Javascript будет выглядеть следующим образом:

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

Функции — это набор инструкций, выполняемых для выполнения задачи. В Javascript большая часть кода написана в виде функций и играет важную роль. В машинописи у вас есть класс, интерфейсы, модули, пространства имен, но функции все же играют важную роль. Разница между функцией в javascript и функцией typcript заключается в типе возвращаемого значения, доступного в функции typcript.

Функция JavaScript:

function add (a1, b1) { 
   return a1+b1;
}

Функция машинописи:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

В вышеприведенных функциях добавляется имя функции, параметры a1 и b1 оба имеют тип в виде числа, а возвращаемый тип также является числом. Если вам случится передать строку в функцию, она сгенерирует ошибку во время компиляции при компиляции в JavaScript.

Выполнение вызова функции: добавить

let  x = add(5, 10) ;  // will return 15
let  b = add(5); // will throw an error : error TS2554: Expected 2 arguments, but got 1.
let c = add(3,4,5); // will throw an error : error TS2554: Expected 2 arguments, but got 3.
let t = add("Harry", "John");// will throw an error :  error TS2345: Argument of type '"Harry"' is not assignable to parameter of type 'number'.

Параметры a1 и b1 являются обязательными параметрами и выдают ошибку, если не получены таким образом. Кроме того, тип параметра и тип возвращаемого значения очень важны и не могут быть изменены после определения.

Необязательные параметры для функции

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

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John"); // will return Johnundefined.
let b = getName("John", "Harry"); // will return JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3.

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

Назначить значения по умолчанию для параметров

Вы можете назначить значения по умолчанию для параметров, как показано ниже:

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John"); // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

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

Остальные параметры

Вы видели, как машинопись обрабатывает обязательные параметры, необязательные параметры и инициализированные значения по умолчанию. Теперь рассмотрим остальные параметры. Остальные параметры — это группа необязательных параметров, определенных вместе, и они определяются с использованием трех точек (…), за которыми следует имя параметра, которое является массивом.

Синтаксис для остальных параметров:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

Как показано выше, остальные параметры определяются с помощью (… param-name); остальной параметр — это массив с префиксом из трех точек. В массиве будут переданы все параметры. Вы можете вызвать функцию, как показано в примере ниже:

Пример:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday"); // will get output as MondayTuesdayWednesdayThursday

Стрелка Функции

Функция со стрелкой является одной из важных функций, выпущенных в ES6, и она также доступна в машинописи. Синтаксис функции стрелки имеет жирную стрелку, из-за которой функция называется функцией стрелки.

Функция стрелки Синтаксис:

var nameoffunction = (params) => {				
 // code here			
}

Какая польза от функции стрелки?

Давайте рассмотрим пример, чтобы понять пример использования функции Arrow:

Пример :

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined.    
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

Вы создали анонимную функцию, которая имеет свойство this. Инициализируйте счет до 0 и используйте метод getScore, который внутренне имеет setTimeout, и через 1 секунду он утешает this.score. Консольное значение дает неопределенное значение, хотя this.score определен и инициализирован. Вопрос здесь с й это ключевым словом. Функция внутри setTimeout имеет свое собственное this, и она пытается ссылаться на счет внутри, и, поскольку она не определена, она выдает undefined.

То же самое можно сделать, используя функцию стрелки, как показано ниже:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

Вы изменили функцию внутри setTimeout на функцию стрелки, как показано ниже:

setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);

Функция стрелки не имеет своего собственного определения this и разделяет его родительский объект this , поэтому переменные, объявленные извне, легко доступны с помощью этого внутри функции стрелки. Они полезны из-за более короткого синтаксиса, а также для обратных вызовов, обработчиков событий, внутренних функций синхронизации и т. Д.

Перечисление — это объект, который имеет коллекцию связанных значений, хранящихся вместе. Javascript не поддерживает перечисления. Большинство языков программирования, таких как java, c, c ++, поддерживают enum и также доступны с машинописью. Перечисления определяются с помощью ключевого слова enum.

Как объявить Enum?

Синтаксис:

enum NameofEnum {
   value1,
   value2,
    ..
}

Пример: Enum

enum Directions {
North,
South,
East,
West
}

В приведенном выше примере вы определили перечисление под названием Directions. Дано значение Север, Юг, Восток, Запад. Значения нумеруются от 0 для первого значения в перечислении и впоследствии увеличиваются на 1 для следующего значения.

Объявите Enum с числовым значением

По умолчанию, если перечислению не дано никакого значения, оно считает его числом, начинающимся с 0. В следующем примере показано перечисление с числовым значением.

enum Directions {
North = 0,
South = 1, 
East =2,
West =3
}

Вы также можете назначить начальное значение для перечисления, и следующие значения перечисления получат увеличенные значения. Например:

enum Directions {
North = 5,
South, // will be 6
East, // 7
West // 8
}

Теперь значение перечисления Север начинается с 5, поэтому Юг получит значение 6, Восток = 7 и Запад = 8.

Вы также можете назначить значения по вашему выбору вместо значений по умолчанию. Например:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

Как получить доступ к Enum?

Следующий пример показывает, как использовать Enum в вашем коде:

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North); // output is  0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]); //output is North

Скомпилированный код в javascript выглядит следующим образом:

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

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

Объявите Enum со строковым значением

Вы можете назначить строковые значения на ваш выбор, как показано в примере ниже:

Пример:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North); // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]); // output is North

Скомпилированный код в javascript выглядит следующим образом:

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

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

Зачем вам нужны модули в Typescript?

В следующем примере показана проблема без модулей:

Пример test1.ts

let age : number = 25;

Вы определили переменный возраст типа номер в test1.ts.

Пример test2.ts

В файле test2.ts вы легко можете получить доступ к переменной age, определенной в test1.ts, а также изменить ее, как показано ниже:

age = 30; // changed from 25 to 30.
let _new_age = age;

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

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

Использование экспорта и импорта

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

Синтаксис для импорта и экспорта 1:

export  nameofthevariable or class name or interface name etc

//To import above variable or class name or interface you have to use import as shown below:
 

Import {nameof thevariable or class name or interfacename} from "file path here without.ts"

Вот рабочий пример использования экспорта и импорта.

Пример:

test1.ts

export let age: number = 25;

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

test2.ts

import { age } from "./test1"
let new_age :number = age;

Ключевое слово Import используется для доступа к переменной age , и вам нужно указать местоположение файла, как показано выше.

Синтаксис для импорта и экспорта 2:

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

export = classname;

import classname = require(“file path of modulename”)

Когда вы используете export = для экспорта вашего модуля, импорт должен использовать require («путь к файлу modulename») для его импорта.

Вот рабочий пример, показывающий приведенный выше случай:

Customer.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

testCustomer.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

Модуль Загрузчик

Модули не могут работать сами по себе, поэтому вам нужен загрузчик модулей, чтобы найти зависимости импорта, как вы видели в примерах, показанных выше. Доступен загрузчик модулей CommonJS для nodejs и Require.js для запуска в браузере.

Для компиляции кода с использованием модуля CommonJS используйте следующую команду:

tsc --module commonjs testCustomer.ts

Чтобы скомпилировать код с помощью модуля Requirejs, используйте следующую команду:

tsc --module amd testCustomer.ts

Зависимые файлы будут преобразованы в файл js с помощью вышеуказанной команды.

Пример testCustomer.ts для testCustomer.js с использованием Requirejs

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Пример Customer.ts к Customer.js с использованием Requirejs

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

Чтобы проверить это с помощью require.js, вам нужно создать файл с именем main.js, который имеет ссылку на зависимости, как показано.

Вот структура папок:

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

main.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

test.html

<!DOCTYPE html>			
<html>			
<head>			
    <title>Typescript Module testing using Requirejs</title>			
    <script data-main="main" src="/require.js"></script>			
</head>			
<body>			
    <h3>Testing modules using Requirejs</h3>			
</body>			
</html>

Пространство имен в основном имеет совокупность классов, интерфейсов, переменных, функций вместе в одном файле.

Синтаксис пространства имен:

namespace name{

export class {
}

export interface {
}

export const constname;

}

Связанный код доступен в одном пространстве имен.

Пример рабочего пространства имен: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

Имя пространства имен — StudentSetup, вы добавили интерфейс StudDetails, функцию addSpace и класс с именем Student.

Доступ к пространству имен

Ниже приведен код, в котором вы используете пространство имен StudentSetup.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

Класс, интерфейс, функция, доступная внутри пространства имен, должна быть указана с использованием имени примера пространства имен. StudentSetup.addSpace для доступа к функции, StudentSetup.Student для доступа к классу.

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

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

Проверьте вывод в командной строке, используя следующую команду:

node namespace.js

Он будет отображать вывод в виде:

The name is: H a r r y

Typescript позволяет использовать сторонние файлы javascript, используя объявление окружения. Преимущество этой функции заключается в том, что вам не нужно переписывать и использовать все возможности библиотеки в машинописи.

Ambient Syntax

Чтобы объявить окружающий модуль:

declare module moduleName {
   //code here
}  

Окружающий файл должен быть сохранен как:

filename.d.ts

Чтобы использовать файл filename.d.ts в вашем .ts, вы должны ссылаться на него как:

/// <reference path="filename.d.ts"/>

Объявление окружающего типа в typcript будет иметь ссылку на стороннюю библиотеку и будет повторно объявлять функции, требуемые своим собственным типом. Например, предположим, что у вас есть небольшая библиотека JavaScript, как показано ниже:

Сторонний файл JavaScript: testString.js

Пример: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

У вас есть объект с именем StringChecks, который имеет такие функции, как isString, convertToUpperCase, convertToLowerCase и convertToStringBold.

Создание окружающего модуля в Typescript

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

Имя файла: tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

Вы должны определить имя модуля как TestString и экспортировать интерфейс StringsFunc.

isString (str: string): логическое значение

=> Это будет принимать параметр как строку, а тип возвращаемого значения будет булевым. При использовании в вашем файле .ts в случае, если вы передадите параметр в виде числа или чего-то другого, кроме строки, это даст вам ошибку типа компиляции.

convertToUpperCase (str: string): строка

=> Это будет принимать аргумент как строку и возвращать строку. То же самое относится и к convertToLowerCase (str: string) : string; и convertToStringBold (str: string): string ;

Так как в файле javascript у вас есть имя объекта как StringChecks, наконец, мы должны сослаться на то же самое в файле .d.ts, который делается так:

declare var StringChecks: TestString.StringsFunc;

Использование модуля Ambient в Typescript

Теперь вот файл test.ts, где будет использоваться окружающий файл tstring.d.ts

Пример: test.ts

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Скомпилируйте машинопись tsc test.ts в test.js

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Теперь вы можете использовать test.js в html-файле, а также в файле библиотеки testString.js

<html>			
<head>			
    <title>Test Typescript Ambient</title>			
    <script src="/testStrings.js"></script>			
    <script src="/test.js"></script>			
</head>			
<body>			
</body>			
</html>

Это вывод, видимый в консоли:

true			
HELLO WORLD			
hello			
<b>Hello World</b>

Давайте посмотрим важные ориентиры из истории Typescript:

• После двух лет внутреннего развития в Microsoft. TypeScript 0.9, выпущенный в 2013 году
• Дополнительная поддержка обобщений TypeScript 1.0 была выпущена на Build 2014
• В июле 2014 года появился новый компилятор TypeScript, который работает в пять раз быстрее, чем предыдущая версия.
• В июле 2015 года поддержка модулей ES6, ключевое слово namespace, для поддержки, декораторы.
• В ноябре 2016 года добавлена ​​такая функция, как ключевые и поисковые типы сопоставленных типов, а также отдых.
• 27 марта 2018 года в Typescript добавлены условные типы, улучшенный ключ с поддержкой типов пересечений.

Вот важные плюсы / преимущества использования Typescript

• Большой и сложный проект на JavaScript сложно кодировать и поддерживать.
• Typescript очень помогает в организации кода, но избавляет от большинства ошибок во время компиляции.
• TypeScript поддерживает библиотеки JS и документацию API
• Это необязательно набираемый язык сценариев
• Код TypeScript может быть преобразован в простой код JavaScript
• Лучшее структурирование кода и методы объектно-ориентированного программирования
• Позволяет лучше поддерживать инструмент времени разработки
• Это может расширить язык за пределы стандартных декораторов, async / await

Вот некоторые наиболее распространенные приложения Typescript:

• Угловая команда использует Typescript.
• Установка NodeJS и NPM
• Установка Typescript
• Скомпилировать код Typescript в Javascript
• Выполнить код с помощью Nodejs
• Выполнить Javascript в браузере
• Компилировать код Typescript в Javascript, используя версию EcmaScript
• Вы можете легко скомпилировать код, написанный на машинописном тексте, в JavaScript, используя NodeJS.
• Поэтому для работы с машинописью сначала нужно скачать и установить NodeJS.