用Typescript 写 React

用Typescript 写 React

/* 用Typescript 写 React */
// 将文件格式改为.tsx
// 此处是引用示例
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import TodoInput from './TodoInput'
ReactDOM.render((
    <TodoInput
        color="red"
    />
), document.getElementById('app'))

import * as React from 'react'; // 必须使用 * as 引入

//定义类型
interface TodoInputProps {
  color: string;
}

interface TodoInputState {
  value: string;
}

export default class TodoInput extends React.Component<TodoInputProps, TodoInputState> {
  // 可以不在构造函数内写state
  public state = {
  value: ''
}

// public constructor(props) {
//     super(props);
//     this.state = {
//         value: ''
//     };
// }

private onhandleChange(e: React.ChangeEvent<HTMLInputElement>) {
  this.setState({
    value: e.target.value
  });
  console.log(e.target.value);
}

public render() {
  let foo = 1 as any //将number类型转换为any类型
  return (
    <input 
      style={{ color: this.props.color }}
      value={ this.state.value }
      onChange={ this.onhandleChange.bind(this) }
      />
  );
}
}

答案

A B C

解析

使用 TS 写 React 需要注意以下几点：

• 组件后缀名应该为 .tsx

• jsx 作为一种新语法，所以需要在 tsconfig.json 设置使支持 jsx 语法，设置如下：

  {
    ...,
    "compilerOptions": {
        "jsx": "react",
    },
    ...
  }
  

• webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。本身只支持处理 JS 文件。如果需要处理其它类型文件，如 css 文件，需要借助 loader 的能力。所以我们需要使用 ts-loader 处理 tsx 文件。

所以正确答案为 A B C。

React 静态属性

/* React 静态属性 */
// propTypes   // 用来限制传入的prop类型，缺点：仅支持部分类型，不能再编写时检查报错
// defaultProp // 用来定义prop参数
ReactDOM.render((
    <TodoInput/>
), document.getElementById('app'))

// ...

export default class TodoInput extends React.Component<TodoInputProps, TodoInputState> {
    static defaultProps: TodoInputProps = {
        color: 'blue'   //需将prop设置为可选属性
    }

    // ...
}

答案

A C

解析

props 和 state 是 React 中比较重要的概念。

• props 和 state 的改变，均会触发 render 函数，从而更新用户界面。
• props 用来表示组件外部的状态，state 用来表示组件内部的状态

如果需要从父组件向子组件传递数据，那么要使用 props。state 用于管理组件内部的状态。
所以正确答案为 A C。

React 内置工具类型

/* React 内置工具类型 */
import * as React from 'react'

interface TodoItemProps {
    content: string;
}

// 函数式写法
// export default function TodoItem(props: TodoItemProps) {
//     return (
//         <li>
//             { props.content }
//         </li>
//     )
// }

// 使用react内置工具类型 示例1 使用SFC ,但该API已弃用
// const TodoItem: React.SFC<TodoItemProps> = ({ content }) => {
//     <li>
//         { content }
//     </li>
// }

// 新版使用的是React.FunctionComponent
const TodoItem: React.FunctionComponent<TodoItemProps> = ({ content }): any => {
    <li>
        {content}
    </li>
}

TodoItem.defaultProps  // 定义后则可以使用内置defualtProps等属性和方法

export default TodoItem

// 例子2
import * as React from 'react'

// 定义样式，但没有准确的类型，添加属性没有代码提示
// 添加React.CSSProperties 则由代码提示
const todoItemStyle: React.CSSProperties = {
    color: 'red',
    fontSize: 16
}

interface TodoItemProps {
    content: string;
}

const TodoItem_8202: React.FunctionComponent<TodoItemProps> = ({ content }): any => {
    <li style={todoItemStyle}>
        {content}
    </li>
}

export default TodoItem_8202