TypeScript 入门教程:从零开始掌握现代 JavaScript 的超集

77 阅读3分钟

什么是 TypeScript?

简单来说,TypeScript 是 JavaScript 的一个超集。它在 JavaScript 的基础上添加了静态类型等特性,让你的代码在运行前就能发现潜在的错误,就像给 JavaScript 穿上了一件“盔甲”,让它更加安全可靠。

你可以把 TypeScript 理解为:

  • JavaScript + 类型系统
  • 更强大的 JavaScript

为什么要用 TypeScript?

你可能会问,JavaScript 不是挺好的吗?为什么要用 TypeScript? 别急,我们来对比一下:

特性JavaScriptTypeScript
类型动态类型(运行时确定)静态类型(编译时确定)
错误检测运行时报错编译时报错
代码可读性变量类型不明确,代码理解难度高变量类型明确,代码可读性高
代码维护性大型项目维护困难大型项目维护更轻松
开发效率小型项目开发快,大型项目易出错大型项目开发效率更高,更稳定

总结一下,TypeScript 的优势在于:

  • 提前发现错误: 编译时就能发现类型错误,减少运行时 bug。
  • 代码可读性更高: 明确的类型让代码更容易理解和维护。
  • 更强大的 IDE 支持: 智能提示、自动补全等功能,提高开发效率。
  • 更适合大型项目: 类型系统让大型项目更易于管理和维护。

如何开始使用 TypeScript?

  1. 安装 TypeScript:

    首先,你需要安装 Node.js 和 npm (或 yarn)。然后,在终端中运行以下命令全局安装 TypeScript:

    npm install -g typescript
    

    或者在你的项目中局部安装:

    npm install typescript --save-dev
    
  2. 创建 TypeScript 文件:

    创建一个以 .ts 为后缀的文件,例如 hello.ts

  3. 编写 TypeScript 代码:

    hello.ts 中输入以下代码:

    //表示 `name` 参数的类型是字符串,函数返回类型为字符串
    function greet(name: string): string {
      return "Hello, " + name;
    }
    
    // 变量类型为字符串
    let user: string = "TypeScript";
    console.log(greet(user));
    
  4. 编译 TypeScript 代码:

    在终端中,使用 tsc 命令编译 hello.ts 文件:

    tsc hello.ts
    

    这会生成一个 hello.js 文件,其中包含编译后的 JavaScript 代码。

  5. 运行 JavaScript 代码:

    使用 Node.js 运行 hello.js 文件:

    node hello.js
    

    你会在控制台看到输出:Hello, TypeScript

TypeScript 的基本类型

TypeScript 提供了多种基本类型,包括:

  • string 字符串类型,例如 "hello"'world'
  • number 数字类型,例如 103.14
  • boolean 布尔类型,例如 truefalse
  • null 空值。
  • undefined 未定义的值。
  • any 任意类型,不建议使用,会失去类型检查的优势。
  • void 表示函数没有返回值。
  • array 数组类型,例如 string[]number[]
  • tuple 元组类型,可以存储不同类型的元素,例如 [string, number]
  • enum 枚举类型,用于定义一组命名的常量。
  • object 对象类型。

示例:

let message: string = "Hello";
let count: number = 10;
let isDone: boolean = true;
let fruits: string[] = ["apple", "banana", "orange"];
let person: [string, number] = ["Alice", 30];
enum Color { Red, Green, Blue };
let myColor: Color = Color.Green;
let obj: object = { name: "Bob", age: 25 };

TypeScript 的函数

TypeScript 可以为函数定义参数类型和返回值类型,让函数更加健壮。

示例:

function add(a: number, b: number): number {
    return a + b;
}

TypeScript 的接口

接口(Interface)用于定义对象的结构,可以约束对象的属性和方法。

示例:

interface Person {
  name: string;
  age: number;
  greet(): void;
}

let user: Person = {
  name: "Charlie",
  age: 28,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

user.greet();