VDS за 300р от нашего партнера SpaceWeb
[124]
26 Фев 2020, 22:26

Что нужно знать о Typescript, чтобы начать писать на Angular

 
Typescript — это расширенный набор javascript, который означает, что любой код javascript является допустимым набором текста, но Typescript имеет некоторые дополнительные функции, которых нет в javascript, например строгая типизация (указание типа переменной при объявлении, что может сделать наше приложение более предсказуемым и легко отлаживаемым) , вносит объектно-ориентированные функции в JavaScript и многое другое.
 

Браузеры не поддерживают 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)

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 11496]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 8251]
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 8239]
[100]
19 Дек 2014, 16:16
User-agent для Internet Explorer 11
[просмотров 6607]
[124]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 6345]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 4660]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 4580]

Вести с Хабра