【Typescript】- Typescript预备知识

原创已于 2025-08-01 16:29:44 修改 · 1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #前端

于 2025-08-01 16:29:19 首次发布

TS 专栏收录该内容

1 篇文章

订阅专栏

前言

写惯了动态语言 js 的前端开发，突然切换使用 Typescript 静态类型语言，编译时就会检查类型，这样可能会一下子不习惯。下面我将通过类比大家熟悉的语言来具体介绍 Typescript 的预备知识。接下来咱们一起来愉快地渡过预备期吧~
48e589e19ebb44d382455ac1e0344cf5_tplv-k3u1fbpfcp-watermark.gif

预备知识

1、TS与JS的关系

在这里插入图片描述
Typescript 是 JavaScript 的超集，它支持所有 JavaScript 的特性，并且在其上层增加了 Typescript 类型系统。

Typescript 类型系统，被设计为”可选的“，这就意味着：所有合法的 JavaScript 代码都是合法的 Typescript 代码。

2、TS的编译过程

我们可以通过对比 C++ 编译过程来理解 TS 的编译过程，如下图所示：
在这里插入图片描述

注意：”TS的类型检查“ 与 ”生成JS“ 是2个独立的过程。无论类型检查是否出错都会生成 JavaScript 代码！

3、类型系统

一般编译型语言都有其类型系统，可分为2类：一种是结构类型系统；一种是名义类型系统。下面我们具体来看看吧。

结构类型系统

结构类型系统(Structural Type System)，是通过类型的实际结构确定两个类型是否相等或兼容。(采用该类型系统主要有：TypeScript,Haskell,OCaml,Go,…)

class Foo {
    public hi(){
        console.log("hi")
    }
}

class Bar {
    public hi(){
        console.log("hello")
    }
}

const a : Foo = new Foo()
const b : Bar = a
b.hi()   //输出：hi

上述ts代码：创建Foo的实例并赋值给 a，a 又赋值给类为 Bar 的 b，b可以直接执行 Foo 类的 hi 方法，正常工作不报错。可见类 Foo 和 Bar，虽然类名不一样，但结构相同，都有hi 的方法，因此属于相同的类。

名义类型系统

名义类型系统 (Nominal Type System)，是通过类型的名称确定两个类型是否相等。（采用该类型系统主要有：C, C++, Java, C#, Rust, …)。

#include <iostream>
class Foo {
    public:
        void hi() { std :: cout << "Hi" << std :: endl;}
};
class Bar {
    public:
        void hi() { std :: << "Hello" << std::endl;}
}
int main (){
    Foo foo;
    Foo & fooRef = foo; //works!
    
    //Error:type 'Bar' cannot
    //bind to a value of unrelated type 'Foo'
    Bar & bar = foo;
    return 0;
}

在上述 C++ 代码：虽然 Foo 和 Bar 结构相同,但是类名不同,不能完成赋值。

4、类型注解

不同类型的语言有着不同的类型注解语法。下面我们来看看以下demo：

// C++
int printf (const char*, ...)

# Objective-c
- (id)initWinthInt:(int)value;

//Julia
commission(sale::Int , rate::Float64)::Float64

#TypeScript
function log(message: string):void

C++ 放在参数/函数前面
Objc 放在前面，加括号
Julia 放在后面，加双冒号
TS 也放在后面，加单冒号

5、类型与集合的关系

我们在上学的时候，数学有老师有讲过集合的概念。其主要分为几类：空集、单元素集合、有限集合、无限集合、全集。我们可以类比集合来学习 TS 类型。

在这里插入图片描述

空集

never = Ø = {}

单元素集合

Null = {null}
Undefined = {undefined}
Literal Type(字面量类型,'a',1,true)

有限集合

Boolean = {true,false}

无限集合

String = {'a','b', ... 'hello', ...}
Symbol = {Symbol(...), ...}
BigInt = {..., -1n,0n,1n,...}
Number = {-Infinity,-(2^53 - 1),...0,...+(2^53 - 1),Infinity} 和 NaN

全集

unknown = Universal set

6、类型联合与交叉

TS 联合与交叉类型也可以通过数学集合来类比学习：

名字	联合类型(Union Types) 集合并集(Union)	交叉类型(Intersection Types)集合交集(Intersection)
图示
TS 写法	A \| B(A或B)	A & B(A与B)
数学写法	A U B(A并B)	A ∩ B(A交B)

7、类型别名

TS 类型别名也可以通过类比的方式学习：

JS中：我们可以使用 let, const, var 声明变量或常量。
TS中：我们可以使用 type 为类型声明别名。

// Value Space
let ID = 9527
const PI = 3.14
var myPI = PI

// Type Space
type ID = string
type User = {
    id:ID;
    name:string
}

//Error: Duplicate identifier 'User'
type User = {}

//块级作用域
{
    //OK
    type User = {
        id:number;
        name:string
    }
}