Merge pull request #300 from ghiscoding/docs/typescript

docs: add TypeScript usage with Types imports demo

docs/en/learn/getting-started/usage.mdx

@@ -21,7 +21,7 @@ As an example in this documentation, an **«id»** attribute with the value **«
 </html>
 ```
 
-## JS
+## JavaScript
 If you installed VanillaCalendar using NPM or Yarn, you need to import JavaScript and the necessary styles. If you connected VanillaCalendar locally or used a CDN, you can skip this step.
 
 ```js
@@ -58,6 +58,44 @@ The full example with html and js files can be viewed in the sandbox by clicking
 
 <Sandbox example="try-vanilla-calendar" />
 
+## TypeScript
+If you installed VanillaCalendar using NPM or Yarn and you use TypeScript, the usage is similar to JavaScript except that the types use different imports as shown below.
+
+```ts
+import VanillaCalendar from 'vanilla-calendar-pro';
+import type { IOptions, ISettings } from 'vanilla-calendar-pro/types';
+import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';
+
+// use the types in your code
+import class Example {
+  init() {
+    const options: IOptions = {
+      settings: {
+        selected: {
+          dates: ['2024-08-20'],
+        },
+      },
+    };
+
+    const calendar = new VanillaCalendar('#calendar', options);
+    calendar.init();
+
+    const newOptions: IOptions['settings'] = {
+      selected: {
+        dates: ['2024-08-22'],
+      },
+    };
+
+    this.changeSetting(calendar, newOptions as ISettings);
+    calendar.update({ dates: true });
+  }
+
+  changeSetting(calendar: VanillaCalendar, settings: ISettings) {
+    calendar.settings = { ...calendar.settings, ...settings };
+  }
+}
+```
+
 ## Locally or via CDN
 
 If you want to use CDN, insert the scripts and styles into your HTML document from the <a href="/docs/learn/getting-started/installation#cdn">«Connection via CDN»</a>.

docs/ru/learn/getting-started/usage.mdx

@@ -21,7 +21,7 @@
 </html>
 ```
 
-## JS
+## JavaScript
 Если вы установили VanillaCalendar с помощью NPM или Yarn, вам нужно импортировать JavaScript и необходимые стили. Если вы подключили VanillaCalendar локально или использовали CDN, вы можете пропустить этот шаг.
 
 ```js
@@ -58,6 +58,44 @@ calendar.init();
 
 <Sandbox example="try-vanilla-calendar" />
 
+## TypeScript
+Если вы установили VanillaCalendar с помощью NPM или Yarn и используете TypeScript, его использование аналогично JavaScript, за исключением того, что типы используют разные импорты, как показано ниже.
+
+```ts
+import VanillaCalendar from 'vanilla-calendar-pro';
+import type { IOptions, ISettings } from 'vanilla-calendar-pro/types';
+import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';
+
+// use the types in your code
+import class Example {
+  init() {
+    const options: IOptions = {
+      settings: {
+        selected: {
+          dates: ['2024-08-20'],
+        },
+      },
+    };
+
+    const calendar = new VanillaCalendar('#calendar', options);
+    calendar.init();
+
+    const newOptions: IOptions['settings'] = {
+      selected: {
+        dates: ['2024-08-22'],
+      },
+    };
+
+    this.changeSetting(calendar, newOptions as ISettings);
+    calendar.update({ dates: true });
+  }
+
+  changeSetting(calendar: VanillaCalendar, settings: ISettings) {
+    calendar.settings = { ...calendar.settings, ...settings };
+  }
+}
+```
+
 ## Локально или CDN
 
 Если вы хотите использовать CDN, вставьте скрипты и стили в ваш HTML-документ из раздела <a href="/docs/learn/getting-started/installation#cdn">«Подключение через CDN»</a>.