关于typescript经常出现的类型匹配的问题

在 TypeScript（TS）中，确实对类型的审查比较严格，相对 JavaScript 更容易出现类型匹配的问题，但这并不完全是缺点，而是具有很多好处。其实吧，有时候有时候代码报错解决是

**一、严格类型审查的优点**

interface HasMethod {
doSomething(arg: number): string;
}
let obj: HasMethod = {
  doSomething(arg: string): number {
  return 0;
  }
 };

1. 错误检测
   - 在开发阶段，TypeScript 编译器能够检测出许多类型不匹配的错误。例如，尝试将一个字符串赋值给一个期望为数字类型的变量时，编译器会报错。这有助于在早期发现潜在的错误，减少运行时错误的发生。
   - 函数参数和返回值的类型检查可以确保函数的正确调用和使用，避免因类型不匹配导致的意外行为。

2. 代码可读性和可维护性
   - 明确的类型声明使代码更具可读性。其他开发者在阅读代码时，可以快速了解变量、参数和返回值的类型，从而更好地理解代码的意图和功能。
   - 当代码库规模较大时，严格的类型检查有助于维护代码的一致性和稳定性。类型信息可以作为一种文档形式，帮助开发者更好地理解和修改代码。

3. 智能提示和自动补全
   - 现代的代码编辑器可以利用 TypeScript 的类型信息提供强大的智能提示和自动补全功能。这大大提高了开发效率，减少了手动输入错误的可能性。

以下是对 TypeScript 中常见类型不匹配问题及解决方案的汇总，并以代码示例展示：

**一、基本类型不匹配**

1. 数字与字符串不匹配：
   - 错误示例：

let num: number = "not a number";

 - 解决方案：使用类型转换，如`Number()`函数。

let str = "123";
let num: number = Number(str);

2. 布尔值与其他类型不匹配：
   - 错误示例：

let isTrue: boolean = 123;

  - 解决方案：通过逻辑判断得到布尔值。

let num = 5;
let isEven = num % 2 === 0; 

**二、对象类型不匹配**

1. 属性缺失或多余：
   - 错误示例：

interface Person {
   name: string;
   age: number;
}
let person: Person = { name: "Alice", age: 30, gender: "female" };

 - 解决方案：严格按照接口定义创建对象，或使用类型断言扩展属性。

interface Person {
       name: string;
       age: number;
     }
     let person: Person = { name: "Alice", age: 30 };
     let extendedPerson = { name: "Bob", age: 35, gender: "male" } as Person & { gender: string };

2. 方法签名不匹配：
   - 错误示例：

interface HasMethod {
  // 定义一个接口 HasMethod，其中包含一个方法 doSomething
  // 这个方法接受一个参数 arg，类型为 number
  doSomething(arg: number): string;
}
let obj: HasMethod = {
  // 创建一个变量 obj，并指定其类型为 HasMethod 接口
  doSomething(arg: string): number {
    // 这里实现了 doSomething 方法，但参数类型为 string，与接口中定义的 number 类型不匹配
    // 方法返回值为 number，也与接口中定义的 string 类型不匹配
    return 0;
  }
};

   - 解决方案：确保实现接口的对象中的方法参数和返回值类型与接口中定义的完全一致。

interface HasMethod {
doSomething(arg: number): string;
}
let obj: HasMethod = {
doSomething(arg: number): string {
return arg.toString();
}
};
    

**三、数组类型不匹配**

1. 元素类型不匹配：
   - 错误示例：

let arr: number[] = [1, 2, "three"];

 - 解决方案：确保所有元素类型与数组声明类型一致，或使用联合类型数组、`any`数组（但要谨慎使用）。

let arr: (number | string)[] = [1, 2, "three"];
 let arrAny: any[] = [1, 2, "three"];
    

**四、函数类型不匹配**

1. 参数类型不匹配：
   - 错误示例：

function add(a: number, b: number): number {
   return a + b;
}
add("one", "two");

  - 解决方案：确保传入参数类型与函数定义一致，可进行类型转换。
   

function add(a: number, b: number): number {
  return a + b;
}
add(Number("10"), 20);

2. 返回值类型不匹配：
   - 错误示例：

function returnNumber(): number {
 return "not a number";
}

 - 解决方案：确保函数返回值类型与声明一致，可进行类型转换。

function returnNumber(): number {
  return Number("123");
}

**五、联合类型和交叉类型不匹配**

1. 联合类型使用错误：
   - 错误示例：  

let value: string | number;
  value.toUpperCase();

- 解决方案：使用类型守卫判断类型后进行操作。

let value: string | number;
if (typeof value === "string") {
value.toUpperCase();
} else if (typeof value === "number") {
 value.toFixed(2);
}

