是什么

1. 静态类型语言， 写代码阶段就能检查错误，而非运行阶段
2. 类型系统是最好的文档，增加代码可读性、可维护性
3. 有一定学习成本
4. ts最后被编译成js

创建第一个基于TS是react脚手架

1. 安装 react 脚手架
   npm install -g create-react-app
2. 安装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

• ref问题

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>
  )
}