深入浅出TypeScript

一、为什么学习TypeScript

• 什么是TypeScript?

TypeScript 是一种由微软开发的、静态类型的编程语言。它是 JavaScript 的一个超集，意味着 TypeScript 包含了所有 JavaScript 的特性，并且还提供了额外的功能和工具来帮助开发者更好地管理大型代码库。

• TypeScript VS JavaScript

TypeScript在JavaScript的基础上新增了特性和功能，提高了开发效率

TypeScript	JavaScript
JavaScript 的超集，用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页
强类型，支持静态和动态类型	动态弱类型语言
可以在编译期间发现并纠正错误	只能在运行时发现错误
不允许改变变量的数据类型	变量可以被赋值成不同类型

从表格中能够看出，TypeScript改进了JavaScript许多明显的缺点。

• TypeScript带来了什么？

TypeScript支持静态类型检查、更好的编辑器支持、更好的代码重构、更好的文档以及更好的团队协作。因此使用TypeScript进行开发，是前端的重要趋势。

二、TypeScript基础

• 基础类型

• boolean number string
• undefined
• null
• any unknown void
• never
• 数组[]
• 元组（tuple）

*注：TypeScript 中的元组（Tuple）是一种表示已知元素数量和类型的数组类型。

代码示例：

function typeOf(data: any): string {
  return Object.prototype.toString.call(data).slice(8, -1);
}

console.log(typeOf("hello")); // 输出 "String"
console.log(typeOf(123)); // 输出 "Number"
console.log(typeOf(true)); // 输出 "Boolean"
console.log(typeOf([])); // 输出 "Array"
console.log(typeOf({})); // 输出 "Object"
console.log(typeOf(null)); // 输出 "Null"
console.log(typeOf(undefined)); // 输出 "Undefined"

• 函数类型

TS定义函数类型时要定义输入参数类型和输出类型。

代码示例：

let sub: (x: number, y: number) => number = (x, y) => x - y;

let result: number = sub(2, 1);
console.log(result); // 输出 1

在 TypeScript 中，如果函数参数是可选的或者有默认值，则需要使用 ? 和 = 运算符来指定它们的类型和默认值。

代码示例：

function sayHello(name?: string, age: number = 18): void {
  if (name) {
    console.log(`Hello, ${name}!`);
  } else {
    console.log("Hello, World!");
  }
  console.log(`You are ${age} years old.`);
}

sayHello(); // 输出 "Hello, World!" 和 "You are 18 years old."
sayHello("Alice"); // 输出 "Hello, Alice!" 和 "You are 18 years old."
sayHello("Bob", 21); // 输出 "Hello, Bob!" 和 "You are 21 years old."

• interface（接口）

TypeScript的interface是一种用于描述对象形状的语法结构。在TypeScript中，interface可以被视为一种合同或契约，它定义了一组属性和方法，这些属性和方法必须由实现该接口的类或对象来实现。

代码示例：

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

• 类

在TypeScript中，可以使用class关键字来定义类。类可以具有属性和方法，并且可以继承其他类。写法与JS基本相同，增加了一些新特性。

这些新特性增强了TypeScript中类的功能和灵活性，使得我们可以更轻松地编写可读性高、易于维护的代码。

代码示例：

class Person {
    firstName: string;
    lastName: string;

    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    getFullName(): string {
        return `${this.firstName} ${this.lastName}`;
    }
}

创建一个person对象，实例化该类：

const person = new Person('John', 'Doe');
console.log(person.getFullName()); // 输出 "John Doe"

笔记参考

• 维基百科、百度百科
• 课程资料、课件