超越JavaScript：TypeScript，为代码加冕

Estrella16
548 阅读7分钟

TypeScript：一个开发者的指南

在现代前端开发领域，JavaScript 和 TypeScript 都非常关键，但它们在开发环境中扮演着不同的角色。本文将比较这两种语言，着重于介绍 TypeScript，并提供一些关于初学者如何安装和开始使用 TypeScript 的具体步骤。

JavaScript vs TypeScript

JavaScript 是一种动态类型的语言，意味着变量的类型是在运行时确定的。这提供了极大的灵活性和快速的开发流程，但也可能导致运行时错误和难以发现的类型问题。

TypeScript 是 JavaScript 的一个超集，引入了静态类型检查。这意味着你必须在编写代码时声明变量和函数返回类型，这样可以在编译阶段而不是在运行时捕捉到许多错误。这种静态类型系统带来了更强大的编辑能力和更高的代码质量，尤其是在大型项目和团队环境中。简单来说，TypeScript 就是 JavaScript的 pro 版本。

  1. 生态系统和社区：拥有强大的社区支持，许多现有的JavaScript库和框架都提供了TypeScript的类型定义文件（.d.ts）。

TypeScript 的主要特点：

  1. 静态类型：TypeScript 允许你定义变量、函数参数和返回值的类型。这有助于捕获类型错误，提供代码补全和重构支持。
  2. 面向对象：TypeScript 支持类、接口、命名空间、枚举等面向对象编程的概念，这使得开发者可以使用更现代的软件工程实践。
  3. 类型推断：虽然 TypeScript 是强类型的，但它也具有类型推断功能，可以根据赋值自动确定变量的类型，减轻了类型声明的负担。
  4. 工具支持：TypeScript 与流行的编辑器和IDE（如 Visual Studio Code, WebStorm, Atom 等）高度集成，提供诸如代码补全、错误检查、重构等功能。
  5. 与 JavaScript 生态系统的兼容性：TypeScript 编译成标准的 JavaScript，可以运行在任何支持 JavaScript 的环境，包括浏览器和 Node.js。这意味着 TypeScript 代码可以无缝地与现有的 JavaScript 库和框架集成。
  6. 模块系统：TypeScript 支持 ES6 模块和 CommonJS 模块系统，使得代码可以以模块化的形式组织和复用。
  7. 元组和枚举：TypeScript 提供了元组类型和枚举类型，增加了数据结构的灵活性和代码的清晰度。
  8. 泛型：TypeScript 的泛型支持使得函数和类可以处理任意类型的数据，同时保持类型安全。

初学者如何安装和配置 TypeScript

对于初学者来说，开始使用 TypeScript 非常直接。以下是一些基本的步骤：

当你使用npm init vite命令来创建一个新的Vite项目时，你可以直接选择包含TypeScript的模板。这样做的确会安装TypeScript及其相关依赖，你不需要单独进行额外的TypeScript安装步骤。

(1) 以下是使用npm init vite创建带有TypeScript支持的新项目的步骤：

  1. 打开你的终端或命令行工具。

  2. 输入以下命令来创建一个新的Vite项目，并在提示中选择TypeScript模板：

    678a68bd3f9872343afa3e60abf5d19.png

  3. 当创建项目的过程中出现模板选择的提示时，选择包含TypeScript的选项。例如，如果你选择Vue，你将看到一个包含TypeScript的Vue模板选项。  526a73419e1608284b6f52ca4a31b47.png

  4. 接着选择Vue的TypeScript模板：

    25b51b5d1c36c7d8f463aec5e4d699a.png

  5. 选择TypeScript，摁下Enter键后，等待几秒，安装完成

    10d04d139c797048d9b4bf362cb4952.png

  6. 继续按照提示完成项目初始化。这将自动安装所有必要的TypeScript依赖项，包括typescript本身以及与Vite和Vue（或其他框架）相关的TypeScript类型定义。

