本人笔记地址分享:全部笔记、TypeScript所有学习笔记https://gitee.com/hongjilin/hongs-study-notes)

#目录

TypeScrpit问题

1、vsCode报错函数重复

我正在开始使用TypeScript，并且我正在遵循TypeScript in 5 minutes指南,而当我写了一个函数(如下面代码),并且确定没错问题时候报错

Duplicate function implementation.

  1. function jspang(){
  2.     let web : string ="hello World"
  3.     console.log(web)
  4. }
  5.  /*  */
  6. jspang()
  7. //`Duplicate function implementation.`函数重复

解决:

看起来像这是Visual Studio代码中的一个错误。 GitHub对此有几个问题，如here和here。对这些问题的评论意味着它是一个问题，然后被修复，并在v1.12.1中再次成为问题。

解决方案是运行tsc --init来初始化文件夹中的tsconfig.json。

2、在不同ts文件中声明同一个name时报错：

主要错误信息：

  1. 无法重新声明块范围变量“name”

我们前面明明（明明说管我什么事）没有声明name，但是却说我们重复声明了

  • 这次是因为我们的typescript 将 DOM typings 作为全局的运行环境；
  • 所以当我们声明 name时， 与 DOM 中的全局 name 属性出现了重名；
  1. //Demo1.ts
  2. let count :number=1
  3. //Demo2.ts
  4. let count :number=2

解决:

如何解决这个问题呢？

  • 有两种方案：去掉 DOM typings 的环境和声明模块

方式一：删除DOM typings的环境

但是这种办法对于我们来说并不合适，因为我们依然希望在DOM下编译我们的TypeScript代码

方式二：声明我们的ts文件为一个模块(推荐)

既然与全局的变量出现重名，那我们将脚本封装到模块（module）中，因为模块有属于自己的作用域，就不会和全局的产生冲突：

  • 在 Typescript 中，我们可以使用ES6的export来导出一个对象，并且该文件被视为 module
  1. let name = "coderwhy";
  2. export {}

3、模块类的导入与导出

当我尝试从一个ts文件中声明一个类或者一个对象或者一个变量 然后import到另外一个ts文件中,我发现我拿过来的值是undefined

解决

1、由于我用的是ts-node直接运行,我发现将之前编译的js文件删除,在运行就可以了

2、类的导入需要new进行实例化

代码示例
  1. demox.ts导出
  2. //声明一个类  
  3. class Animal {
  4.     name: string ="xx";
  5.     show(): string {
  6.         return this.name;
  7.     }
  8.     show1():void{
  9.         console.log(this.name)
  10.     }
  11. }
  12. //声明一个变量
  13.  let test:string="洪吉林"
  14. //导出方式
  15.  export{ Animal,test }
  16. //声明一个对象
  17. export const xiaohong = {
  18.     uname: "小洪",
  19.     age: 18
  20. }
  1. demox1.ts导入
  2. import  {Animal,xiaohong,test} from "./demox"
  3. let a=new Animal()
  4. a.show1()
  5. console.log(a.show())
  6. console.log(test)
  7. console.log(xiaohong)
  8. console.log(xiaohong.uname)
  9. /*
  10. xx
  11. xx
  12. 洪吉林
  13. { uname: '小洪', age: 18 }
  14. 小洪
  15. */

4、React - 类型“Readonly<{}>”上不存在属性

问题定位在了 TypeScript 上。
解决方案如下:
将 props 和 state 的类型定位成 any 就可以解决这个问题了!

  1. class Login extends Component <any,any>{}

5、继承state类型接口后使用setState修改报错缺少类型

类型“{ [x: string]: string; }”的参数不能赋给类型“IState | ((prevState: Readonly, props: Readonly) => IState | Pick | null) | Pick<…> | null”的参数。
类型“{ [x: string]: string; }”缺少类型“Pick”中的以下属性: username, password

  1. /* 定义state类型接口 */
  2. interface IState {
  3.     username: string,
  4.     password: string,
  5. }
  6.     //方法一:输入框改变事件,双向绑定数据
  7.     handleChange: (value: string, name: string) => void = (value, name) => {
  8.         this.setState({
  9.             [name]: value
  10.         })
  11.     }

