TypeScript 5分钟快速入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00343/article/details/148464886

TypeScript 5分钟快速入门指南

TypeScript TypeScript 使用手册（中文版）翻译。http://www.typescriptlang.org 项目地址: https://gitcode.com/gh_mirrors/typ/TypeScript

TypeScript 作为 JavaScript 的超集，为前端开发带来了静态类型检查的强大功能。本文将通过一个简单的示例，带你快速了解 TypeScript 的核心特性。

环境准备

安装 TypeScript 非常简单，推荐使用 npm 进行全局安装：

npm install -g typescript

安装完成后，可以通过 tsc -v 命令验证安装是否成功。

第一个 TypeScript 程序

创建一个名为 greeter.ts 的文件，输入以下代码：

function greeter(person: string) {
  return 'Hello, ' + person;
}

let user = 'TypeScript User';
console.log(greeter(user));

这段代码定义了一个简单的问候函数，它接受一个字符串参数并返回问候语。注意我们为 person 参数添加了 : string 类型注解，这是 TypeScript 的核心特性之一。

类型系统实战

TypeScript 的类型系统能在编译时捕获许多常见错误。尝试将 user 改为数组：

let user = [0, 1, 2];
console.log(greeter(user));

运行 tsc greeter.ts 编译时，你会得到类型错误提示：

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

这种静态类型检查能有效防止运行时错误，是 TypeScript 的最大优势之一。

接口的应用

TypeScript 的接口可以帮助我们定义复杂的数据结构：

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return `Hello, ${person.firstName} ${person.lastName}`;
}

let user = { firstName: "Jane", lastName: "User" };
console.log(greeter(user));

接口不要求显式实现，只要数据结构匹配即可，这种"鸭子类型"机制提供了很大的灵活性。

类的使用

TypeScript 支持 ES6 的类语法，并增加了访问修饰符等特性：

class Student {
  fullName: string;
  
  constructor(
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ) {
    this.fullName = `${firstName} ${middleInitial} ${lastName}`;
  }
}

let user = new Student("Jane", "M.", "User");
console.log(greeter(user));

注意构造函数的参数使用 public 修饰符会自动创建同名属性，这是 TypeScript 的语法糖。