React Native创建Customer模型及TS转JS方法咨询（Angular背景）

Hey there! Since you come from an Angular background, I totally get why switching to React Native and navigating TypeScript vs. JavaScript differences might feel a bit confusing at first. Let's break this down clearly for you.

For TypeScript #

Since you already started with a TypeScript interface, this is straightforward in React Native. First, fix the typo (numner → number) in your interface, then define it in a dedicated file (like models/Customer.ts) for reusability:

// models/Customer.ts
export interface Customer {
  id: number;
  firstName: string;
  lastName: string;
}

You can then import and use this interface in any React Native component to enforce type safety:

import { Customer } from './models/Customer';

// Example usage in a component
const handleCreateCustomer = () => {
  const newCustomer: Customer = {
    id: 1,
    firstName: "Jane",
    lastName: "Smith"
  };
  // Do something with newCustomer (e.g., save to state/API)
};

For JavaScript #

JavaScript doesn't have built-in interfaces like TypeScript, but you can replicate the "model" behavior in a couple of common ways:

1. Factory Function (Most Common in React Native)
   This is a lightweight way to create consistent Customer objects without classes:

// models/Customer.js
export function createCustomer(id, firstName, lastName) {
  return {
    id,
    firstName,
    lastName
  };
}

Use it like this:

import { createCustomer } from './models/Customer';

const newCustomer = createCustomer(2, "John", "Doe");

2. ES6 Class (Similar to Angular Class Models)
   If you prefer a class-based approach (closer to how you might define models in Angular), you can use a class:

// models/Customer.js
export class Customer {
  constructor(id, firstName, lastName) {
    this.id = id;
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

Use it with the new keyword:

import { Customer } from './models/Customer';

const newCustomer = new Customer(3, "Bob", "Brown");

Your original TypeScript code (with the typo fixed) is:

export interface Customer {
  id: number;
  firstName: string;
  lastName: string;
}

Since JavaScript doesn't support interfaces (they're a TypeScript type-checking feature only), you don't "convert" the interface directly to a runtime JS construct. Instead, you use one of the approaches above (factory function or class) to create consistent Customer objects.

If you want type hints in JavaScript (to mimic TypeScript's safety), you can add JSDoc comments:

/**
 * @typedef {Object} Customer
 * @property {number} id - Unique customer ID
 * @property {string} firstName - Customer's first name
 * @property {string} lastName - Customer's last name
 */

/**
 * Creates a new Customer object
 * @param {number} id
 * @param {string} firstName
 * @param {string} lastName
 * @returns {Customer}
 */
export function createCustomer(id, firstName, lastName) {
  return { id, firstName, lastName };
}

This will give you auto-completion and type hints in editors like VS Code, even in a JavaScript project.

内容的提问来源于stack exchange，提问作者Shashika Virajh