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.
Typescript doubt
By newraina
Typescript doubt
- 106