ಕನ್ನಡ

ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್‌ನ `import type` ಸಿಂಟ್ಯಾಕ್ಸ್‌ನೊಂದಿಗೆ ಬಿಲ್ಡ್ ಸಮಯವನ್ನು ಉತ್ತಮಗೊಳಿಸಿ ಮತ್ತು ರನ್‌ಟೈಮ್ ದೋಷಗಳನ್ನು ತಡೆಯಿರಿ. ಟೈಪ್-ಓನ್ಲಿ ಇಂಪೋರ್ಟ್‌ಗಳ ಬಳಕೆ ಮತ್ತು ಅದರ ಪ್ರಯೋಜನಗಳನ್ನು ತಿಳಿಯಿರಿ.

ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಇಂಪೋರ್ಟ್ ಟೈಪ್: ಟೈಪ್-ಓನ್ಲಿ ಇಂಪೋರ್ಟ್ ಡಿಕ್ಲರೇಷನ್‌ಗಳ ಬಗ್ಗೆ ಆಳವಾದ ನೋಟ

ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಒಂದು ಸೂಪರ್‌ಸೆಟ್, ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ಡೈನಾಮಿಕ್ ಜಗತ್ತಿಗೆ ಸ್ಟ್ಯಾಟಿಕ್ ಟೈಪಿಂಗ್ ಅನ್ನು ತರುತ್ತದೆ. ಇದರ ಪ್ರಮುಖ ವೈಶಿಷ್ಟ್ಯಗಳಲ್ಲಿ ಒಂದು, ಇತರ ಮಾಡ್ಯೂಲ್‌ಗಳಿಂದ ಟೈಪ್‌ಗಳನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡುವ ಸಾಮರ್ಥ್ಯ. ಆದರೆ, ಕೇವಲ ಟೈಪ್ ಚೆಕಿಂಗ್‌ಗಾಗಿ ಬಳಸಲಾಗುವ ಟೈಪ್‌ಗಳನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡುವುದರಿಂದ ಅಂತಿಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಂಡಲ್‌ನಲ್ಲಿ ಅನಗತ್ಯ ಕೋಡ್ ಸೇರಬಹುದು. ಇದನ್ನು ಪರಿಹರಿಸಲು, ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ import type ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಪರಿಚಯಿಸಿತು. ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ import type ಬಗ್ಗೆ ವಿವರವಾಗಿ ಚರ್ಚಿಸುತ್ತದೆ, ಅದರ ಉದ್ದೇಶ, ಬಳಕೆ, ಪ್ರಯೋಜನಗಳು ಮತ್ತು ಸಂಭವನೀಯ ಸಮಸ್ಯೆಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ.

import type ಎಂದರೇನು?

import type ಎಂಬುದು ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ ನಿರ್ದಿಷ್ಟವಾದ ಸಿಂಟ್ಯಾಕ್ಸ್ ಆಗಿದ್ದು, ಇದು ಮಾಡ್ಯೂಲ್‌ನ ಯಾವುದೇ ರನ್‌ಟೈಮ್ ಮೌಲ್ಯಗಳನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡದೆ, ಕೇವಲ ಟೈಪ್ ಡೆಫಿನಿಷನ್‌ಗಳನ್ನು ಮಾತ್ರ ಇಂಪೋರ್ಟ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ, ನೀವು ಇನ್ನೊಂದು ಮಾಡ್ಯೂಲ್‌ನಿಂದ ಟೈಪ್ ಅನ್ನು ಟೈಪ್ ಅನೋಟೇಷನ್‌ಗಳು ಅಥವಾ ಟೈಪ್ ಚೆಕಿಂಗ್‌ಗಾಗಿ ಬಳಸಬೇಕಾದಾಗ, ಆದರೆ ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಅದರ ಯಾವುದೇ ಮೌಲ್ಯಗಳನ್ನು ಪ್ರವೇಶಿಸುವ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದಾಗ. ಇದು ನೇರವಾಗಿ ಸಣ್ಣ ಬಂಡಲ್ ಗಾತ್ರಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ ಏಕೆಂದರೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಂಪೈಲರ್, ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಕೇವಲ ಟೈಪ್ ಮಾಹಿತಿಗಾಗಿ ಬಳಸಿದ್ದರೆ, ಅದನ್ನು ಕಂಪೈಲೇಶನ್ ಸಮಯದಲ್ಲಿ ಕೈಬಿಡುತ್ತದೆ.

