有了JavaScript，为啥还要TypeScript？不清不楚太糊弄人了，两者之间的组件形式差异_javascript有面向对象为什么还会出现typescript(1)

本文链接：https://blog.csdn.net/2401_84620231/article/details/138636928

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：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

Fetching data…

;
};

export default TypeScriptDataFetcher;


解释： TypeScript组件通过类型注解定义了Props的类型，确保传入的fetchData是一个返回Promise<void>的函数，并在组件挂载时调用它。


JavaScript组件实例：

// JavaScript组件
import React, { useEffect } from ‘react’;

const JavaScriptDataFetcher = ({ fetchData }) => {
useEffect(() => {
fetchData();
}, []);

return

Fetching data…

;
};

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 (

{label}:

);
};

export default TypeScriptInput;


解释： TypeScript组件通过类型注解定义了Props的类型，确保传入的label是一个字符串，value是一个数字，onChange是一个接受React.ChangeEvent<HTMLInputElement>类型参数的函数。


JavaScript组件实例：

// JavaScript组件
import React from ‘react’;

const JavaScriptInput = ({ label, value, onChange }) => {
return (

{label}:

);
};

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函数中没有对事件对象进行类型注解。