React

TypeScript + propTypes

Agenda

  • Generelt
  • Data typer
  • PropTypes vs TypeScript
  • PropTypes
  • TypeScript

Data typer

Typer - Primitive

  • String === Tekst
    • "Hei"
    • 'Hei'
  • Number === Tall
    • Int/Integer === Heltall === 1 2 3 ...
    • Double === med desimal tall === 1,2 6,99 ...
    • ...
    • Tall
  • Boolean === Boolsk
    • Sann og Usant === True og False
    • 1 == true
    • 0 == false
      • Legg merke til == og ikke ===
  • Null og undefined

Typer - Referanse

  • Object === Arrays [ ]
  • Object === Objekter { }
    • Men husk at:
      • [1, 2, 3] !== [1, 2, 3]
      • {a: 1, b: 2} !== {a: 1, b: 2}
      • Objekter blir referert til deres minne adresse
  • function === Funksjoner
    • ( ) => { }
    • ( ) => ( )
    • ( ) => ...
    • function ( ) { }
  • class, map, set

PropTypes

VS

TypeScript

PropTypes vs TypeScript

  • Hensikt
    • Validere typen til data i forhold til det som er definert
    • Sikre data type flyten
  • Compile time vs run time
    • TypeScript validerer typer på kompilerings-tid
    • PropTypes er sjekket på kjøre-tid
  • TypeScript kan også defineres til lokale variabler
  • PropTypes fokuserer kun på props
  • Så hvilken bør man bruke?

PropTypes

https://reactjs.org/docs/typechecking-with-proptypes.html

PropTypes

  • Pleide å være installert i React tidligere, men ikke nå lenger...
  • Må installeres

 

 

  • Importere i komponenten

 

  • Definere PropTypes

 

  • Hva nå?
​https://www.npmjs.com/package/prop-types
npm install --save prop-types
import PropTypes from 'prop-types';
import React from 'react';
import { PropTypes } from "prop-types";
 
const Person = (props) => {
  return (
    <>
      .........
    </>
  )
};
 
Person.propTypes = {
  // key er navnet til prop-elementet
  // value er data typen
  // f.eks.: keyName: dataType
  name: PropTypes.string,
}
export default Person;

PropTypes

PropTypes

  • Default at PropTypes-elementer er "optional" ved bruk
Person.propTypes = {
  optionalArray:	PropTypes.array,
  optionalBigInt:	PropTypes.bigint,
  optionalBool:		PropTypes.bool,
  optionalFunc:		PropTypes.func,
  optionalNumber:	PropTypes.number,
  optionalObject:	PropTypes.object,
  optionalString:	PropTypes.string,
  optionalSymbol:	PropTypes.symbol,
}

PropTypes

  • Default at PropTypes-elementer er "optional" ved bruk
  • Må spesifiseres om det skal være krav til inkludering
    • .isRequired
Person.propTypes = {
  requiredString: PropTypes.string.isRequired,
}

PropTypes

Person.propTypes = {
  optionalNode:			PropTypes.node,
  optionalElement:		PropTypes.element,
  optionalElementType:		PropTypes.elementType,
  optionalEnum: 		PropTypes.oneOf(['News', 'Photos']),
  optionalUnion: 		PropTypes.oneOfType([
  					PropTypes.string,
					PropTypes.number,
	                            	PropTypes.instanceOf(Message)
                        	]),

}

TypeScript

https://www.typescriptlang.org

TypeScript

  • "TypeScript is JavaScript with syntax for types"
  • Må legges til i prosjektet
    • 2 måter

 

 

  • JS er gyldig i TS
  • TS er ikke gyldig i JS
  • Fordi TS er bygd oppå JS
    • må konverteres (kompileres av rammeverket)

 

  • tsconfig.json
npx create-react-app my-app --template typescript
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

TypeScript

  • Filer som skal bruke TypeScript skal ha fil ending .ts(x) 
const name: string = 'Ola Nordman';
const age: number = 19;
const over18: boolean: true;

TypeScript

  • Funksjoner
const name: string = 'Ola Nordman';
const age: number = 19;
const over18: boolean: true;

const isPersonOver18 = (): string => {...};
const isPersonOver18 = (ageProp: number): string => {...};

TypeScript

  • Type definere et objekt
const person: {
  name: string;
  age: number;
  over18: boolean;
} = {
  name: 'Ola Nordmann',
  age: 19,
  over18: true,
};
const person = {
  name: 'Ola Nordmann',
  age: 19,
  over18: true,
};

TypeScript

  • Type definere et objekt
const person: {
  name: string;
  age: number;
  over18: boolean;
} = {
  name: 'Ola Nordmann',
  age: 19,
  over18: true,
};
const person: PersonType = {
  name: 'Ola Nordmann',
  age: 19,
  over18: true,
};
type PersonType {
  name: string;
  age: number;
  over18: boolean;
};

const person: PersonType = {
  name: 'Ola Nordmann',
  age: 19,
  over18: true,
};

TypeScript

  • Type definere et objekt
const person: {
  name: string;
  age: number;
  over18: boolean;
} = {
  name: 'Ola Nordmann',
  age: 19,
  over18: true,
};
const person: PersonType = {
  name: 'Ola Nordmann',
  age: 19,
  over18: true,
};
interface PersonType {
  name: string;
  age: number;
  over18: boolean;
};

const person: PersonType = {
  name: 'Ola Nordmann',
  age: 19,
  over18: true,
};

Type er det samme som interface, men...

Interface vs Type alias

Type aliases and interfaces are very similar, and in many cases you can choose between them freely. Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.

TypeScript

  • Utvid interface
interface PersonType {
  name: string;
  age: number;
  over18: boolean;
};
interface StudentType extends PersonType {
  studentNumber: number;
  faculty: 'front-end', 'back-end', 'Markedsføring';
};
interface TeacherType extends PersonType {
  educationFromSchool: string;
  teacherForSubject: string;
};
interface StudentType {
  name: string;
  age: number;
  over18: boolean;
  studentNumber: number;
  faculty: 'front-end', 'back-end', 'Markedsføring';
};

Det samme som

TypeScript

  • readonly
  • never
  • ?
  • | og &
  • Tildel en nøkkel en type fra en tidligere definert type
  • Funksjoner
    • Retur type
    • void
    • med parameter
  • generiske interface <T> 
export interface SomeTypeDefinitions {
  readonly id: number;
  name: never;
  optionalStringAttribute?: string
  human: TeacherType | StudentType;

  returnStringHelloWorldFunction: () => string;
  consoleLogOutHelloWorldFunction: () => void;
  personIsOver18: (age: number) => void;
};

TypeScript + React

  • Props i et komponent

 

  • useState( );
import React, { useState } from 'react';

export interface PersonType {
  name: string;
  age: number;
  over18?: boolean;
}

const Person = (props: PersonType) => {
  const [newName, setNewName] = useState<string>('Ola Nordmann');
  
  return (
    <>
      .........
    </>
  )
};
 
export default Person;

Relevant stoff

Takk for i dag! :)

Neste gang: Hooks: useContext( )