Interfeisai - aprašo, koks bus kuriamas objektas, kokie laukai ir pnš. Kuriant objektą išmes patarimus. Rodis, kad nevisi laukai užpildyti. Rodis ko reikia.
- gali extendint
- rekomenduojama visur naudoti interface
readonly - tik skaitymui
? - nebūtinas
interface Rect {
readonly id: string
color?: string
size : {
width: number
height: number
}
}
const rect1: Rect = {
id: '1234',
size: {
width: 20,
height: 30
},
color: '#ccc'
}
Neprivalomus parametrus galima nurodyti ir vėliau
const rect2: Rect = {
id: '12345',
size: {
width: 10,
height: 5
}
}
rect2.color = 'black'
Jeigu masyvas arba objektas, tai galime keisti vidinius duomenis, bet pakeisti ne.
Galime ir taip:
const rect3 = {} as Rect
Arba old stylium
const rect4 = <Rect>{}
Praplečiame jau turimą interfeisą:
interface RectWithArea extends Rect {
getArea: () => number
}
const rect5: RectWithArea = {
id: '123',
size: {
width: 20,
height: 20
},
getArea(): number {
return this.size.width * this.size.height
}
}
Sutarta interfeisus vadinti pradedant I - interface
interface IClock {
time: Date
setTime(date: Date): void
}
realizuojamas interfeisas.
klasė Clock turi implementuoti IClock interfeisą.
class Clock implements IClock {
time: Date = new Date()
setTime(date: Date): void {
this.time = date
}
Jei bus objektas ir daug dinaminių raktų
interface Styles {
border: string
}
const css = {
border: '1px solid black',
marginTop: '2px',
borderRadius: '5px'
}
neefektyvu butu vardinti visus css.
sprendimas :
interface Styles {
[key: string]: string
}
const css: Styles = {
border: '1px solid black',
marginTop: '2px',
borderRadius: '5px'
}
interface Test {
a: number
}
interface Test {
b: number
}
interface SuperTest extends Test { -> bus abu pasiekti ir a ir b
point as IDCPoint; - nors pointas yra IPoint, bet ID3Poit extendino IPoint todel galiam ir tiap prilyginti
const c = (point: IPoint) => {
const d: ID3Point = point as IDCPoint;
}
constr myCanvas = document.GetElementById('canvas') ---> myCanvas HTMLElement
constr myCanvas = document.GetElementById('canvas') as HTMLCanvasElement -> myCanvas HTMLCanvasElement