其实是定义接口时没有写缺省,导致赋值时候只赋值一个报错

  1. interface IState {
  2.     username?: string,
  3.     password?: string,
  4. }

对象定义也可以用这个方法

  1. interface JWTInf{
  2.   verify?:any,
  3.   sign?:any,
  4.   verifysync?:any
  5. }
  6. const JWT:JWTInf ={}

6、TS引用json文件报错

Module ‘@/pages/components/util/list.json’ was resolved to ‘c:/Users/ZG/WebstormProjects/VsCodeProjects/yapi_system/src/pages/components/util/list.json’, but ‘—resolveJsonModule' is not used.

当我引用json时报错,这也是我一下子魔愣了没想到,我应该在typings.d.ts文件中这样声明,ts中引用json文件才不会报错

  1. //path: typings.d.ts
  2. declare module "*.json"

7、TS报错具有隐式any

Parameter ‘item’ implicitly has an ‘any’ type.

noImplicitAny 当表达式和申明 类型为any时，是否需要发出警告，设置true，则不警告

8、Ts报错,不能自定义属性标签

Type ‘{ children: Element[]; key: any; tag: any; onClick: (e: MouseEvent) => void; }’ is not assignable to type ‘DetailedHTMLProps‘.
Property ‘tag’ does not exist on type ‘DetailedHTMLProps‘.

解决

HTML支持自定义属性的data- 属性类型.你可以阅读更多 here.
Definition and Usage The data- attributes is used to store custom
data private to the page or application.

The data-* attributes gives us the ability to embed custom data
attributes on all HTML elements.

The stored (custom) data can then be used in the page’s JavaScript to
create a more engaging user experience (without any Ajax calls or
server-side database queries).

The data-* attributes consist of two parts:

The attribute name should not contain any uppercase letters,and must
be at least one character long after the prefix “data-”
The attribute value can be any string
Note: Custom attributes prefixed with “data-” will be completely ignored by the user agent.

而不是只使用size =“A4”,你可以使用data-size =“A4”

  1. <page className="page" tag={item.id}>//报错
  2. </page>
  3. <div className="page" data-tag={item.id}>//正确
  4.   // ....
  5. </div>

9、Ts报错,当操作dom节点操作

Property ‘className’ does not exist on type ‘Element | Text’.
Property ‘className’ does not exist on type ‘Text’.

原因:这是typescript的类型检查导致的，需要在querySelector或者其他查询语句方法前面加个类型断言。

  1.    let icon =  ReactDom.findDOMNode(document.getElementById('collect')) as HTMLElement;
  2.     icon.className=IconStyles.iconfont+" "+IconStyles.icon_shoucang1

10、关于时间格式问题

Ⅰ-赋值时间格式报错

  1. Type 'any[]' is not assignable to type '[Moment, Moment]'.Target requires 2 element(s) but source may have fewer.

TypeScrpit问题解决 - 图1

  1. 解决

```tsx interface ISearchParams { keyword:any, customerId:any, resDate: [Moment, Moment], buyDate:[Moment, Moment], format:string, loading:boolean }

class Store { @observable datas = []; @observable searchParams:ISearchParams = { keyword: ‘’, customerId: ‘’, resDate:[undefined, undefined], buyDate: [undefined, undefined], format: ‘YYYY-MM-DD’,
loading: false, }; } ```

Ⅱ-取出Moment格式中的具体时间报错

  1. 报错:property '_d' does not exist on type 'moment'.

  2. 出现错误原因分析:TypeScrpit问题解决 - 图2

    TypeScrpit问题解决 - 图3

  3. 解决

  4. 其实不用_d去取出来,Moment格式有相应的取出方法
    TypeScrpit问题解决 - 图4