TypeScript 简介

概述

TypeScript 是 JavaScript 的超集，即它继承了后者的全部语法，所有 JavaScript 脚本都可以当作 TypeScript 脚本，此外它再增加了一些自己的语法。

TypeScript 对 JavaScript 添加的最主要部分，就是一个独立的类型系统。

动态类型与静态类型

类型是人为添加的一种编程约束和用法提示。 主要目的是在软件开发过程中，为编译器和开发工具提供更多的验证和帮助，帮助提高代码质量，减少错误。

JavaScript 属于动态类型语言，而且没有使用限制，运算符可以接受各种类型的值，允许动态类型变化，不具有很强的约束性。一不小心就会出现很多运行时错误。

// 例一
let x = 1;
x = "hello";

// 例二
let y = { foo: 1 };
delete y.foo;
y.bar = 2;

而 TypeScript 引入了一个更强大、更严格的类型系统，属于静态类型语言。

优点

静态类型有很多好处，这也是 TypeScript 想要达到的目的。

（1）有利于代码的静态分析，开发时错误发现。

（2）更好的 IDE 支持，做到语法提示和自动补全。

（3）基于类型利用工具直接生成 API 文档。

（4）有助于代码重构。

缺点

静态类型也存在一些缺点。

（1）丧失了动态类型的代码灵活性。

（2）增加了编程工作量。

（3）更高的学习成本。

（4）引入了独立的编译步骤。

核心概念

Types by Inference 类型推导

let a = "Hello World"; // 自动推理为 string 类型

Defining Types 类型定义

🗂 interface

对于一个对象结构，通常我们用 interface 来描述对象的形状

interface User {
	name: string,
	age: number
}

// variable:TypeName
const user: User = {
  name: "Hayes",
  id: 0,
};

🗂 class

接口和类可以一起实用

interface User {
  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("Murphy", 1);

🗂 type

type 语义是定义类型别名，you shold prefer interface , 只有特定场景下采用

type IPhoneUser = User

Composing Types 组合类型

基于 number、string、bool 等简单类型可以组合复杂类型

🗂 Union

type PromiseState = "pending" | "fulfilled" | "rejected"

function getLength(obj: string | string[]) {
  return obj.length;
}

🗂 typeof

在内部，要判断类型时，使用 typeof

function wrapInArray(obj: string | string[]) {
  if (typeof obj === "string") {
    return [obj];
  }
  return obj;
}

🗂 Generics

Generics provide variable to types 泛型为类型提供了变量

type ObjectWithNameArray = Array<{ name: string }>;

interface Backpack<Type>{
	add:(obj: Type) => void;
	get:() => Type
}

Structural Type System 结构类型系统

TS 的核心原则就是检查值是否是指定的形状结构（类型）

在结构类型系统中，如果两个对象的形状相同，那么就被视为是统一类型。

这种模式也称之为 duck typing --- 鸭子类型

如果它走起来像鸭子，叫起来像鸭子，那么它就是鸭子！！

interface Point {
  x: number;
  y: number;
}
 
function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}
 
// logs "12, 26"
const p = { x: 12, y: 26 };
logPoint(p); // 合理的，因为 p 和 Point 具备相同的形状

const rect = { x: 33, y: 3, width: 30, height: 80 };
logPoint(rect); // 合理的，因为 p 符合 Point 要求的形状