Typescript and React

What is TypeScript?

Type system

variables in js

let varibleName = value
let varibleName: type = value

variables in ts

variables

 let count: number = 10
 const name: string = 'Billy'
 const students: Array<string> = ['Billy', 'Mandy', 'Grim']
 const data: any = ['Billy', 'Mandy', 'Grim']

functions

const rollDice = (): number => {
  return Math.ceil(Math.random() * 6)
}

const sum = (x: number, y: number): number => {
  return x + y
}

Interfaces

interface IStudent {
  name: string
  id: number
  profileImage: string
  gpa: number
  testScores: Array<number>
}
  const findStudent = (searchTeam: string): IStudent => {
    // do some logic to find students

    return foundStudent
  }

  const createStudent = (data: IStudent) => {
    // Do the thing to create the student
  }

using IStudent to define ins and outs

typescript and react

const [students, setStudents] = useState<Array<IStudent>>([])

// else where I can do this only if i force the 
// shape of the JSON calls into my student shape
setStudents(resp.data.results)

type our data in state / useState

interface IShowProps {
  title: string
  image: string
  rating: number
}

export const Show = (props: IShowProps) => {
  return <div>show the show stuff</div>
}

give our components a type

lets build stuff

Typescript & React

By Mark Dewey

Typescript & React

This is a lecture about what is Typescript and how it can help us do React things.

  • 249