2. 交叉类型使用错误：
   - 错误示例：

interface A {
aProp: string;
}
interface B {
bProp: number;
}
let obj: A & B = { aProp: "abc", bProp: "not a number" };

 - 解决方案：确保对象同时满足所有组成类型的约束。     

interface A {
aProp: string;
}
 interface B {
 bProp: number;
}
let obj: A & B = { aProp: "abc", bProp: 123 };   

**六、第三方库类型问题**

1. 类型声明不完整或不准确：
   - 解决方案：查看文档和类型声明文件，或自己编写类型声明文件，使用`@types`包。

2. 版本更新导致类型不匹配：
   - 解决方案：根据更新日志和文档调整代码，或等待新的类型声明文件。

以下是针对第三方库类型问题的代码示例：

一、类型声明不完整或不准确的情况

假设我们使用一个名为customLibrary的第三方库，但是其类型声明不完整，比如有一个函数的实际返回值比类型声明中包含更多的属性。

1. 没有完整类型声明时的错误示例：

import { someFunction } from 'customLibrary';

const result = someFunction();
console.log(result.extraProperty); 
// 错误：类型 '{ knownProperty: string; }' 上不存在属性 'extraProperty'

1. import { someFunction } from 'customLibrary';

   • 这行代码从名为customLibrary的模块中导入了一个名为someFunction的函数。

2. const result = someFunction();

   • 调用导入的someFunction函数，并将其返回值赋给变量result。

3. console.log(result.extraProperty);

   • 尝试访问result对象的extraProperty属性。但是，根据错误提示可知，当前result的类型被推断为{ knownProperty: string; }，这个类型中不存在extraProperty属性，所以会报错。

可能的原因是，customLibrary模块中的someFunction函数实际返回的对象包含了一个名为extraProperty的属性，但在当前的类型声明中没有体现出来，导致 TypeScript 编译器在进行类型检查时认为不存在这个属性。

关于类型声明在 TypeScript 中，类型声明是用来描述变量、函数返回值、对象属性等的类型信息的。当从一个模块（如这里的customLibrary）导入一个函数或其他值时，TypeScript 会根据模块的类型声明文件（如果有）或者自动推断来确定导入的值的类型。

在这个例子中，可能由于customLibrary的类型声明不完整，没有明确指出someFunction返回的对象包含extraProperty这个属性。

编译器的类型检查TypeScript 编译器在编译代码时会进行严格的类型检查。这意味着它会检查代码中对变量和对象的操作是否符合其声明的类型。

当尝试访问result.extraProperty时，编译器会查看result的类型声明，发现当前声明的类型中不存在extraProperty这个属性。所以编译器会报错，提醒开发者可能存在错误的操作。

例如，如果一个对象被声明为只有属性a和b，但尝试访问它的属性c时，编译器就会报错，因为根据已知的类型声明，这个对象不应该有属性c。

总的来说，这句话强调了类型声明对于 TypeScript 编译器进行正确类型检查的重要性，以及不完整的类型声明可能导致的错误。

如果要解决这个问题，可以按照前面提到的方法，查看文档和类型声明文件，或者自己编写类型声明文件来补充完整的类型信息，以便正确地使用extraProperty属性。如果是因为第三方库版本更新导致的问题，可以根据更新日志调整代码，或者等待新的类型声明文件发布后再进行更新。

1. 解决方案 - 自己编写类型声明文件：

首先创建一个名为customLibrary.d.ts的文件，内容如下：

declare module 'customLibrary' {
  export interface CustomReturnType {
    knownProperty: string;
    extraProperty: number;
  }

  export function someFunction(): CustomReturnType;
}

 

然后在使用该库的文件中：

import { someFunction } from 'customLibrary';

const result = someFunction();
console.log(result.extraProperty); 
// 现在不会报错，因为我们补充了完整的类型声明

二、版本更新导致类型不匹配的情况

假设customLibrary在版本更新前，某个函数接受一个字符串参数，版本更新后改为接受一个对象参数。

1. 版本更新前的代码：

import { oldFunction } from 'customLibrary@1.0.0';

oldFunction('old parameter');

1. 版本更新后的错误示例：

import { oldFunction } from 'customLibrary@2.0.0';

oldFunction('old parameter'); 
// 错误：类型“string”的参数不能赋给类型“{ newProperty: number; }”的参数。

1. 解决方案 - 根据更新日志调整代码：

import { oldFunction } from 'customLibrary@2.0.0';

const newParam = { newProperty: 123 };
oldFunction(newParam);

或者等待新的类型声明文件发布后，如果新的类型声明文件解决了类型不匹配问题，就可以继续使用更新后的库而无需手动调整代码。