Przykładowe zadanie.
Wyświetl czas i datę w prawym górnym rogu a pod spodem napis Witajcie. Napis jest kolorowy i płynnie powiększa się. Pod napisem jest buton który, gdy klikniemy wyświetli obraz w nowym oknie.
Instalujemy dodatkowo w konsoli
npm install --save-dev @types/node
npm install undici-types
tsconfig.json{
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
"target": "ES2015",
"module": "es6",
"moduleResolution": "node"
}
}
Package.json
{
"name": "aplikacja1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile": "tsc --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/node": "^22.7.5"
},
"dependencies": {
"undici-types": "^6.19.8"
}
}
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplikacja 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 id="greeting">Witajcie</h1>
</div>
<div id="clock"></div>
<script type="module" src="dist/app.js"></script>
</body>
</html>
Style.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: sans-serif;
}
.container {
text-align: center;
}
#greeting {
color: #007bff;
transition: font-size 0.5s ease-in-out, color 0.3s ease-in-out;
}
#greeting:hover {
font-size: 3rem;
color: red;
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#clock {
position: absolute;
top: 10px;
right: 10px;
}
Po instalacji wtyczek, plik
package-lock.json utworzył się automatycznie
{
"name": "aplikacja1",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "aplikacja1",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"undici-types": "^6.19.8"
},
"devDependencies": {
"@types/node": "^22.7.5"
}
},
"node_modules/@types/node": {
"version": "22.7.5",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.5.tgz",
"integrity": "sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==",
"dev": true,
"dependencies": {
"undici-types": "~6.19.2"
}
},
"node_modules/undici-types": {
"version": "6.19.8",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw=="
}
}
}
app.ts
interface ClockInterface {
tick(): void;
}
class Clock implements ClockInterface {
private element: HTMLElement;
constructor(element: HTMLElement) {
this.element = element;
this.element.innerText = new Date().toString();
this.tick();
}
tick() {
this.element.innerText = new Date().toString();
const time = setTimeout(() => this.tick(), 1000);
}
}
// Interaktywny napis
const greeting = document.createElement('h1');
greeting.id = 'greeting';
//greeting.textContent = '';
document.body.appendChild(greeting);
// Dodajemy animację przy najechaniu kursorem
greeting.addEventListener('mouseover', () => {
greeting.style.transition = 'font-size 0.5s, color 0.5s';
greeting.style.fontSize = '3rem';
greeting.style.color = 'red';
});
// Przywracamy oryginalny styl po opuszczeniu kursorem
greeting.addEventListener('mouseout', () => {
greeting.style.fontSize = '1rem';
greeting.style.color = 'black';
});
// Przycisk
const button = document.createElement('button');
button.textContent = 'Kliknij mnie';
const container = document.querySelector('.container');
container.appendChild(button);
// Obsługa kliknięcia przycisku
button.addEventListener('click', () => {
window.open('zdjęcie1.PNG', '_blank');
});
// Tworzymy element z id "clock", jeśli nie istnieje
const clockElement = document.getElementById('clock');
if (!clockElement) {
const newClockElement = document.createElement('div');
newClockElement.id = 'clock';
document.body.appendChild(newClockElement);
}
const clock = new Clock(document.getElementById('clock') as HTMLElement);
Zdjęcie umieszczono w katalogu głównym projektu.
Tworzenie projektu aplikacji webowej w TypeScript przy użyciu Visual Studio Code.
1.1 Zainstaluj Node.js i npm
Pobierz i zainstaluj Node.js z oficjalnej strony. Node.js zawiera npm (Node Package Manager), którego będziesz używać do zarządzania pakietami i zależnościami.
1.2 Zainstaluj TypeScript globalnie
W terminalu wpisz:
npm install -g typescript
Otwórz Visual Studio Code i utwórz nowy folder dla projektu.
Otwórz terminal w Visual Studio Code i przejdź do folderu projektu.
2.1 Inicjalizacja projektu npm
W folderze projektu uruchom:
npm init -y
To polecenie stworzy plik package.json, który będzie zarządzał zależnościami projektu.
2.2 Zainstaluj potrzebne pakiety
Zainstalujemy pakiety niezbędne do stworzenia prostej aplikacji, jak również kompilację TypeScript:
npm install express
npm install --save-dev typescript ts-node @types/node @types/express
express — framework webowy do tworzenia serwera.
typescript — kompilator TypeScript.
ts-node — pozwala uruchamiać skrypty TypeScript bezpośrednio z poziomu Node.js.
@types/node oraz @types/express — zapewniają definicje typów dla Node.js i Express.
Stwórz plik tsconfig.json, który skonfiguruje kompilację TypeScript. W terminalu wpisz:
npx tsc --init
Otwórz tsconfig.json i dostosuj ustawienia, np.:
json
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"rootDir": "./src",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true
}
}
rootDir — folder źródłowy, gdzie będziemy umieszczać pliki TypeScript.
outDir — folder, do którego skompilowane pliki JavaScript będą zapisywane.
Utwórz foldery:
src — do kodu TypeScript.
dist — do skompilowanych plików JavaScript.
W folderze src utwórz plik index.ts i dodaj podstawowy kod serwera Express:
typescript
import express, { Request, Response } from 'express';
const app = express();
const PORT = 3000;
app.get('/', (req: Request, res: Response) => {
res.send('Hello, TypeScript with Express!');
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
Kod ten tworzy prosty serwer Express, który odpowiada "Hello, TypeScript with Express!" na żądanie GET wysłane na /.
Zaktualizuj package.json, aby dodać skrypty do uruchamiania serwera i kompilacji kodu:
json
"scripts": {
"start": "node dist/index.js",
"build": "tsc",
"dev": "ts-node src/index.ts"
}
start — uruchamia skompilowany serwer z folderu dist.
build — kompiluje kod TypeScript do JavaScript w folderze dist.
dev — uruchamia serwer bezpośrednio z kodu TypeScript w trybie deweloperskim, bez potrzeby kompilacji (używając ts-node).
W trybie developerskim
Aby uruchomić serwer bezpośrednio z kodu TypeScript (bez kompilacji do JavaScript), uruchom:
bash
npm run dev
Po tym kroku serwer będzie dostępny pod adresem http://localhost:3000.
Kompilacja i uruchomienie
Aby skompilować kod TypeScript i uruchomić skompilowany serwer, wykonaj:
bash
npm run build
npm start
Aby automatycznie restartować serwer po zmianach w kodzie, możesz zainstalować nodemon:
bash
npm install --save-dev nodemon
Następnie zmodyfikuj package.json, aby używać nodemon w trybie developerskim:
json
"scripts": {
"start": "node dist/index.js",
"build": "tsc",
"dev": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts"
}
Możesz teraz rozwijać swoją aplikację, dodając nowe trasy, middleware i inne funkcjonalności w folderze src. Każda zmiana w kodzie źródłowym (przy uruchomionym npm run dev z nodemon) spowoduje automatyczny restart serwera, dzięki czemu szybko zobaczysz efekty w przeglądarce.
Po wykonaniu powyższych kroków masz gotowy projekt aplikacji webowej w TypeScript, korzystając z Express.js i Visual Studio Code. Możesz rozszerzać aplikację według potrzeb, dodając nowe funkcje, strukturyzując kod w folderze src, a także korzystając z zalet statycznego typowania, które oferuje TypeScript.