Модульна система 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>