TypeScript 实践的收获与反思


const name: string = 'Tom'

const age: number = 20

const isMale: boolean = false

type Gender = 'male' | 'female'

interface Zhuxi {
  name: string
  gender: Gender
}
  • 能减少 Bug 吗?
  • 可以不看文档写代码?
  • 和 React 不好配合?
  • 老项目不好迁移?
  • 什么时候可以用?

能减少 Bug 吗?

不能。

大部分的 bug 是因为业务逻辑没想清楚

把 Bug 尽可能地转化成编译错误?

用类型系统来表达业务逻辑

做不到

TS 是个废物?

场景:接口改字段了

可以不看文档写代码?

不可以。

不再为了记住拼写,

而是记住相互关系。

TS 可以描述 Data Sharp

描述不了

字段之间的关系


interface Person {
    env: 'home' | 'outside',
    clothing?: 'T-shirt'
}

和 React 配合得不好?

够用。

但是需要小调整

1. event.target

<input onChange={(e: FormEvent<HTMLInputElement>) => {
    // Error
    // Property 'value' does not exist on type 'EventTarget'
    const v = e.target.value
}} />

event targets:

  • Element
  • document
  • window
  • XMLHttpRequest
  • AudioNode
  • AudioContext
  • ...

event.currentTarget

仍然会有尴尬...

// antd 的 checkbox
<Checkbox onChange={e => {
    // Error
    // cannot read property 'value' of undefined
    const v = e.currentTarget.value
}} />

2. defaultProps

interface Props {
    name?: string
}

class Com extends Component<Props> {
    static defaultProps = {
        name: '无名氏'
    }

    render() {
        // [ts] name may be undefined
        this.props.name
    }
}

    const { name = 'Tom' } = this.props

3. 高阶组件

decorator


@Form.create()
class Com extends Component<Props & FormProps> {
    render() {
        this.props.form...
    }
}


export default Com as React.ComponentClass<Props>

class Com extends Component<Props & FormProps> {
    render() {
        this.props.form...
    }
}


export default Form.create<Props>()(Com)

老项目不好迁移?

曾经是的。

今天依然,

但是...

--checkJs --allowJs

/**
 * @type {string}
 */
const name = 'Tom'

相当于:

const name: string = 'Tom'
/**
 * @typedef {Object} Person
 * @property {string} name
 * @property {'male' | 'female'} gender
 */

/**
 * @type {Person}
 */
const Tom = {name: '', gender: 'male'}

相当于

cconst Tom: Person = {...}

什么时候才可以用?

code base 要大,

至少10万行?

要多人协作,

至少5个人?

> 10万行

> 5人

Flow 官网的几句话:

  • code faster
  • code confidently
  • code bigger

END.