Браузеры не поддерживают Typescript, поэтому нам нужно переводить код в javascript.
Нам нужно установить Typescript в нашей системе, прежде чем мы сможем его использовать, запустите приведенный ниже код в своем терминале, чтобы установить Typescript:
sudo npm install -g typescript
Откройте ваш текстовый редактор и создайте новый файл main.ts
function log(message) {
console(message);
}
let message = 'Hello Typescript';
log(message);
Запустите команду ниже в терминале под вашим каталогом проекта
tsc main.ts
Приведенная выше команда tsc main.ts создает новый файл main.js, который является javascript-версией main.ts, которая была передана.
мы можем запустить транспилированный main.js из терминала, используя команду ниже
node main.js
Примечание: вам не нужно вручную запускать tsc main.js в угловом приложении, потому что ng serve делает это автоматически для вас.
Typescript Типы:
У нас есть разные типы в Typescript, которая включает в себя:
let a: number // например, 1, 2, 3 let b: boolean // например, true, false let c: string // например, "abel agoi" let d: any // это может принимать любые другие типы let e: number [] // массив чисел например [1, 3, 54] let f: any [] // любой массив, например [1, "abel agoi", true]
Примечание: есть другой тип, называемый enum, о котором я не говорил, вы можете проверить это сами.
Функции стрелки :
В javascript мы можем объявить функцию, как показано ниже:
let log = function (message) { console.dir (message); }
Вы также можете использовать функцию стрелки (=>) для достижения того же самого в Typescript, как показано ниже
let log = (message) => {// мы просто удаляем функцию console.dir (message); } // выше можно даже сократить до let log = (message) => console.dir (message); // и если вы передаете только один параметр, его можно сократить до let log = message => console.dir (message); // не читается, хотя
Интерфейсы:
Передача большого количества параметров в функцию, как показано ниже, является плохой практикой:
let myFunction = (
a: number,
b: number,
c: string,
d: any,
e: number[],
f: any[]
) => {
console.log('something);
}
Мы можем избежать этого путем инкапсуляции всех параметров в объект и передачи одного объекта в функцию с помощью интерфейсов (предоставляемых Typescript), как показано ниже:
interface MyParameters { a: number, b: number, c: string, d: any, e: number[], f: any[] ... ... }let myFunction = (myParameters: MyParameters) { }
Классы:
Рекомендуется группировать связанные переменные (свойства) и функции (методы) в один блок кода, который в программировании обозначается как класс. создайте новый файл с именем myPoint.ts, как показано ниже:
class MyPoint { х: number; у: string; draw() { // обратите внимание на способ доступа к свойству x ниже, используя это console.log («X is:» + this.x); console.log ("X is:" + this.y); } getDistanceBtw (another: AnotherPoint) { // получаем расстояние } }
Доступ к свойствам и методам класса:
Поскольку мы сгруппировали связанные свойства и методы в один класс. Нам нужно иметь доступ к этим свойствам и методам. Мы можем получить доступ к свойствам метода, создав экземпляр класса.
let myPoint = new MyPoint () // где MyPoint - это имя класса myPoint.x = 2; // это вы устанавливаете свойство х myPoint.y = "a"; // это вы устанавливаете свойство myPoint.draw (); // мы получаем доступ к методу рисования
Мы можем скомпилировать и запустить класс, введя команду ниже в нашем терминале:
tsc myPoint.ts | node myPoint.js
Нам нужно сначала создать экземпляр класса перед назначением свойств класса. Что если есть лучший способ назначить свойства на лету, когда мы создаем экземпляр класса? Да, есть. Конструктор.
Конструктор:
Конструктор — это метод, который автоматически вызывается всякий раз, когда мы создаем экземпляр класса. Конструктор позволяет нам назначать свойства при создании экземпляра класса.
let myPoint = new MyPoint () myPoint.x = 2; myPoint.y = "a";
Выше можно теперь сократить до ниже:
let myPoint = new MyPoint (2, "a");
Нам также нужно обновить наш класс, чтобы разрешить использование конструктора
class MyPoint { х: number; у: string; constructor (x: число, y: строка) { this.x = x; this.y = y; } draw () { // обратите внимание на способ доступа к свойству x ниже, используя это console.log («X is:» + this.x); console.log ("X is:" + this.y); } getDistanceBtw (другой: AnotherPoint) { // получаем расстояние } }
Необязательные параметры в конструкторах:
Что если мы хотим использовать конструктор, но также сделать его необязательным? Да, это возможно. Нам нужно использовать «?» в конструкторе, как показано ниже. «?» Символ позволяет объявить параметр необязательно.
class MyPoint { х: number; у: string; constructor (x ?: number, y ?: string) { // обратите внимание на «?» перед ":" this.x = x; this.y = y; }
draw () { // обратите внимание на способ доступа к свойству x ниже, используя это console.log («X is:» + this.x); console.log ("X is:" + this.y); }
getDistanceBtw (другой: AnotherPoint) { // получаем расстояние }
} // Ниже будет работать, например, A MyPoint let myPointA = new MyPoint () myPoint.x = 2; myPoint.y = "a"; myPoint.draw (); // Ниже будет работать, например, B MyPoint let myPointB = new MyPoint (2, "b"); myPointB.draw (); // Ниже будет работать, например, A MyPoint let myPointC = new MyPoint (2); // примечание: мы не передали параметр для Y myPointC.draw ();
Модификаторы доступа:
Модификаторы доступа — это ключевое слово, которое мы применяем к свойству или члену класса для управления его доступом извне. У нас есть три модификатора доступа в машинописном тексте: публичные, защищенные, приватные. По умолчанию все члены являются публичными, то есть они могут быть доступны / изменены извне класса. например, установка свойств x и y в private не позволит им быть доступными вне класса
class MyPoint { ... private х: номер; private y: строка; // мы также можем установить модификатор доступа для методов как ниже public draw () { //нарисуйте что-нибудь } ... } let myPoint = new MyPoint (); myPoint.x = 3;
Доступ к экземпляру myPoint.x выше приведет к ошибке из-за частного ключевого слова.
Помощник по typescript, который я люблю использовать в конструкторе
Мы добавили конструктор в наш класс, как показано ниже:
private х: номер; public y: string; конструктор (x: число, y: строка) { this.x = x; this.y = y; }
Благодаря TypoScript мы можем сократить вышеуказанное до:
constructor (private x: number, public y: string) {}
Да это оно. Typescript будет автоматически обрабатывать все остальное для нас (держу пари, вы увидите это много в угловом приложении). Нам не нужно:
private x: number; public y: string;andthis.x = x; this.y = y;
Геттеры и сеттеры
Предположим, что текущее состояние нашего класса MyPoint, как показано ниже
class MyPoint { constructor (private x?: number, private y?: string) {} draw() {//нарисуйте что-нибудь } drawAnotherThing () { // рисуем другую вещь } }
Мы уверены, что не сможем получить доступ к свойствам x и y класса MyPoint из-за примененного модификатора private, но в случае, если мы хотим иметь доступ к ним, нам нужно использовать методы getter и setter, как показано ниже:
class MyPoint { constructor (private x ?: number, private y ?: string) {} getX () {// это используется для получения X вернуть this.x; } setX (value) {// это используется для установки X this.x = значение; } } // поскольку мы не можем установить x непосредственно после инициализации класса MyPoint //, мы используем setX () (setters) для установки значения X, как показано ниже: let myPoint = new MyPoint (); myPoint.setX = 4; console.log (myPoint.getX ()); // это даст нам 4;
Сеттеры и геттеры могут позволить вам устанавливать ограничения на значение X при установке и получении значения.
Еще один помощник по TypoScript, который я люблю использовать с сеттерами и геттерами
Вместо использования myPoint.getX () для получения значения X, что если я могу сделать что-то вроде
myPoint.X = 4; // доступ к X, как к свойству, когда он на самом деле // получатель
Затем мне нужно создать пробел перед именем функции получения и установки
class MyPoint { constructor (private x ?: number, private y ?: string) {} get X () {// обратите внимание на пробел перед X return this.x; } set X (значение) {// отметить пробел перед Y this.x = value; } }
Также обычной практикой называют наши свойства, начинающиеся с подчеркивания (_), чтобы мы могли иметь что-то вроде ниже
class MyPoint { constructor (private _x ?: number, private _y ?: string) {} get x () {// обратите внимание на пробел перед X return это ._x; } set x (value) {// обратите внимание на пробел перед Y this._x = value; } }
Модули
Реальное приложение будет иметь более одного класса. Мы должны быть в состоянии сделать наш класс таким образом, чтобы его можно было использовать в другом классе, отсюда и необходимость модульности. Сначала давайте изменим наш класс myPoint.ts так, чтобы он был ниже:
exports class MyPoint {// обратите внимание на конструктор добавленного ключевого слова экспорта (личное _x ?: число, личное _y ?: строка) {} get x () { return это ._x; } set x (value) {// обратите внимание на пробел перед Y this._x = value; } draw () { // нарисовать что-нибудь снова } }
Ключевое слово export сделает MyPoint.ts видимым и будет использоваться в другом классе, который его импортирует .
Нам нужно импортировать класс MyPoint.ts в main.ts, чтобы быть в состоянии использовать это.
import {MyPoint} from './myPoint'; class Main { let MyPoint = new MyPoint (4, "go to go"); MyPoint.draw (); }
Примечание: main.ts и myPoint.ts находятся в одном каталоге.
Я с радостью поделюсь с вами базовой машинописью, которую вы должны знать, чтобы начать изучать Angular.
Спасибо за прочтение.
—————————————-
перевод Agoi Abel, codebirst.io
0
Loading...