在开发中遇到参数不清不楚的情况时,使用TS和不使用 TS(如纯 JS)会有不同的处理方式

145 阅读2分钟

在开发中遇到参数不清不楚的情况时,使用 TypeScript(TS)和不使用 TypeScript(如纯 JavaScript,JS)会有不同的处理方式,以下是具体介绍:

使用 TypeScript 的处理方式

  • 明确类型定义:通过interfacetype关键字来定义参数的类型结构。如果参数是一个对象,可以定义其包含哪些属性以及每个属性的类型。例如:

typescript

interface User {
  name: string;
  age: number;
  email?: string; // 可选属性
}

function processUser(user: User) {
  // 处理用户对象的逻辑
  console.log(`用户姓名:${user.name},年龄:${user.age}`);
  if (user.email) {
    console.log(`用户邮箱:${user.email}`);
  }
}

这样,当调用processUser函数时,TypeScript 会检查传入的参数是否符合User接口的定义,不符合则会报错。

  • 使用联合类型或可选类型:如果参数的类型不确定,可以使用联合类型来表示它可能的几种类型。例如,一个函数可能接受一个字符串或者一个数字作为参数,可以这样定义:

typescript

function processValue(value: string | number) {
  if (typeof value === 'string') {
    console.log(`字符串值:${value}`);
  } else {
    console.log(`数字值:${value}`);
  }
}

对于可能存在也可能不存在的参数,可以使用可选类型(在属性名后加?)来定义,如上述User接口中的email属性。

  • 进行类型断言:在某些情况下,开发者可能比 TypeScript 更清楚某个参数的实际类型,可以使用类型断言来告诉 TypeScript 该参数的类型。例如:

typescript

function processElement(element: HTMLElement | null) {
  if (element !== null) {
    // 使用类型断言告诉TypeScript element不为null
    const inputElement = element as HTMLInputElement;
    inputElement.value = 'Hello';
  }
}

不使用 TypeScript 的处理方式

  • 进行数据验证:在函数内部通过typeofinstanceof等操作符进行数据类型的判断和验证。例如:

javascript

function processUser(user) {
  if (typeof user !== 'object' || user === null) {
    throw new Error('参数必须是对象');
  }
  if (typeof user.name !== 'string') {
    throw new Error('用户姓名必须是字符串');
  }
  if (typeof user.age !== 'number') {
    throw new Error('用户年龄必须是数字');
  }
  console.log(`用户姓名:${user.name},年龄:${user.age}`);
  if (user.email) {
    console.log(`用户邮箱:${user.email}`);
  }
}

这种方式需要开发者在每个可能出现参数类型问题的地方手动进行验证,比较繁琐且容易遗漏。

  • 使用默认参数值:为函数参数设置默认值,以确保在参数未传入或传入的值不符合预期时,函数有合理的默认行为。例如:

javascript

function processValue(value = 0) {
  if (typeof value === 'string') {
    console.log(`字符串值:${value}`);
  } else {
    console.log(`数字值:${value}`);
  }
}
  • 采用防御式编程:在函数内部对参数进行各种可能的检查和处理,以防止因参数问题导致程序出错。例如,在处理一个可能是数组也可能不是数组的参数时:

javascript

function processArrayLike(arr) {
  if (!Array.isArray(arr)) {
    // 如果不是数组,将其转换为数组
    arr = [arr];
  }
  // 对数组进行处理的逻辑
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }
}

总的来说,TypeScript 通过静态类型检查在编译阶段就能发现参数类型相关的错误,提高了代码的可靠性和可维护性;而不使用 TypeScript 时,需要开发者在运行时通过手动验证和防御式编程来处理参数的不确定性,对开发者的经验和代码编写的严谨性要求较高。