- What is the output of this function ?
class ExampleA {
constructor(name: string) {
this.name = name;
}
onClick() {
console.log(this);
console.log(this.name);
}
triggerOnClick(f: Function) {
f();
}
}
const exampleA = new ExampleA('Bind Example');
exampleA.triggerOnClick(exampleA.onClick);
- After switchColor run, what is the value of "this.styles"?
switchColor = () => {
setTimeout(() => {
this.styles = { color: "bg-danger" };
}, 0);
Promise.resolve().then((_) => {
this.styles = { color: "bg-primary" };
});
};
- What's happpend when we call randomData;
const randomNumber = (n: number = 100): number => {
return Math.floor(Math.random() * n);
};
const randomLetter = (): string => {
const possible =
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const randomIndex = randomNumber(possible.length);
return possible[randomIndex];
};
// Generator
function* randomData(n: number): Generator {
for (let i = 0; i < n; i++) {
if (i % 3 === 0) {
yield randomNumber();
} else {
yield randomLetter();
}
}
}
import React from 'react';
import PropTypes from 'prop-types';
export const COLORS = [
'gray',
'red',
'orange',
'amber',
'yellow',
'lime',
'green',
'emerald',
'teal',
'cyan',
'sky',
'blue',
'indigo',
'violet',
'purple'
] as const;
Tag.propTypes = {
color: PropTypes.oneOf(COLORS)
};
// please define a coressponded type for Color
type Color = ?;
function Tag(props: { color: Color; children: React.ReactNode }) {
const { color, children } = props;
return <span className={`bg-${color}-400 p-4`}>{children || ''}</span>;
}
export default Tag;
class Archer {
fire() {
console.log('fire');
}
}
class Guardian {
defend() {
console.log('defend');
}
}
class Knight {
attack() {
console.log('attack');
}
}
const heros: [any];
const heroA: Hero<Archer> = {
character: new Archer(),
health: 100,
stamina: 100,
};
const heroB: Hero<Guardian> = {
character: new Guardian(),
health: 100,
stamina: 100,
};
const heroC: Hero<Knight> = {
character: new Knight(),
health: 100,
stamina: 100,
};
heros.push(heroA, heroB, heroC);
for (const hero of heros) {
// how do we call the approriate hero action for each type of hero
// eg: Archer hero can only fire
}
JS
TS
CSS Frameworks
React
How to pass props through many levels in React?
State Update
https://user-images.githubusercontent.com/31009750/164177908-9f16f47f-c0b1-4eb3-a924-659e3ac47532.png