本文面向读者:具有一定的javascript基础的开发人员
参考资料如下:
相关文章
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上就会看到
入门就写先到这里吧