react+ts使用别名

最新推荐文章于 2024-08-05 08:00:00 发布

攒钱买房的迪迦

最新推荐文章于 2024-08-05 08:00:00 发布

阅读量668

点赞数

分类专栏： typescript 文章标签： typescript react

本文链接：https://blog.csdn.net/qq_33759361/article/details/119220433

版权

typescript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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
```