Philip

Philip's blog

0%

Posted on In
Symbols count in article: 367 Reading time ≈ 1 mins.

公司的项目是基于React，今天周末闲着没事用Vite搭建了一个React项目，在运行的时候，突然发现，即使typescript类型匹配，程序竟然也没有报错，于是突发奇想，能不能在类型不匹配的时候停止运行并报错呢？

代码很简单，首先我定义了一个Card组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, {ReactNode} from 'react'

interface CardProps {
    title: string;
    content: string;
    children?: ReactNode;
}

export function Card(props: CardProps) {
    return (
        <div className="card">
            <h2>{props.title}</h2>
            <p>{props.content}</p>
            <p>{props.footer}</p>
            {props.children}
        </div>
    )
}

在返回的组件中，我故意使用了一个CardProps中没有的属性 - footer。此时运行程序，你会发现一切正常！
这有点不合逻辑呀，应该报错才是，于是对着AI一番操作，找到如下方法：

首先安装vite-plugin-checker：

1
npm install --save-dev vite-plugin-checker

然后在vite.config.ts中添加如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import checker from 'vite-plugin-checker';

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        react(),
        checker({
            typescript: true,
        }),
    ],
})

再次运行npm run dev，你会发现控制台给出类型不匹配的报错了, 浏览器中的页面也给出了报错，这才是我想要的结果呀！

有的建议在tsconfig.json中开启strict: true模式，其实和这个选项无关。typescript是静态类型检查，只在编译时有作用，运行时已经没有typescript了，所以只能靠打包工具来控制是否报错，比如vite或者webpack等。

Posted on Edited on In
Symbols count in article: 1.3k Reading time ≈ 5 mins.

React中有很多方式书写CSS样式，内联样式，CSS模块，CSS-in-JS等。下面总结一下。

1. 内联样式

内联样式是最简单直观的方式，样式直接写到组件中。这种方式只适合比较简单的样式，如果样式比较复杂，建议采用CSS Module的方式，这样能够使组件文件更加清爽。

下面是一个内联样式的例子，div和h1的样式直接写在组件中。

Read more »

Posted on Edited on In
Symbols count in article: 209 Reading time ≈ 1 mins.

MacOS上的快捷键特别多，用好这些快捷键能极大的提高我们的工作效率。

MacOS 按键符号

MacOS上没有Windows系统上的Ctrl健(使用Command健代替)，而且多了一个Windows系统上没有的Option键。

如果你看到的快捷键是Ctrl，那么在Mac上应该替换为Command，如果是Alt，那么在Mac上应该替换为Option。下面是MacOS上一些常用的按键符号：

Read more »

Posted on Edited on In
Symbols count in article: 179 Reading time ≈ 1 mins.

VSCode是如今市面上最流行的IDE了，用好VSCode是每一个前端程序员必备的技能，而VSCode又有大量的快捷键可以使用，下面是一些常用的VSCode快捷键。

说明

在MacOS上请将Ctrl替换为Command，Alt替换为Option

Read more »

Posted on Edited on In
Symbols count in article: 312 Reading time ≈ 1 mins.

2025-04-08

今天是2025年4月8日，星期二，天气晴。
今天王军来大连出差，住中山区新文园大酒店，我正好失业在家，于是就去找他喝酒，晚上是在钱库里自助吃的。十多年没见了，有很多话要说，家长里短的聊了一大通，他第二天还要培训，而我再过一天也要去天津渣打银行报道，所以没有喝太多酒！
期待下次相聚。

Read more »

Posted on Edited on In
Symbols count in article: 625 Reading time ≈ 2 mins.

概述

CSS中隐藏元素的方法有很多，每种方式都有其适用的场景，在合适的场景下使用合适的方式，能使编程事半功倍。

1. display: none

display: none是最常用的隐藏元素的方法，它会将元素从文档流中移除，元素不占据空间。

1
2
3
.hidden {
  display: none;
}
1
<div class="hidden">This is a hidden element</div>
Read more »

Posted on Edited on In
Symbols count in article: 749 Reading time ≈ 3 mins.

body宽度设置为100%，为啥还有横向滚动条？

问题现象:

这是一个非常简单的例子，创建一个html文件，设置body的宽度为100%，然后在浏览器中打开，发现有横向滚动条。为什么呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        width: 100%;
      }
    </style>
  </head>
  <body>
    This is body
  </body>
</html>
Read more »

Posted on Edited on In
Symbols count in article: 130 Reading time ≈ 1 mins.

1. npm 安装报错

问题现象：安装npm包时，报错如下：

1
2
3
4
5
code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: karma-jasmine-html-reporter@1.6.0
npm ERR! Found: jasmine-core@3.6.0

This is caused by dependency conflict, you can try to install the package with --force or --legacy-peer-deps flag. see here for more details.

Read more »

Posted on Edited on In
Symbols count in article: 963 Reading time ≈ 4 mins.

CSS Block Formatting Context (BFC)

CSS中的Block Formatting Context(简称BFC - 块级格式化上下文)是一个非常重要的概念，也是前端面试中常考的题目之一，今天我们来彻底学习一下BFC。

什么是BFC?

简单来说BFC是一个独立自治的渲染区域，BFC内的样式和BFC外的样式之间互相不影响。

Read more »

Posted on Edited on In
Symbols count in article: 1.3k Reading time ≈ 5 mins.

什么是外边距折叠（塌陷）

CSS Margin Collapse - CSS外边距折叠（也有叫外边距塌陷的），是指在某些情况下，两个相邻(或嵌套)的元素的外边距会合并成一个外边距，这个现象被称为外边距折叠。

外边距折叠的特征：

  1. 外边距折叠只发生在垂直方向上，也就是说只有margin-top或者margin-bottom会折叠，margin-left和margin-right不会折叠。
  2. 发生外边距折叠时，会取相邻两个元素的外边距中较大的一个作为折叠后的外边距。
  3. 浮动元素和绝对定位元素不会发生外边距折叠。
Read more »