一、TS (TypeScript):
TypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的一个超集,增加了类型系统和对ES6及以后版本新特性的支持。TypeScript 旨在解决 JavaScript 开发中的可维护性、可扩展性和大型项目中的复杂性问题。它允许开发者在编译时进行类型检查,以提高代码的健壮性。
二、TSC (TypeScript Compiler):
TSC 是 TypeScript 编译器的命令行工具,它负责将 TypeScript 代码编译成 JavaScript 代码。当在项目中使用 TypeScript 时,需要通过 tsc 命令来编译 .ts 或 .tsx 文件。编译器会检查代码中的类型错误,并将其转换为纯 JavaScript 代码,这样浏览器或其他 JavaScript 环境就可以执行这些代码了。
三、TSX (TypeScript for JSX):
TSX 是 TypeScript 的一个变体,它允许在 TypeScript 代码中直接编写 JSX 语法。JSX 是一种 JavaScript 的语法扩展,它允许在 JavaScript 代码中编写类似 HTML 的标记语言。TSX 主要用于 React 应用开发,使得开发者可以在 TypeScript 的基础上,利用 React 的组件化特性来构建用户界面。
TSX 代码示例:
typescript
const element: React.FC = () => {
return <h1>Hello, world!</h1>;
};
四、JSX (JavaScript XML):
JSX 是一种 JavaScript 的语法扩展,它允许你在 JavaScript 代码中编写类似 HTML 的标记语言。JSX 被广泛用于 React 框架中,用于描述 UI 组件的结构。JSX 使得开发者可以使用 HTML 标签的形式来声明组件的 UI 结构,这使得从 HTML 过渡到 React 开发变得更加容易。
JSX 代码示例:
javascript
const element = <h1>Hello, world!</h1>;
-
共同点:
两者都允许在代码中使用类似 HTML 的语法来描述 UI 结构。
都可以在 React 等框架中使用,用于构建组件。
-
差异:
JSX 是 JavaScript 的语法扩展,而 TSX 是在 JSX 的基础上增加了 TypeScript 的类型系统。
在 JSX 中,只能使用 JavaScript 的特性,而在 TSX 中,可以使用 TypeScript 的所有特性,包括类型注解、接口、类等。
-
使用场景:
当使用 React 或其他支持 JSX 的库时,可以使用 JSX 来构建 UI。
当希望在 JSX 中获得 TypeScript 的类型检查和智能提示时,应该使用 TSX。
五、scss
SCSS (Sassy CSS) 是一种 CSS 的预处理器,它增加了一些有用的功能,使得 CSS 的编写变得更加高效和易于维护。SCSS 允许你使用变量、嵌套规则、混合(mixins)、继承和其它许多特性,这些在原生 CSS 中是不可用的。