其他分享
首页 > 其他分享> > react+ts使用别名

react+ts使用别名

作者:互联网

react+typescript使用别名

创建文件(文件名必须使用.d.ts文件*)

// 文件名是index.d.ts
// declare 表示这个别名是一个全局的(在其他文件使用的时候,不需要导入,直接就可以使用)
declare namespace IndexInterface {
    interface bodyTitleInterface {
        name: String,
        id: Number,
        isShow: boolean
    }

    interface bodyContentInterface {
        model: any,
        id: string,
        type: string,
        width: number,
        height: number
    }
}

使用(在其他文件里使用)

import React from "react";
import '@/assets/static/css/index.less';
import LoadModel from '@/component/loadModel.tsx'
import head from '@/assets/static/img/17.png'
import body from '@/assets/static/img/22.png'
import file from '@/assets/model/obj/file.obj'
import {Pagination} from 'antd';
import {Link} from "react-router-dom"

class Index extends React.Component {
    body_title: Array<IndexInterface.bodyTitleInterface> = []
    render(): any {
        const {body_title, body_content} = this.state
        return <div className="container">
            <div className="body">
                <div className="body_title">
                    <ul>
                        {body_title.map((el: any, id: number) => {
                            return <li key={id} className={el.isShow ? 'active' : ''}
                                       onClick={this.changeBodyTitle(id)}>{el.name}		         
                                   </li>
                        })}
                    </ul>
                </div>
               </div>
        </div>
    }

    componentDidMount() {
    // 注意 这里的key和上面我们定义的是一样的
        const body_title = [
            {
                name: '陶瓷',
                isShow: true,
                id: 0
            },
            {
                name: '古币',
                isShow: false,
                id: 1
            },
            {
                name: '模型',
                isShow: false,
                id: 2
            }
        ]
        this.setState({body_title: body_title})
        this.allNum = Math.ceil(this.body_content.length / 9)

    }
}

export default Index
```

标签:body,name,title,ts,别名,isShow,react,import,id
来源: https://blog.csdn.net/qq_33759361/article/details/119220433