import type ಅನ್ನು ಏಕೆ ಬಳಸಬೇಕು?

import type ಬಳಸಲು ಹಲವಾರು ಬಲವಾದ ಕಾರಣಗಳಿವೆ:

import type ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು

import type ಗಾಗಿ ಸಿಂಟ್ಯಾಕ್ಸ್ ಸರಳವಾಗಿದೆ. ಸ್ಟ್ಯಾಂಡರ್ಡ್ import ಸ್ಟೇಟ್‌ಮೆಂಟ್ ಬಳಸುವ ಬದಲು, ನೀವು ಇಂಪೋರ್ಟ್ ಮಾಡಲು ಬಯಸುವ ಟೈಪ್‌ನ ಮೊದಲು import type ಅನ್ನು ಬಳಸುತ್ತೀರಿ. ಇಲ್ಲಿದೆ ಒಂದು ಮೂಲಭೂತ ಉದಾಹರಣೆ:

import type { User } from './user';

function greetUser(user: User): string {
  return `Hello, ${user.name}!`;
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ./user ಮಾಡ್ಯೂಲ್‌ನಿಂದ User ಟೈಪ್ ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡುತ್ತಿದ್ದೇವೆ. ನಾವು greetUser ಫಂಕ್ಷನ್‌ನಲ್ಲಿ ಟೈಪ್ ಅನೋಟೇಷನ್‌ಗಾಗಿ ಮಾತ್ರ User ಟೈಪ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದೇವೆ. User ಮಾಡ್ಯೂಲ್‌ನ ಮೌಲ್ಯಗಳು ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವುದಿಲ್ಲ.

import type ಅನ್ನು ಸಾಮಾನ್ಯ ಇಂಪೋರ್ಟ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದು

ನೀವು type ಕೀವರ್ಡ್ ಬಳಸಿ ಒಂದೇ ಸ್ಟೇಟ್‌ಮೆಂಟ್‌ನಲ್ಲಿ import type ಅನ್ನು ಸಾಮಾನ್ಯ ಇಂಪೋರ್ಟ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು:

import { someValue, type User, type Product } from './module';

function processUser(user: User): void {
  // ...
}

console.log(someValue);

ಈ ಸಂದರ್ಭದಲ್ಲಿ, someValue ಅನ್ನು ಸಾಮಾನ್ಯ ಮೌಲ್ಯವಾಗಿ ಇಂಪೋರ್ಟ್ ಮಾಡಲಾಗಿದೆ, ಆದರೆ User ಮತ್ತು Product ಅನ್ನು ಕೇವಲ ಟೈಪ್‌ಗಳಾಗಿ ಇಂಪೋರ್ಟ್ ಮಾಡಲಾಗಿದೆ. ಇದು ಒಂದೇ ಮಾಡ್ಯೂಲ್‌ನಿಂದ ಮೌಲ್ಯಗಳು ಮತ್ತು ಟೈಪ್‌ಗಳನ್ನು ಒಂದೇ ಸ್ಟೇಟ್‌ಮೆಂಟ್‌ನಲ್ಲಿ ಇಂಪೋರ್ಟ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಎಲ್ಲವನ್ನೂ ಟೈಪ್‌ಗಳಾಗಿ ಇಂಪೋರ್ಟ್ ಮಾಡುವುದು

ನೀವು ಯಾವುದೇ ಮೌಲ್ಯಗಳನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡದೆ ಮಾಡ್ಯೂಲ್‌ನಿಂದ ಎಲ್ಲಾ ಟೈಪ್‌ಗಳನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಬೇಕಾದರೆ, ನೀವು import type ಜೊತೆಗೆ ನೇಮ್‌ಸ್ಪೇಸ್ ಇಂಪೋರ್ಟ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಬಳಸಬಹುದು:

import type * as Types from './types';

function processData(data: Types.Data): void {
  // ...
}

ಇಲ್ಲಿ, ನಾವು ./types ಮಾಡ್ಯೂಲ್‌ನಿಂದ ಎಲ್ಲಾ ಟೈಪ್‌ಗಳನ್ನು Types ನೇಮ್‌ಸ್ಪೇಸ್‌ಗೆ ಇಂಪೋರ್ಟ್ ಮಾಡುತ್ತೇವೆ. ನಂತರ ನಾವು Types. ಪ್ರಿಫಿಕ್ಸ್ ಬಳಸಿ ಟೈಪ್‌ಗಳನ್ನು ಪ್ರವೇಶಿಸಬಹುದು.

ವಿವಿಧ ಪ್ರಾಜೆಕ್ಟ್ ಪ್ರಕಾರಗಳಲ್ಲಿ ಉದಾಹರಣೆಗಳು

`import type` ನ ಪ್ರಯೋಜನಗಳು ವಿವಿಧ ಪ್ರಾಜೆಕ್ಟ್ ಪ್ರಕಾರಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತವೆ. ಇಲ್ಲಿ ಕೆಲವು ಉದಾಹರಣೆಗಳಿವೆ:

ಉದಾಹರಣೆ 1: ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್

ನಿರ್ದಿಷ್ಟ ಟೈಪ್‌ಗಳೊಂದಿಗೆ ಪ್ರಾಪ್ಸ್ ಸ್ವೀಕರಿಸುವ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ:

import React from 'react';
import type { User } from './user';

interface Props {
  user: User;
}

const UserProfile: React.FC<Props> = ({ user }) => {
  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
};

export default UserProfile;

ಈ ರಿಯಾಕ್ಟ್ ಉದಾಹರಣೆಯಲ್ಲಿ, `import type { User } from './user';` ಕೇವಲ `User` ನ ಟೈಪ್ ಡೆಫಿನಿಷನ್ ಮಾತ್ರ ಇಂಪೋರ್ಟ್ ಆಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಬಂಡಲ್ ಗಾತ್ರವನ್ನು ಉತ್ತಮಗೊಳಿಸುತ್ತದೆ. ನಾವು ನೇರವಾಗಿ 'user' ಮಾಡ್ಯೂಲ್‌ನ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸುತ್ತಿಲ್ಲ; ನಾವು ಆ ಮಾಡ್ಯೂಲ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ 'User' *ಟೈಪ್* ಅನ್ನು ಮಾತ್ರ ಬಳಸುತ್ತಿದ್ದೇವೆ.

ಉದಾಹರಣೆ 2: Node.js ಬ್ಯಾಕೆಂಡ್

Node.js ಬ್ಯಾಕೆಂಡ್ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ, ನೀವು ಡೇಟಾಬೇಸ್ ಮಾದರಿಗಳನ್ನು ಟೈಪ್‌ಗಳಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು:

import type { User } from './models';
import { createUser } from './db';

async function registerUser(userData: User): Promise<void> {
  await createUser(userData);
}

ಇಲ್ಲಿ, `import type { User } from './models';` ಕೇವಲ `User` ಟೈಪ್ ಮಾತ್ರ ಟೈಪ್ ಚೆಕಿಂಗ್‌ಗೆ ಅಗತ್ಯವಿದ್ದರೆ, ಸಂಪೂರ್ಣ `models` ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಬಂಡಲ್‌ನಲ್ಲಿ ಸೇರಿಸುವುದನ್ನು ತಪ್ಪಿಸುತ್ತದೆ. `createUser` ಫಂಕ್ಷನ್ *ರನ್‌ಟೈಮ್* ಬಳಕೆಗೆ ಅಗತ್ಯವಿರುವುದರಿಂದ ಅದನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಲಾಗಿದೆ.

ಉದಾಹರಣೆ 3: ಆಂಗ್ಯುಲರ್ ಸರ್ವಿಸ್

ಆಂಗ್ಯುಲರ್ ಸರ್ವಿಸ್‌ನಲ್ಲಿ, ನೀವು ಒಂದು ಟೈಪ್ ಅನ್ನು ಬಳಸುವ ಸರ್ವಿಸ್ ಅನ್ನು ಇಂಜೆಕ್ಟ್ ಮಾಡಬಹುದು:

import { Injectable } from '@angular/core';
import type { Product } from './product.model';
import { ProductService } from './product.service';

@Injectable({
  providedIn: 'root',
})
export class OrderService {
  constructor(private productService: ProductService) {}

  getFeaturedProducts(): Product[] {
    return this.productService.getProducts().filter(p => p.isFeatured);
  }
}

`productService.getProducts()` ಮೆಥಡ್‌ನಿಂದ ಹಿಂತಿರುಗಿಸಲಾದ ಡೇಟಾದ ರಚನೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು `Product` ಟೈಪ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. `import type { Product } from './product.model';` ಅನ್ನು ಬಳಸುವುದು ಕೇವಲ ಟೈಪ್ ಮಾಹಿತಿಯನ್ನು ಮಾತ್ರ ಇಂಪೋರ್ಟ್ ಮಾಡಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಆಂಗ್ಯುಲರ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ. `ProductService` *ಆದರೆ* ರನ್‌ಟೈಮ್ ಡಿಪೆಂಡೆನ್ಸಿ ಆಗಿದೆ.

ವಿವಿಧ ಅಭಿವೃದ್ಧಿ ಪರಿಸರಗಳಲ್ಲಿ import type ಬಳಸುವ ಪ್ರಯೋಜನಗಳು

import type ಅನ್ನು ಬಳಸುವ ಅನುಕೂಲಗಳು ವಿವಿಧ ಅಭಿವೃದ್ಧಿ ಸೆಟಪ್‌ಗಳಲ್ಲಿ ವಿಸ್ತರಿಸುತ್ತವೆ:

ಸಂಭವನೀಯ ಸಮಸ್ಯೆಗಳು

import type ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದ್ದರೂ, ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದ ಕೆಲವು ಎಚ್ಚರಿಕೆಗಳಿವೆ:

import type ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

import type ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಲು, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:

ಅಂತಾರಾಷ್ಟ್ರೀಕರಣ (i18n) ಮತ್ತು ಸ್ಥಳೀಕರಣ (l10n) ಪರಿಗಣನೆಗಳು

ಅಂತಾರಾಷ್ಟ್ರೀಕರಣ (i18n) ಮತ್ತು ಸ್ಥಳೀಕರಣ (l10n) ಅಗತ್ಯವಿರುವ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಾಗ, import type ನಿಮ್ಮ ಕೋಡ್ ಮೇಲೆ ಹೇಗೆ ಪರಿಣಾಮ ಬೀರಬಹುದು ಎಂಬುದನ್ನು ಪರಿಗಣಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಇಲ್ಲಿ ಕೆಲವು ಅಂಶಗಳನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕು:

ವಿವಿಧ ದೇಶಗಳಲ್ಲಿ ಉದಾಹರಣೆಗಳು

import type ಅನ್ನು ವಿವಿಧ ದೇಶಗಳಲ್ಲಿ ವಿವಿಧ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದನ್ನು ವಿವರಿಸುವ ಕೆಲವು ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ:

ತೀರ್ಮಾನ

import type ಎಂಬುದು ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿನ ಒಂದು ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ಇದು ಮಾಡ್ಯೂಲ್‌ನಿಂದ ಯಾವುದೇ ರನ್‌ಟೈಮ್ ಮೌಲ್ಯಗಳನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡದೆ, ಕೇವಲ ಟೈಪ್ ಡೆಫಿನಿಷನ್‌ಗಳನ್ನು ಮಾತ್ರ ಇಂಪೋರ್ಟ್ ಮಾಡುವ ಮೂಲಕ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಸುಧಾರಿತ ಬಂಡಲ್ ಗಾತ್ರಗಳು, ಕಡಿಮೆ ಸರ್ಕ್ಯುಲರ್ ಡಿಪೆಂಡೆನ್ಸಿಗಳು, ವರ್ಧಿತ ಕಾರ್ಯಕ್ಷಮತೆ, ಮತ್ತು ಉತ್ತಮ ಕೋಡ್ ಸ್ಪಷ್ಟತೆಗೆ ಕಾರಣವಾಗಬಹುದು. ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ನಲ್ಲಿ ವಿವರಿಸಿದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನೀವು ಹೆಚ್ಚು ದಕ್ಷ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಬರೆಯಲು import type ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಬಹುದು. ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ವಿಕಸನಗೊಳ್ಳುತ್ತಲೇ ಇರುವುದರಿಂದ, ಸ್ಕೇಲೆಬಲ್ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು import type ನಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.