常用文档

# TypeScript

# 常见 JavaScript 类型

const isGood: boolean = true
const num: number = 3
const str: string = 'str'

const arr: number[] = [1, 2, 3]
const strArr: string[] = ['a', 'b']

const obj: {name: string} = {name: 'Joel'}
const notCertainObj: {[key: string]: any} = {name: 'Joel', age: 27}
const obj2: Record<string, any> = {name: 'Joel', age: 27}

const nul: null = null
const und: undefined = undefined

let anyVal: any = 3

onst timeId: NodeJS.Timer = setInterval(fn, 1000)
clearInterval(Number(timeId)) // 不转会报错。

Promise<T> // Promise

# DOM 相关类型

# 元素

const el:HTMLElement = document.querySelector('.el')
const divEl:HTMLDivElement = document.querySelector('div')
const inputEl:HTMLInputElement = document.querySelector('input')

# 事件

onClick = (event: Event) => {...}

# CSS

CSSStyleDeclaration

# React 相关类型

JSX.Element // 元素
React.ComponentType // 组件类型 
React.RefObject<HTMLDivElement> // class组件 ref
useRef<HTMLElement>(null) // 函数组件 ref

// 样式
React.CSSProperties

// 事件
React.SyntheticEvent<EventTarget> // 事件
React.ChangeEvent<HTMLInputElement> // change事件
React.KeyboardEvent<HTMLInputElement> // 键盘事件
React.MouseEvent<HTMLElement> // 鼠标事件
React.UIEvent<HTMLElement> // 滚动事件

React TypeScript Cheatsheets (opens new window)

# 给 js 加类型

文件名: xxx.d.ts。例如:

import React from 'react';

declare class X extends React.Component<any> {}

export default X;

# 第三方库 相关类型

moment.Moment

# 枚举

enum week {
  monday,
  tuesday,
  wednesday,
  thursday,
  friday,
  saturday,
  sunday = 0,
}

enum payType {
  wechat = '微信支付',
  ali = '支付宝'
}

# interface

interface Label {
  name: string
  size: 'sm' | 'md' | 'lg'
  des?: () => string
}

interface NeedPayLabel extends Label {
  price: number
}

# type

type BtnSize = 'sm' | 'md' | 'lg'

type Tree<T> = {
  value: T
  left: Tree<T>
  right: Tree<T>
}

# 工具泛型

# Partial <T>

将传入的属性变为可选项。

# Omit <T, K>

将传入的属性中剔除某些属性。如

Omit<{
  name: string,
  age: number, 
  des: string
}, 'name' | 'age'> // -> { des: string }

# Pick <T, K>

将传入的属性中选择某些属性。

# Readonly <T>

将传入的属性变为只读选项。

# 忽略 Lint

// @ts-ignore
// tslint:disable-next-line
// tslint:disable-line
/* tslint:disable */ // 这行代码以下的不 Lint
/* tslint:enable */ // 这行代码以下的 Lint

# 传入不被用到的函数参数

doSth(_:any, 'aaa') // _:any。 传 undefined, void 等都不行。

# .d.ts

引入index.js，lint 报 ts 错误。解决方案：创建个 index.d.ts，类似:

import React from 'react';
declare class XXX extends React.Component<any> {}
export default XXX;

— 完 —

整理ByJoel (opens new window)。微信号搜索: joel007。

← ahooks →