使用Crypto-JS结合TypeScript时遇类型错误：string无法赋值给WordArray

问题原因 #

Crypto-JS的AES加密/解密配置里，iv参数要求是WordArray类型，直接传入字符串会触发TypeScript类型检查错误：Type 'string' is not assignable to type 'WordArray'. ts(2322)。

解决方案 #

使用Crypto-JS提供的编码解析方法，将字符串格式的iv（以及key）转换为WordArray类型：

• 若是UTF-8字符串，用CryptoJS.enc.Utf8.parse()
• 若是十六进制字符串，用CryptoJS.enc.Hex.parse()

修正后的完整代码 #

import { FC, useEffect } from "react";
import CryptoJS, { AES } from "crypto-js";

const Encryption: FC = () => {
  // 把字符串key和iv转换为WordArray类型，适配Crypto-JS的类型要求
  const application = {
    key: CryptoJS.enc.Utf8.parse("key"),
    iv: CryptoJS.enc.Utf8.parse("iv")
  };

  const encrypt = (data: string) =>
    AES.encrypt(data, application.key, {
      iv: application.iv, // 类型匹配，不再报错
    }).toString();

  const decrypt = (data: string) =>
    AES.decrypt(data, application.key, { iv: application.iv }).toString(
      CryptoJS.enc.Utf8
    );

  useEffect(()=>{
     const data = "hi";
     console.log({encrypted: encrypt(data), decrypted: decrypt(encrypt(data))});
  },[]);

  return <></>;
}

额外注意事项 #

• 实际使用时，要确保key和iv的长度符合AES加密标准：比如AES-128需要16字节的key和iv，AES-256需要32字节，否则可能导致加密/解密失败。
• 如果你的密钥是从外部获取的字符串，转换时要选择对应编码的解析方法，避免乱码或类型错误。

内容的提问来源于stack exchange，提问作者Kim Joseph Penaloza