react: typescript interface useState issue

define interface:

interface ILoginState {
  imageId: string;
  imageSrc: string;
  username: string;
  password: string;
  verifyCode: string;
}

useState:

const [loginData, setLoginData] = useState(loginState)

update imageId && imageSrc:

setLoginData({
  ...loginData,
  imageId: res.data.id.
  imageSrc: res.data.content
})

antd inputchange:

onInputChange(e: FormEvent<HTMLInputElement>) {
  const inputName = e.currentTarget.id;
  const inputValue = e.currentTarget.value;
  setInputData({
    [inputName]: inputValue
  } as {[key in keyof ILoginState]:ILoginState[key]})
}

原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/11230813.html

时间: 2024-10-07 18:04:27

react: typescript interface useState issue的相关文章

react + typescript 学习

react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react 文档.typescript 文档都看过,例子也敲过了,对此也都有了一定的理解,但是把二者很好的结合在一起,还是遇到了一些问题.纯粹记录一些,当然也希望有优秀资源的,提供一下,分享一下.提前道谢了~ 学习曲线 首先,想到的是到 官网,看相关文档,会系统些. typescript 中文网 jsx ty

React + TypeScript 默认 Props 的处理

React 中的默认 Props 通过组件的 defaultProps 属性可为其 Props 指定默认值. 以下示例来自 React 官方文档 - Default Prop Values: class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } // Specifies the default values for props: Gr

React + TypeScript:元素引用的传递

React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. React 中的元素引用 正常的组件中,可通过创建对元素的引用来获取到某元素然后进行相应操作.比如元素加载后将焦点定位到输入框. class App extends Component { constructor(props){ super(props); this.inputRef = Reac

React+TypeScript

新建项目 新建工程文件夹 1 $ mkdir TypeScriptDemo && cd TypeScriptDemo 初始化工程 除了package name 其他都默认敲回车即可 1 2 3 4 $ npm init package name: (TypeScriptDemo) TypeScriptDemo ... Is this ok? (yes) yes 组织目录结构 src目录存放工程代码,dist最终由webpack生成 1 2 3 4 TypeScriptDemo/ ├─ di

使用react搭建组件库(二):react+typescript

1 使用了react官方脚手架:create-react-app https://github.com/facebook/create-react-app npm run eject 可以打开配置文件 自定义配置文件 执行安装: npx create-react-app ts-with-react --typescript npx 只有在npm5.2以上版本才有 1.避免安装全局模块:临时命令,使用后删除,再次执行的时候再次下载 2.调用项目内部安装的模块用起来更方便:比如 在package.j

TypeScript Interface(接口)

类型检查专注于解析值所具有的"形态",这是TypeScript的核心原则之一.这个有时候被称为"duck typing"或者"structural subtyping".在TypeScript中,Interface中写入这些类型的命名规范,并且也是一种强有力的方式来对你的代码或者项目的外部代码进行约束. 我们来实现第一个接口要看看interface怎么工作的最简单的方式就是我们来写一个例子: function printLabel(labelle

在react typescript项目中如何使用没有@type定义的npm包

最近在用react重构我们的Angularjs项目,我使用的是create react-app 构建的 使用typescript的react项目 其中遇到一个问题就是有的npm包比如: react-loadable 在npm上是没有@types/react-loadable的那么我们如何在符合TS语法的基础上引入这个包呢? 首先正常npm install react-loadable --save 然后在项目中找到react-app-env.d.ts 加上以下代码即可: declare modu

react: typescript integrate withRouter

define interface: export interface INav { nav: string } export interface IModuleItem { state?: string; type?: string; uri?: string; } use in Function Component: import {INav} from "./path/to/menu.ts"; const AppNavigator = (props: INav & Rout

[TypeScript] Interface and Class

When to use Interface and when to use Class. Let's see one example: export interface Lesson { courseId: string; description: string; duration?: string; longDescription?: string; tags: string | string[]; url?: string; videoUrl: string; } export class