前端开发：Vite、TypeScript与JSX的实用指南

### 前端开发：Vite、TypeScript与JSX的实用指南 #### 1. Vite与React项目搭建 Vite 是由 Vue.js 创建者尤雨溪开发的构建工具和开发服务器，它利用现代浏览器的原生 ES 模块特性，实现快速开发和高效的生产构建。以下是使用 Vite 创建 React 项目的步骤： 1. **全局安装 Vite**： ```bash npm install -g create-vite ``` 2. **使用 React TypeScript 模板创建新项目**： ```bash create-vite my-react-app --template react-ts ``` 3. **进入项目文件夹并启动开发服务器**： ```bash cd my-react-app npm install npm run dev ``` 默认情况下，项目将在端口 5173 上运行。如果要将端口更改为 3000，可以修改 `vite.config.ts` 文件： ```typescript import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { port: 3000 } }) ``` #### 2. TypeScript 入门 TypeScript 是 JavaScript 的类型化超集，由微软开发和维护。它通过引入静态类型和其他高级特性，帮助开发者编写更可靠、更易维护的代码。以下是 TypeScript 的主要特性： | 特性 | 描述 | | ---- | ---- | | 是 JavaScript 的超集 | 任何有效的 JavaScript 代码都是 TypeScript 代码，只需学习如何添加类型 | | 错误检查 | 编译代码时检查错误，有助于在运行前发现问题 | | 强类型 | 可以为变量、函数和返回值添加类型 | | 支持面向对象编程 | 支持类、接口、继承等高级概念 | ##### 2.1 将 JavaScript 代码转换为 TypeScript 以检查单词是否为回文的函数为例，JavaScript 代码如下： ```javascript function isPalindrome(word) { const lowerCaseWord = word.toLowerCase() const reversedWord = lowerCaseWord.split('').reverse().join('') return lowerCaseWord === reversedWord } ``` 转换为 TypeScript 代码： ```typescript function isPalindrome(word: string): boolean { const lowerCaseWord = word.toLowerCase() const reversedWord = lowerCaseWord.split('').reverse().join('') return lowerCaseWord === reversedWord } ``` 如果传递非字符串类型的值调用该函数，TypeScript 会报错： ```typescript console.log(isPalindrome('Level')) // true console.log(isPalindrome('Anna')) // true console.log(isPalindrome('Carlos')) // false console.log(isPalindrome(101)) // TS Error console.log(isPalindrome(true)) // TS Error console.log(isPalindrome(false)) // TS Error ``` ##### 2.2 类型（Types） 可以使用类型来描述对象或数组。例如，定义一个 `User` 类型： ```typescript type User = { username: string email: string name: string age: number website: string active: boolean } const user: User = { username: 'czantany', email: '[email protected]', name: 'Carlos Santana', age: 33, website: 'http://www.js.education', active: true } ``` 如果忘记添加某个属性或提供无效值，会出现错误。如果某个属性是可选的，可以在属性名后面加 `?`： ```typescript type User = { username: string email: string name: string age?: number website: string active: boolean } ``` ##### 2.3 接口（Interfaces） 接口与类型类似，但语法不同。例如，定义一个 `User` 接口： ```typescript interface User { username: string email: string name: string age?: number website: string active: boolean } ``` 为了避免混淆，建议为接口添加 `I` 前缀，如 `IUser`。 ##### 2.4 扩展接口和类型 接口和类型都可以扩展，但语法不同。以下是扩展接口和类型的示例： ```typescript // 扩展接口 interface IWork { company: string position: string } interface IPerson extends IWork { name: string age: number } // 扩展类型 type TWork = { company: string position: string } type TPerson = TWork & { name: string age: number } // 将接口扩展到类型 interface ```