当前位置：首页 > news >正文

React+TypeScript入门

news 来源：原创 2024/5/19 5:29:02

本文面向读者：具有一定的javascript基础的开发人员

参考资料如下：

1.关于初始化环境配置请参见这位大佬的文章

2.React中文文档

相关文章
React+TypeScript入门
TypeScript+React入门-----引入css
React+TypeScript入门-----BrowserRouter
Q：什么是TypeScript？
A：TypeScript是JavaScript的超集，它可以编译成纯JavaScript.

Q：为什要使用TypeScript?
A:TypeScript有很多好处，说都说不完哈哈哈哈哈哈哈....

Q：TypeScript是如何调用React.js的？
A：TypeScript是通过react.d.ts声明文件媒介来调用React.js的，
在TypeScript中如果要调用.js模块，需要对应的.d.ts才可以
以下是关于使用TypeScript的入门介绍了
首先根据参考文章配置好一个简单的开发环境，配置完成之后文件目录结构如下
图片描述

首先我们写一个简单的示例

import * as React from 'react';
import * as ReactDOM from 'react-dom';
class Demo {
    name:string = "";
    constructor(){
        this.name = "Hello World";
    }
}
const render = () => {

    ReactDOM.render(
        <div>           
            {new Demo().name}
        </div>,
        document.querySelector('#app')
    )
}
render();

打开浏览器localhost:8080就可以看到Hello World了

接下来创建一个不带任何参数和状态的组件User

class User extends React.Component{
    render(){
        return <div>我是User组件</div>
    };
}

const render = () => {
    ReactDOM.render(
        <div>           
            {new Demo().name}
            <User />
        </div>,
        document.querySelector('#app')
    )
}

只需要很简单的几行代码就可以搞定

接下给组件添加传递props,和JavaScript不同的是，现在需要通过参数的形式显示传递props，组件才可以获取到。state也是如此
User继承自React.Component，React.Component是个泛型,接收三个参数P={},S={},SS=any，其中P代表props，S代表state,
SS我还没有搞清楚什么意思

interface UserState{
    createTime:Date
}
interface UserProp{
    name:string
}
class User extends React.Component<UserProp,UserState>{
    constructor(props:UserProp){
        super(props);
        this.state = {createTime: new Date()};        
    }
    render(){
        return <div>
                <p>我是User组件</p>
                <p>我的名字是{this.props.name}</p>
                <p>我的创建时间是{this.state.createTime.toString()}</p>                                
               </div>   
    };
}

const render = () => {
    ReactDOM.render(
        <div>           
            {new Demo().name}
            <User name="李雷"/>
            <User name="韩梅梅"/>
        </div>,
        document.querySelector('#app')
    )
}

如果你使用的是vscode，可以将鼠标移到React.Component上就会看到
图片描述