Модульная система Typescript.
Фронтенд разработка на языке JavaScript. -> Пракрикум. Нахождение общего делителя.
Нахождение общего делителя.
Создаем поток
import { range } from 'rxjs';
const CONST1 = 20;
const stream1 = range(1,CONST1);
Преобразуем в массив и сортируем.
...
import { toArray, map } from 'rxjs/operators';
stream1
.pipe(toArray(),map(arr=>arr.sort((a,b) => b-a)))
.subscribe((el) => {
console.log(el);
})
Переключаемся на второй поток из масива и выбираем из него все что делится без остатка.
stream1
.pipe(
toArray(),
map(arr=>arr.sort((a,b) => b-a)),
switchMap( (rez) => from(rez)
.pipe(filter((el: any) => CONST1%el === 0))
)
)
.subscribe((el) => {
console.log(el);
})
Оформляем 2 потока.
const CONST1 = 20;
const CONST2 = 50;
const stream1 = range(1,CONST1)
.pipe(
toArray(),
map(arr=>arr.sort((a,b) => b-a)),
switchMap( (rez) => from(rez)
.pipe(filter((el: any) => CONST1%el === 0))
)
);
const stream2 = range(1,CONST2)
.pipe(
toArray(),
map(arr=>arr.sort((a,b) => b-a)),
switchMap( (rez) => from(rez)
.pipe(filter((el: any) => CONST2%el === 0))
)
);
stream1.subscribe((el) => {
console.log(`stream1 = ${el}`);
})
stream2.subscribe((el) => {
console.log(`stream2 = ${el}`);
})
Создаем 3 поток где выбираем совпадающие элементы, переключаясь на второй поток, переводим их в массив и получаем наибольшее.
const stream3 = stream1.pipe(
switchMap((el1) => stream2.pipe(filter((el2) => el2 === el1))),
toArray()
).subscribe((el) => {
console.log(Math.max(...el));
})
Полный код примера.
import { from } from 'rxjs';
import { range } from 'rxjs';
import { toArray, map, switchMap, filter } from 'rxjs/operators';
const CONST1 = 20;
const CONST2 = 50;
const stream1 = range(1,CONST1)
.pipe(
toArray(),
map(arr=>arr.sort((a,b) => b-a)),
switchMap( (rez) => from(rez)
.pipe(filter((el: any) => CONST1%el === 0))
)
);
const stream2 = range(1,CONST2)
.pipe(
toArray(),
map(arr=>arr.sort((a,b) => b-a)),
switchMap( (rez) => from(rez)
.pipe(filter((el: any) => CONST2%el === 0))
)
);
const stream3 = stream1.pipe(
switchMap((el1) => stream2.pipe(filter((el2) => el2 === el1))),
toArray()
).subscribe((el) => {
console.log(Math.max(...el));
})
Фронтенд разработка на языке JavaScript. -> Модульная система Typescript.
Typescript. Начало работы.
Инициализация npm проекта.
npm init
Установка транспилятора
sudo npm install -g typescript
Установка и обновление nodejs и npm.
npm install npm@latest -g
sudo npm cache clean -f
sudo npm install -g n
sudo n stable
Проверка версии.
node -v
Создание конфигурационного файла.
Первая программа app.ts.
function greeter(person) {
return "Hello, " + person;
}
greeter('Dima')
Компиляция.
tsc app.ts
Либо указывая полный путь.
./node_modules/.bin/tsc
Стартовая страница
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="app.js"></script>
</body>
</html>
Добавление веб сервера.
npm install lite-server --save
Иногда возникает ошибка permission denied, mkdir ‘/home/user/.npm для устранения удалите папку .npm
Запуск веб сервера.
./node_modules/.bin/lite-server
Создание конфигурационного файла tsconfig.json
В этом файле определяются:
-
входная (корневая) директория проекта;
-
выходная директория;
-
опции компилятора;
-
определяются какие файлы включать и выключать из компиляции.
{ “compilerOptions”: { “emitDecoratorMetadata”: true, “experimentalDecorators”: true, “module”: “commonjs”, “target”: “es2015”, “outDir”: “built”, “rootDir”: “src” } }
если вы указываете файл для компиляции явно то конфигурационный файл игнорируется!
Список всех настроек typescript
Перенесем app.ts файл в папку src.
Запуск транспилятора в режиме отслеживания изменений (watch).
tsc -w
Исключение и включение каталогов из процесса слежения (tsconfig.json).
{
"compilerOptions": {
....
},
"include": [
"**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]}
При этом приняты следующие условные обозначения.
-
- любое кол-во символов, исключая разделитель каталогов
? - один любой символ, исключая разделитель каталогов
**/ - все подкаталоги
Полная версия
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"noImplicitAny": false,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist",
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*"
]
}
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}
Определение типа передаваемого значения.
function greeter(person: string) {
Попытка передать неверный тип.
let user = [0, 1, 2];
document.body.innerHTML = greeter(user);
src/app.ts:7:35 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
Определение типа возвращаемого значения.
function greeter(person: string): number {
return "Hello, " + person;
}
src/app.ts:8:1 - error TS2322: Type 'number' is not assignable to type 'string'.
Модульность
Определим библиотечную функцию src/lib/function.ts.
export function sayHello( name ) {
return `Hello {$name}`;
};
Импортируем ее в главном модуле app.js.
import { sayHello } from './lib/function';
console.log(sayHello());
Получаем ошибку в консоле.
app.js:2 Uncaught ReferenceError: exports is not defined
Это значит что js не знает конструкцию exports и для этого необходимо использовать загрузчик модулей, например SystemJS.
Установка.
npm install systemjs@0.19.22 --save
Шаблон
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title>
<script src="node_modules/systemjs/dist/system.js"></script>
</head>
<body>
<script>
SystemJS.config({
defaultJSExtensions: true
});
SystemJS.import('built/index.js');
</script>
</body>
</html>
При компиляции на лету (внутри браузера без запуска tsc).
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/typescript/lib/typescript.js"></script>
</head>
<body>
<script>
SystemJS.config({
transpiler: 'typescript',
packages: {
src: {
defaultExtension: 'ts'
}
}
});
SystemJS.import('src/index.ts');
</script>
</body>
</html>