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对象赋值问题 ```typescript 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({ 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：可能原因还有可能是自己的配置文件没有配置好