React 与 Typescript

Posted on Jan 20, 2019

input的事件类型

需要注意两点。

事件类型可能有两种

ChangeEvent 对应 event.target
FormEvent 对应 event.currentTarget

泛型对应元素，可能是HTMLInputElement 或 HTMLSelectElement 等。

const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.value) {
        setKeywords(event.target.value);
        props.onUpdateKeyword(event.target.value);
    }
}

class组件的类型

class组件需要定义props和state的类型：

interface IProps {
  addTodo: (input: string) => void;
}
interface IState {
  input: string;
}
class AddTodo extends React.Component<IProps, IState>{}

创建项目

creact-react-app可以直接创建 typescript 项目。

create-react-app my-app --scripts-version=react-scripts-ts

修改配置

把 tslint.json 修改为这样，能舒服一点：

{
  "extends": [
    "tslint:recommended", 
    "tslint-react", 
    "tslint-config-prettier"
  ],
  "defaultSeverity": "warning",
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  },
  "rules": {
    "object-literal-sort-keys": false,
    "no-console": false
  }
}

在package.json的script中加入这条，可以让tslint自动修复问题：

"lint": "tslint --fix -c ./tslint.json 'src/**/*{.ts,.tsx}'"

千万要注意，你的代码将被修改，所以要注意以下事项⚠️：

Commit the changes you have made to your code
Run TSLint with the --fix flag like above
Quickly review the changes TSLint has made
Make a new commit with these changes, or simply amend them to your previous commit

.d.ts 文件是使用js编写的api才用的。