WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit 
counter

Наши преимущества

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


Регистрация на сайте

TypeScript

TypeScript

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

Язык TypeScript - это надмножество языка ECMAScript 6 (также известной как ECMAScript 2015, ES2015), которое компилируется в обычный код на JavaScript (ES5) и широко поддерживается современными ОС.

На настоящий момент браузеры не имеют встроенной поддержки ни TypeScript, ни ECMAScript 6, поэтому для публикации на сервеере код должен быть преобразован в код на JavaScript, поддерживаемый всеми браузерами.


Установка TypeSceipt

Удобно работать с TypeScript в среде NodeJs. 

В консоли NodeJS TypeScript устанавливается при помощи npm (Node Package Manager): 

> npm install -g typescript

Для работы с программами на TypeScript можно использовать любой текстовый редактор. Наиболее популярный, наверное, на сегодня - бесплатный Microsoft Visual Studio Code.

Для удобства можно поставить под VS Code расширение Lint для TypeScript:

Для Visual Studio Code - установить lint:

npm install -g lint


Создание первой программы на TypeScript

Текст программы - в файле test1.ts

Создать текстовый файл в любом редакторе (далее - Visual Studio Code)

> code test1.ts

Текст программы:

function tst1(){ console.log("Первый тест на TypeScript"); } tst1();


Компиляция программы

> tsc test1

Компайлер создаёт файл:

test1.js , который уже можно запустить и в браузере и в NodeJs:

> node test1


Характерные особенности программы на TypeScript

Основные отличия, характерные особенности языка TypeScript по сравнению с JavaScript.

Типы данных

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

Задание типов 

// Boolean let isDone: boolean = false; // Number let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; // String let color: string = "blue"; color = 'red'; // Array let list: number[] = [1, 2, 3]; // Enum enum is a way of giving more friendly names to sets of numeric values enum Color {Red, Green, Blue} let c: Color = Color.Green; // Any let notSure: any = 4; notSure = "maybe a string instead"; notSure = false; // okay, definitely a boolean

Приведение типов (Type assertions)

let someValue: any = "this is a string"; let strLength: number = (someValue).length;

let someValue: any = "this is a string"; let strLength: number = (someValue as string).length;

Описание функции


// Named function function add(x, y) { return x + y; } // Anonymous function let myAdd = function(x, y) { return x + y; };


Описание типов данных

function add(x: number, y: number): number { return x + y; } let myAdd = function(x: number, y: number): number { return x + y; };

Необязательные параметры-аргументы функции (Optional parameters)


function buildName(firstName: string, lastName?: string) { if (lastName) return firstName + " " + lastName; else return firstName; } let result1 = buildName("Bob"); // Правильно работает let result2 = buildName("Bob", "Adams", "Sr."); // Ошибка let result3 = buildName("Bob", "Adams"); // Правильно

Параметры по-умолчанию (Default parameters)

function buildName(firstName: string, lastName = "Smith") { return firstName + " " + lastName; } let result1 = buildName("Bob"); // Возвращает "Bob Smith" let result2 = buildName("Bob", undefined); // Возвращает "Bob Smith" let result3 = buildName("Bob", "Adams", "Sr."); // Ошибка: too many parameters let result4 = buildName("Bob", "Adams"); // Правильно

Arrow functions 

TypeScript допускает такой синтаксис при описании функций

let myFunc2 = (testsParam) => {console.log(testsParam)} myFunc2("qqqqq");

Интерфейсы (Interfaces)

Язык TypeScript позволяет описывать комплексные пользовательские структуры данных - интерфейсы.

interface myType1 { par1:number; par2:string; } let var22 :myType1 = {par1 :33, par2 : "Второй текст"}; console.log(var22.par1, var22.par2);



interface SquareConfig { color?: string; width?: number; } function createSquare(config: SquareConfig):{color: string; area: number} { let newSquare = {color: "white", area: 100}; if (config.color) { newSquare.color = config.color; } if(config.width) { newSquare.area = config.width * config.width; } return newSquare; } let mySquare = createSquare({color: "black"}); console.log(mySquare);