一旦项目创建完成，你将拥有一个带有TypeScript支持的Vite项目，可以直接开始使用TypeScript编写代码，无需再单独安装TypeScript或其依赖项。所有的配置和编译设置都将由Vite处理，你可以通过vite.config.js或vite.config.ts文件进一步自定义。

(2) 配置和类型测试:

当你使用npm init vite@latest并选择包含TypeScript的模板时，Vite会为你生成一个项目结构，其中包括一些重要的配置文件，主要是vite.config.js或vite.config.ts以及.eslintrc.js和.prettierrc（如果适用）等配置文件。不过，对于TypeScript而言，最关键的是tsconfig.json文件，它用于定义TypeScript编译器的行为。

  1. tsconfig.json

    • 作用：这是TypeScript的配置文件，它包含了编译选项，例如目标JavaScript版本（target），是否允许未使用的变量（noUnusedLocals），是否检查JSX语法（jsx），源代码和输出文件的位置（outDir），以及其他各种编译器设置。
    • 使用：你可以修改tsconfig.json中的选项来定制TypeScript的编译行为。例如，如果你想在编译时检查是否有未使用的局部变量，你可以设置noUnusedLocals为true。

  2. vite.config.ts

    • 作用：这是Vite的配置文件，它决定了项目的构建和开发服务器的行为。你可以在这里配置别名、插件、服务器端渲染、环境变量、构建目标、优化策略等。

    • 使用：编辑此文件以调整Vite的行为。例如，你可以添加插件，如@vitejs/plugin-vue用于Vue应用，或者vite-plugin-checker用于实时类型检查。你还可以使用条件配置来针对不同的命令（如serve或build）做出不同的设置。

TypeScript 支持 .ts 文件。你可以在项目中添加类型，以确保类型正确性。对于 Vue 项目，配置路由时你可以像这样定义类型：

import type { RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
    // 路由定义
];

export default routes;

  1. 使用 TypeScript 的其他配置: 对于更深入的配置，你可以编辑 tsconfig.json，这是控制 TypeScript 编译器行为的配置文件。

  2. 类型的应用: 声明自定义类型和接口是 TypeScript 强大类型系统的主要功能之一。

(3) vite.config.ts 页面

  • 这段代码中的 plugins: [] 指定了要使用的插件。在这个例子中，vue()插件被用来支持 Vue.js 的单文件组件。Vite 插件可以扩展和定制构建过程，比如处理特定的文件类型、优化代码或添加开发服务器的功能。
  • alias: { '@': '/src' }这部分配置用于设置路径别名。这里定义了@符号指向项目中的/src目录。路径别名可以简化在项目中引用模块的路径，使代码更易读，也更容易维护。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 工程化工具
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue()
  ],
  resolve:{
    alias:{
      '@':'/src'
    }
  }
})

(4) home.ts 页面

以下代码，通过导出（export）这些类型，其他模块可以方便地使用它们，确保数据结构的一致性和类型安全性。在 TypeScript 中，使用类型别名有助于提高代码的可读性和可维护性，同时也便于类型检查和代码补全功能。

export type HomeTopBarItem = {
    title: string;
    icon: string;
};

// js 中没有 type，ts 里有 type
// 使用 ts 关键字，自定义一个类型的约束 (和 es6 中不同，可以自定义类型，有点像 Java)
// 类型声明以;隔开 
export type RecentlyViewedState = {
    title: string;
    cover: string;
    price: number;
};

总结

TypeScript 通过增加类型安全性和提供强大的工具支持，为开发现代Web应用程序提供了极大的便利。虽然它需要比纯 JavaScript 更多的初始设置和学习曲线，但它的长期好处是不容忽视的。TypeScript 的引入不仅提升了开发效率，还促进了代码质量和团队协作，尤其是在大型项目中，它的优势尤为明显。无论是前端开发还是后端开发，TypeScript 都是一个值得学习和采用的强大工具。

avatar
文章
阅读
粉丝