TypeScript笔记

学习

安装：npm install -g typescript
编译：tsc helloworld.ts

学习网站：

• https://www.tslang.cn/docs/home.html
• https://ts.xcatliu.com/introduction/what-is-typescript.html
• https://segmentfault.com/a/1190000038959316

相关教程：

• Vue3.x 从零开始（一）—— Vue-cli or Vite 构建 TypeScript 项目
• 在 Typescript 项目中，如何优雅的使用 ESLint 和 Prettier
• 了不起的 tsconfig.json 指南
• 官网：ESLint 可组装的 JavaScript 和 JSX 检查工具
• Eslint 超简单入门教程
• 在 Vue 项目中使用 Eslint+Prettier+Stylelint
• 使用 Vue-cli3 搭建 Vue+TypeScript 项目
• prettier - vscode 保存代码自动格式化插件安装与配置项备注

ts 遍历对象

ts 遍历对象不要使用for···in，使用for···of

• 理由：https://stackoverflow.com/questions/65300784/declare-key-type-of-for-in-loop-in-typescript
• 遍历的其他方式参考：TypeScript 小状况之遍历对象属性

const disabled = computed(() => {
  let flag = true;
  for (const [key, val] of Object.entries(formState)) {
    if (!val) {
      flag = true;
      break;
    } else {
      flag = false;
    }
  }
  return flag;
});

nodemon 运行 ts 文件

• 参考：https://juejin.cn/post/7035637086451400734
• todo：关于 ts 的配置文件，不是很清楚

vue3 选项式 API

报错：

类型“string | null”的参数不能赋给类型“string”的参数。 不能将类型“null”分配给类型“string”

类型“string | null”的参数不能赋给类型“string”的参数。 不能将类型“null”分配给类型“string”

上面报错是因为 16 行代码之前没有|| ''ts 的赋值较为严格，以此例警戒。

• 另外本例子中还需要转换字符串，undefined,null 等转化为””。不然数据回显会显示为 undefined。
• 另外还有一个类似问题：vue3 中的 reactive 对象赋值问题

interface FormState {
  input_id: string;
  password: string;
  remember: boolean;
}

// undefined,null等转化为""
const praseStrEmpty = (str: any) => {
  if (!str || str == "undefined" || str == "null") {
    return "";
  }
  return str;
};

let formState = reactive<FormState>({
  input_id: praseStrEmpty(String(route.query.user_id) || ""),
  password: praseStrEmpty(String(route.query.password) || ""),
  remember: true,
});

Property ‘replaceAll’ does not exist on type ‘string’

• ts 不能使用 js 的 String 的 API：replaceAll 方法
• 解决：使用其他字符串 api 来达到该目的，https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string
• todo：可能原因还有可能是自己的配置文件没有配置好