是什么
- 静态类型语言， 写代码阶段就能检查错误，而非运行阶段
- 类型系统是最好的文档，增加代码可读性、可维护性
- 有一定学习成本
- ts最后被编译成js
创建第一个基于TS是react脚手架
- 安装 react 脚手架
npm install -g create-react-app
- 安装react的typescript项目
create-react-app my-app --template typescript
- 遇到权限问题执行下面指令，并选择 A
set-ExecutionPolicy RemoteSigned
TS类型
// 基本类型
var myname:string = 'hhh'
myname.substring(0, 1)
var myage:number = 100
myage.toFixed(1)
var myshow:boolean = true
myshow = false
var my:string | number = 'kkk'
my = 100
var myany:any = 100
// 数组
var list1:string[] = ['1', '2', '3'] // 数组里面只能放字符串
var list2:number[] = [1, 2, 3, 4]
var list3:(number | string)[] = [1, 2, '3']
// 数组另一种写法
var mylist1:Array<string> = ['1', '2', '3']
var mylist2:Array<string | number> = ['1', 2]
// 对象
interface IObj { // interface 接口
name: string,
age: number,
location?: string, // 可选属性 ，可以有可以没有
[propName: string]: any // 不关心的对象值
}
var obj1:IObj = {
name: 'hhh',
age: 100,
location: 'hu'
}
// 函数
function test1(a:string, b:string, c?:number) { // ?表示可传可不传
console.log(a, b)
return a.substring(0, 1) + b.substring(1, 2)
}
var myname:string = test1('aaa', 'bbb', 100)
// 字符串 函数结合
interface IObject {
name: string,
age: number,
getName: (name:string) => string // 规定函数形参数据类型，返回值数据类型
}
var obj2:IObject = {
name: 'zhangsan',
age: 18,
getName: (name: string) => {
return name
}
}
var name:string = obj2.getName('wangwu')
export default {}
类
class Bus {
private list:any = [] // 私有属性
public name = 'hhh' // 共有属性
protected age = 18 // 受保护的，孩子可以访问
}
class Child extends Bus { // 孩子可以访问父类中的protected属性
child() {
console.log(this.age)
}
}
interface IFunc{ // 函数接口，跟对象不一样，只需要写需要规定类型的就可以
getName:() => string
}
class A implements IFunc{
a1() {
}
a2() {
}
getName() {
return 'AAA'
}
}
class B implements IFunc {
b1() {
}
b2() {
}
getName() {
return 'BBB'
}
}
function init(obj:IFunc) {
obj.getName()
}
var objA = new A()
var objB = new B()
init(objA)
init(objB)
export default {}
类组件
状态
import React, { Component } from 'react'
interface IState {
name: string
}
export default class App extends Component<any, IState> {
state = {
name: 'hhh'
}
render() {
return (
<div>
app-{this.state.name.substring(0, 1).toUpperCase() + this.state.name.substring(1)}
<button onClick={() => {
this.setState({
name: 'kkk'
})
}}>click</button>
</div>
)
}
}
todolist
import React, { Component } from 'react'
interface IState {
input: string,
list: string[]
}
export default class App extends Component<any, IState> {
state = {
input: '',
list: []
}
inputRef = React.createRef<HTMLInputElement>()
render() {
return (
<div>
{/* <input value={this.state.input} onChange={(eve) => {
this.setState({
input: eve.target.value
})
}}></input> */}
<input ref={this.inputRef}></input>
<button onClick={() => {
console.log((this.inputRef.current as HTMLInputElement).value) // 类型断言as ,作用：断定Input标签
this.setState({
list: [...this.state.list, (this.inputRef.current as HTMLInputElement).value]
})
}}>add</button>
<div>
{
this.state.list.map((item, index) =>
<li key={item + index}>{item}</li>
)
}
</div>
</div>
)
}
}
props
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
<Children name='hhh'></Children>
</div>
)
}
}
interface IProps {
name: string
}
class Children extends Component<IProps, any> {
render() {
return (
<div>
child-{this.props.name}
</div>
)
}
}
函数式组件
状态
import React, {useState} from 'react'
export default function App() {
const [name, setName] = useState('hhh')
return (
<div>
app-{name.substring(0, 1).toUpperCase()+name.substring(1)}
<button onClick={() => {
setName('kkk')
}}>click</button>
</div>
)
}
todolist
import React, {useState, useRef} from 'react'
export default function App() {
const mytext = useRef<HTMLInputElement>(null)
const [list, setList] = useState<string[]>([])
return (
<div>
<input ref={mytext}></input>
<button onClick={() => {
console.log((mytext.current as HTMLInputElement).value)
setList([...list, (mytext.current as HTMLInputElement).value])
}}>click</button>
<div>
{
list.map((item, index) =>
<li key={item + index}>{item}</li>
)
}
</div>
</div>
)
}
props
import React, {useState} from 'react'
export default function App() {
const [isShow, setIsShow] = useState<boolean>(true)
return (
<div>
<Children name='hhh' cb={()=>{
setIsShow(!isShow)
}}></Children>
{isShow && <div>我是显隐组件</div>}
</div>
)
}
interface IProps {
name?: string, // 可选，可以传可以不穿
cb: ()=> void
}
function Children(props:IProps) {
return (
<div>
<button onClick={() => {
props.cb()
}}>click</button>
</div>
)
}
