基础面试题
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括:HTML,CSS,JavaScript,浏览器,性能优化等等
export default JavaScriptComponent;
解释: JavaScript组件没有使用类型注解,它没有强制约束传入的props的类型,也无法提供类型检查的好处。它更加灵活,可以在开发过程中更快地进行原型的迭代。
TypeScript组件实例:
// TypeScript组件
import React, { useState } from ‘react’;
interface Props {
initialCount: number;
}
const TypeScriptCounter: React.FC = ({ initialCount }) => {
const [count, setCount] = useState(initialCount);
const increment = () => {
setCount(prevCount => prevCount + 1);
};
return (
Counter: {count}
Increment
);
};
export default TypeScriptCounter;
解释: TypeScript组件使用了useState钩子,通过类型注解定义了初始计数器的类型,并且在increment函数中使用了回调函数的方式来更新计数器的状态。
JavaScript组件实例:
// JavaScript组件
import React, { useState } from ‘react’;
const JavaScriptCounter = ({ initialCount }) => {
const [count, setCount] = useState(initialCount);
const increment = () => {
setCount(prevCount => prevCount + 1);
};
return (
Counter: {count}
Increment
);
};
export default JavaScriptCounter;
解释: JavaScript组件与TypeScript组件的功能和实现方式基本相同,但是没有类型注解,无法提供类型检查的好处。
TypeScript组件实例:
// TypeScript组件
import React from ‘react’;
interface Props {
message: string;
onClick: () => void;
}
const TypeScriptButton: React.FC = ({ message, onClick }) => {
return {message};
};
export default TypeScriptButton;
解释: TypeScript组件通过类型注解定义了Props的类型,确保传入的message是一个字符串,onClick是一个不接受参数和返回值的函数。
JavaScript组件实例:
// JavaScript组件
import React from ‘react’;
const JavaScriptButton = ({ message, onClick }) => {
return {message};
};
export default JavaScriptButton;
解释: JavaScript组件没有使用类型注解,对传入的props没有类型约束。
TypeScript组件实例:
// TypeScript组件
import React from ‘react’;
interface Props {
todos: string[];
}
const TypeScriptTodoList: React.FC = ({ todos }) => {
return (
{todos.map(todo => (
- {todo}
))}
);
};
export default TypeScriptTodoList;
解释: TypeScript组件通过类型注解定义了Props的类型,确保传入的todos是一个字符串数组。
JavaScript组件实例:
// JavaScript组件
import React from ‘react’;
const JavaScriptTodoList = ({ todos }) => {
return (
{todos.map(todo => (
- {todo}
))}
);
};
export default JavaScriptTodoList;
解释: JavaScript组件没有使用类型注解,对传入的props没有类型约束。
TypeScript组件实例:
// TypeScript组件
import React, { useEffect } from ‘react’;
interface Props {
fetchData: () => Promise;
}
const TypeScriptDataFetcher: React.FC = ({ fetchData }) => {
useEffect(() => {
fetchData();
}, []);
return
};
export default TypeScriptDataFetcher;
解释: TypeScript组件通过类型注解定义了Props的类型,确保传入的fetchData是一个返回Promise<void>的函数,并在组件挂载时调用它。
JavaScript组件实例:
// JavaScript组件
import React, { useEffect } from ‘react’;
const JavaScriptDataFetcher = ({ fetchData }) => {
useEffect(() => {
fetchData();
}, []);
return
};
export default JavaScriptDataFetcher;
解释: JavaScript组件没有使用类型注解,对传入的props没有类型约束。
TypeScript组件实例:
// TypeScript组件
import React from ‘react’;
interface Props {
label: string;
value: number;
onChange: (event: React.ChangeEvent) => void;
}
const TypeScriptInput: React.FC = ({ label, value, onChange }) => {
return (
);
};
export default TypeScriptInput;
解释: TypeScript组件通过类型注解定义了Props的类型,确保传入的label是一个字符串,value是一个数字,onChange是一个接受React.ChangeEvent<HTMLInputElement>类型参数的函数。
JavaScript组件实例:
// JavaScript组件
import React from ‘react’;
const JavaScriptInput = ({ label, value, onChange }) => {
return (
);
};
export default JavaScriptInput;
解释: JavaScript组件没有使用类型注解,对传入的props没有类型约束。
TypeScript组件实例:
// TypeScript组件
import React from ‘react’;
interface Props {
disabled: boolean;
onClick: React.MouseEventHandler;
}
const TypeScriptButton: React.FC = ({ disabled, onClick }) => {
return Click me;
};
export default TypeScriptButton;
解释: TypeScript组件通过类型注解定义了Props的类型,确保传入的disabled是一个布尔值,onClick是一个React.MouseEventHandler<HTMLButtonElement>类型的函数。
JavaScript组件实例:
// JavaScript组件
import React from ‘react’;
const JavaScriptButton = ({ disabled, onClick }) => {
return Click me;
};
export default JavaScriptButton;
解释: JavaScript组件没有使用类型注解,对传入的props没有类型约束。
TypeScript组件实例:
// TypeScript组件
import React, { useState } from ‘react’;
interface Props {
initialText: string;
}
const TypeScriptInput: React.FC = ({ initialText }) => {
const [text, setText] = useState(initialText);
const handleChange = (event: React.ChangeEvent) => {
setText(event.target.value);
};
return (
);
};
export default TypeScriptInput;
解释: TypeScript组件通过类型注解定义了Props的类型,确保传入的initialText是一个字符串,并且在handleChange函数中使用了事件对象的类型注解。
JavaScript组件实例:
// JavaScript组件
import React, { useState } from ‘react’;
const JavaScriptInput = ({ initialText }) => {
const [text, setText] = useState(initialText);
const handleChange = (event) => {
setText(event.target.value);
};
return (
);
};
export default JavaScriptInput;
解释: JavaScript组件没有使用类型注解,对传入的props没有类型约束,并且在handleChange函数中没有对事件对象进行类型注解。
## JavaScript与typescript之间如何取舍
### 基础面试题
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
> 主要内容包括:**HTML,CSS,JavaScript,浏览器,性能优化等等**
![](https://img-blog.csdnimg.cn/img_convert/79edc5d13a356f9ffb3518ff000946a2.webp?x-oss-process=image/format,png)
ext} onChange={handleChange} />
);
};
export default JavaScriptInput;
解释: JavaScript组件没有使用类型注解,对传入的props没有类型约束,并且在handleChange函数中没有对事件对象进行类型注解。
JavaScript与typescript之间如何取舍
基础面试题
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括:HTML,CSS,JavaScript,浏览器,性能优化等等
[外链图片转存中…(img-mJ23gS40-1715269628756)]