<meta name="viewport" content="width=device-width">content="width=device-width". В таком случае ширина вьюпорта будет равна ширине экрана устройства.width=device-width), т.е. 320px. Когда ты устанавливаешь ограничение на минимальную ширину тела документа, равную, например, 480px, то по дефолту у тебя будет горизонтальный скролл при зуме равном 1. Это логичное поведение, заложенное в спеке. Это как пытаться посмотреть сайт с ограничение в 1600px в ширину с ноутбука, там тоже будет горизонтальный скролл. type CarNames = 'bmw' | 'mercedes';
const cars: CarNames[] = ['bmw', 'mercedes', 'zhiguli'];
// ^^^^^^^
// TypeError: Type '"zhiguli"' is not assignable to type 'CarNames'..col.s12 имеет большую специфичность, чем css-класс из модуля. Чтобы исправить отделите структуру грида от структуры компонента:import React, {Component} from 'react'
import styles from './Videos.module.css'
export default class Videos extends Component{
render(){
return(
<div id="test1" className={`row ${styles.VideoRoom}`}>
<div className="col s12 center grey lighten-3">
<div className={styles.HostVideo}>
Видео хоста
</div>
</div>
</div>
);
}
}:global(.class) в css-модулях (подробнее). Должно получиться что-то вроде :global(.col).HostVideo.console.log(+"1"); // prints 1
console.log(+"s"); // prints NaN+[], что эквивалентно Number([]), массив преобразуется в 0. Соответственно в операции !+[] используется 2 оператора подряд (например, как !! во второй части выражения), сначала происходит преобразование массива в ноль с помощью унарного оператора сложения +[] и конвертация нуля в true с помощью оператора !. В первой части выражения получаем true.(!(+[])) + (!![]) (я позволил себе расставить скобки, чтобы был более очевиден порядок выполнения), конвертится в true + true, что конвертится в 1 + 1, собственно, вот и ваша двойка.!+[] + !![];
/* +[] converts to 0 */
!0 + !![];
/* !0 converts to true */
true + !![];
/* ![] converts to false */
true + !false;
/* !false coverts to true */
true + true;
/* both true values convert to numbers */
1 + 1;
/* equals 2 */const data: {
hello: {
wtf: string;
};
} = {
hello: {
wtf: 'world',
},
};
for (const [key] of Object.entries(data) as [keyof typeof data, any][]) {
console.log(data[key]);
}interface Data {
hello: {
wtf: string;
};
}
type DataKey = keyof Data;
const data: Data = {
hello: {
wtf: 'world',
},
};
for (const [key] of Object.entries(data) as [DataKey, any][]) {
console.log(data[key]);
}const MyContext = React.createContext();
const {
Provider: CompaniesStoreServiceProvider,
Consumer: CompaniesStoreServiceConsumer
} = MyContext;
useContext(MyContext);const arr = [1, 2, 3, 4, 5];
const rec = (theArr) => {
const [first, ...rest] = theArr;
if (!first) return;
setTimeout(() => {
/* do some parsing, example: */
if ([3, 4].includes(first)) alert('found it!');
return rec(rest);
}, 0);
};
rec(arr);// webpack.config
module.exports = {
module: {
rules: [
{
oneOf: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
{
use: 'file-loader',
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
],
},
plugins: [
new ForkTsCheckerWebpackPlugin({
async: true,
useTypescriptIncrementalApi: true,
checkSyntacticErrors: true,
eslint: true,
}),
],
};
// babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript"
],
}plugins: [
new HtmlWebpackPlugin({ template: 'src/index.html'}),
new ExtractTextPlugin("styles.css")
]addToCart = (id: number) => {
let tempProduct: Products[] = [...this.state.products];
const item = this.getItem(id);
if(item === undefined) {
// ... инструкция при возникновении терминального условия, например, ошибка
return;
}
const index = tempProduct.indexOf(item as Products); // строгая типизация для item
// ...
};getItem = (id: number): Products => {
return this.state.products.find(item => item.id === id);
};The core library is focused on the view layer only