Классы

Описание классов

class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } let  greeter = new Greeter("world");

 

Модификаторы уровня доступа (Access modifiers)

public, private, protected

Доступ к свойствам класса (Accessors - getter, setter)

TypeScript использует специальные функции: getters/setters как способ доступа к дочерним элементам объекта (в том числе и private).

let passcode = "secret passcode"; class Employee { private _fullName: string; get fullName(): string { return this._fullName; } set fullName(newName: string) { if (passcode && passcode == "secret passcode") { this._fullName = newName; } else { console.log("Error: Unauthorized update of employee!"); } } } let employee = new Employee(); employee.fullName = "Bob Smith"; if (employee.fullName) { console.log(employee.fullName); }




Modules

Модуль выполняется в пределах собственного пространства имён (namespace ), а не в глобальном (global namespace); это означает, что переменные, функции, классы и т. д., объявленные в модуле, не видны вне модуля, если они явно не экспортируются с использованием одной из форм экспорта. И наоборот, чтобы использовать переменную, функцию, класс, интерфейс и т. д., экспортированные из другого модуля, их нужно импортировать с использованием одной из форм импорта.

Модуль в TypeScript - самостоятельное пространство имён. 

Модуль - файл TypeScript, который может содержать описания данных.

Те данные, которые модуль хочет сделать достыпными для других пространств имён, он помечает описателем export.

Для использования чужих данных (из другого модуля) их нужно импортировать (import).

Например

Файл module1.ts

export class Employee { private _fullName: string; private _passwd: string; constructor (passwd: string) { this._passwd = passwd; } get fullName(): string { return this._fullName; } set fullName(newName: string) { if (this._passwd && this._passwd === 'secret passcode') { this._fullName = newName; } else { console.log('Error: Unauthorized update of employee!'); } } }


Файл main.ts

import { Employee } from './module1'; const passcode = 'secret passcode'; const employee = new Employee(passcode); employee.fullName = 'Bob Smith'; if (employee.fullName) { console.log(employee.fullName); }


Файл конфигурации

Создать стандартный файл конфигурации для программы на TypeScript (tsconfig.json)

> tsc --init

Создаётся файл:

{ "compilerOptions": { /* Basic Options */ "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ // "lib": [], /* Specify library files to be included in the compilation. */ // "allowJs": true, /* Allow javascript files to be compiled. */ // "checkJs": true, /* Report errors in .js files. */ // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ // "declaration": true, /* Generates corresponding '.d.ts' file. */ // "sourceMap": true, /* Generates corresponding '.map' file. */ // "outFile": "./", /* Concatenate and emit output to single file. */ // "outDir": "./", /* Redirect output structure to the directory. */ // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ // "removeComments": true, /* Do not emit comments to output. */ // "noEmit": true, /* Do not emit outputs. */ // "importHelpers": true, /* Import emit helpers from 'tslib'. */ // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ /* Strict Type-Checking Options */ "strict": true, /* Enable all strict type-checking options. */ // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ // "strictNullChecks": true, /* Enable strict null checks. */ // "strictFunctionTypes": true, /* Enable strict checking of function types. */ // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ /* Additional Checks */ // "noUnusedLocals": true, /* Report errors on unused locals. */ // "noUnusedParameters": true, /* Report errors on unused parameters. */ // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ /* Module Resolution Options */ // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ // "typeRoots": [], /* List of folders to include type definitions from. */ // "types": [], /* Type declaration files to be included in compilation. */ // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ /* Source Map Options */ // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */ // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ /* Experimental Options */ // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ } }


Этот файл содержит целый ряд параметров для компилятора.

Например: "target": "es5" говорит о том, что результатом работы компилятора должен быть файл на стандартном JavaScript (версиz ECMAScript ES5 ).