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