typescript学习笔记——杂记

2019 / 06 / 09

端午的三天假期就要结束,刷朋友圈可以看到各种各样的朋友发出自己多姿多彩的生活的照片,然后付一句真有收获作为标题,相比之下,我在家里呆了三天三夜听起来显得十分凄凉。

当然抽一个小长假做一个还算的系统的学习,让自己的技术略微进阶一下得到的收获当然也是非常大的,非常开心自己能在三天时间强迫自己学了一遍两年前就接触到但一直没有系统学习的typescript文档。

前言

当学会使用typescript的高级类型,尤其是见识过里边的一些内置的工具之后,会觉得ts其实也不过如此,但事实上真的拿去在react项目中写的时候会发现各种各样的棘手的问题。比如高阶组件,比如React内置的类型和DOM类型等等问题,都还需要开发者去一一了解和解决。

命名空间

当我们使用一个第三方库的时候,很有可能需要额外引入一个@types开头的package,这个就是这个库的命名空间。比如React中有非常多的内置类型。

内置的全局类型,typescript会默认导出一份完备的全局类型,包括dom, bom, ecma中用到的绝大多数的方法和全局变量。所以我们才能非常舒服的使用dom和浏览器内置的方法。

比如在type中输入HTML可以看到IDE关于你需要的dom类型的提示。

DOM属性

dom的命名都是HTMLButtonElement之类额方法,所以需要用到那个类型之间使用就好了。

还有一套关于属性的

VDOM的Event和Attributes

react在dom的基础上搞了一套功能完整虚拟dom,同时也提供了一套功能完整的事件系统。这个需要引入@types/react才能使用。vdom的属性和命名和dom的一摸一样,以至于我们根本不需要记住什么,另外也提供事件handler,输入dom就可以获得这个dom的react事件。

interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
onClick: React.ReactEventHandler<HTMLDivElement>
}

ts的命名空间

有那么多的全局变量,所以他们都是存在哪里的呢,node_modules下的@types中可以很清晰的看到所有需要的类型的package,typescript初始化项目的时候会去读取这个下边的所有类型作为这个项目的命名空间,所以不需要担心引入的资源的命名问题,几乎所有的优秀的package都有ts支持。

当然很有可能需要你在使用的过程中了解一下需要用到的类型。

自己开发项目的过程中也会需要用到一些全局类型,这种可以在tsconfig的include中配置作为全局类型的路径。

高阶组件

高阶组件中需要用到范式来解决组件属性的问题,比如withLog组件就需要log原始组件的name,然后原封不懂的返回,需要通过泛型类将Props并且再注入到返回的组件中。

export function withLog<P>(UnwrappedComponent: React.ComponentType<P>) {
return class WrappedComponent extends React.Component<P> {
render() {
console.log(UnwrappedComponent.displayName)

const props = this.props
return <UnwrappedComponent {...props} />
}
}
}

规范

ts文档中规范方面写的很少,本身ts就可以算得上是一种一种规范,引导开发者写出更安全可靠可读可测试的代码。ts主要写了两个方面的规范

不要使用包装类型

这个是我最开始的疑问,string和String有什么区别呢?

string是ts的基本类型,而String是一个类,所以结果就是前者的name是一个字符串字面量,后者是个对象,这回导致一些不必要的麻烦。

// Right
interface Person {
name: string
age: number
}

// Wrong
interface Person {
name: String
age: Number
}

使用函数重载注意的点

1. 最精确的定义放在最前边

2. 可选参数导致函数重载不要定义重载

3. 可以使用联合类型解决就不要用重载

嗨,请先 登录

加载中...
(๑>ω<๑) 又是元气满满的一天哟