静态类型、超集、面向对象的JavaScript扩展——TS（TypeScript）

CuinnFan Lv1
  2023-12-26 01:54:16 2023-12-26 01:54:16 创建   2023-12-26 02:47:01 2023-12-26 02:47:01 更新      

TypeScript介绍

本篇文章只对TypeScript进行了最基础的介绍，关于TS的更多文章请在“TS”标签内查看

什么是TS（TypeScript） ？

TypeScript（简称 TS）是微软公司开发的一种基于 JavaScript （简称 JS）语言的编程语言。

它的目的并不是创造一种全新语言，而是增强 JavaScript 的功能，使其更适合多人合作的企业级项目。

TypeScript 可以看成是 JavaScript 的超集（superset），即它继承了后者的全部语法，所有 JavaScript 脚本都可以当作 TypeScript 脚本（但是可能会报错），此外它再增加了一些自己的语法。

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

TypeScript 被广泛用于大型项目和前端开发，它为开发者提供了更强大的工具和语法，同时与 JavaScript 保持兼容性，使得现有的 JavaScript 代码可以逐步迁移到 TypeScript 中。

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

TypeScript 代码示例：

1
2
3
4
5
6
7
8
9
function fn(x:string|number) { 
    if (typeof x === 'string') {
        // ... 
    } else if (typeof x === 'number') { 
        // ... 
    } else {
        x; // never 类型 
    } 
  }

TS 的发展形势非常好，至今很多 JavaScript 项目都支持 TS，比如 Vue3 和 React 前端两大框架都支持 TS。

TS相较于JS具体扩展了哪些内容？

TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：

  • 类型批注和编译时类型检查
  • 类型推断
  • 类型擦除
  • 接口
  • 枚举
  • Mixin
  • 泛型编程
  • 名字空间
  • 元组
  • Await

以下功能是从 ECMA 2015 反向移植而来：

  • 类
  • 模块
  • lambda 函数的箭头语法
  • 可选参数以及默认参数

我们可以直接的理解为TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

上手TypeScript

tsc 编译器

TypeScript 官方提供的编译器叫做 tsc，可以将 TypeScript 脚本编译成 JavaScript 脚本。本机想要编译 TypeScript 代码，必须安装 tsc。

使用npm安装

安装TS需要用到npm工具，如果你的本地环境已经安装了 npm 工具，可以使用以下命令来安装。

使用国内镜像：

1
npm config set registry https://registry.npmmirror.com

安装：

1
npm install -g typescript

上面命令是全局安装 tsc，也可以在项目中将 tsc 安装为一个依赖模块。

安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码，以下是查看版本号：

1
2
$ tsc -v
Version 3.2.2

编译脚本

根据约定，TypeScript 脚本文件使用.ts后缀名，JavaScript 脚本文件使用.js后缀名。tsc 的作用就是把.ts脚本转变成.js脚本。

我们首先新建一个 app.ts 的文件，代码如下：

1
var message:string = "Hello World" console.log(message)

执行以下命令将 TypeScript 转换为 JavaScript 代码：

1
tsc app.ts

这时候在当前目录下（与 app.ts 同一目录）就会生成一个 app.js 文件，代码如下：

1
var message = "Hello World"; console.log(message);

使用 node 命令来执行 app.js 文件：

1
2
$ node app.js 
Hello World

TypeScript基础

此部分用来介绍TypeScript 的一些最基本的语法和用法。

基础类型

TypeScript 引入了一些基本类型，相比于JavaScript，这些类型在TypeScript中是静态类型的一部分，可以在编译时进行类型检查。以下是 TypeScript 的基本类型以及相较于 JavaScript 新增的一些类型：

TypeScript新增的类型：

  1. Tuple（元组）：

    • 允许表示一个固定长度的数组，各元素可以有不同的类型。
    1
    let myTuple: [string, number] = ['TypeScript', 2022];

  2. Enum（枚举）：

    • 允许为一组数值赋予友好的名字。
    1
    2
    3
    4
    5
    6
    enum Color {
      Red,
      Green,
      Blue
    }
    let myColor: Color = Color.Green;

  3. Any（任意类型）：

    • 表示一个动态类型，可以在运行时改变类型。
    1
    2
    let dynamicValue: any = 'Hello TypeScript';
    dynamicValue = 42;

  4. Void（空类型）：

    • 表示没有返回值的函数的返回类型。
    1
    2
    3
    function logMessage(): void {
      console.log('This function has no return value');
    }

  5. Never（永远不存在的值的类型）：

    • 表示永远不会返回的函数的返回类型，或者抛出异常的函数。
    1
    2
    3
    function throwError(message: string): never {
      throw new Error(message);
    }

JavaScript和TypeScript共有的基本类型：

  1. Boolean（布尔类型）：

    • 表示逻辑值 true 或 false。
    1
    let isDone: boolean = false;

  2. Number（数字类型）：

    • 表示数值，包括整数和浮点数。
    1
    2
    3

    let decimal: number = 6;
    let pi: number = 3.14;

  3. String（字符串类型）：

    • 表示文本数据。
    1
    2

    let message: string = 'Hello, TypeScript!';

  4. Array（数组类型）：

    • 表示一个数组，可以包含多个相同类型的元素。
    1
    let numbers: number[] = [1, 2, 3, 4];

  5. Object（对象类型）：

    • 表示任意JavaScript对象。
    1
    2
    typescriptCopy code
    let user: { name: string, age: number } = { name: 'John', age: 30 };

类型声明

TypeScript 代码最明显的特征，就是为 JavaScript 变量加上了类型声明。

1
let foo: string;

上面示例中，变量foo的后面使用冒号，声明了它的类型为string。

类型声明的写法，一律为在标识符后面添加“冒号 + 类型”。函数参数和返回值，也是这样来声明类型。

1
2
3
function toString(num: number): string {
  return String(num);
}

上面示例中，函数toString()的参数num的类型是number。参数列表的圆括号后面，声明了返回值的类型是string。更详细的介绍，参见《函数》一章。

注意，变量的值应该与声明的类型一致，如果不一致，TypeScript 就会报错。

1
2
// 报错
let foo: string = 123;

上面示例中，变量foo的类型是字符串，但是赋值为数值123，TypeScript 就报错了。

另外，TypeScript 规定，变量只有赋值后才能使用，否则就会报错。

1
2
let x: number;
console.log(x); // 报错

上面示例中，变量x没有赋值就被读取，导致报错。而 JavaScript 允许这种行为，不会报错，没有赋值的变量会返回undefined。

类型推断

类型声明并不是必需的，如果没有，TypeScript 会自己推断类型。

1
let foo = 123;

上面示例中，变量foo并没有类型声明，TypeScript 就会推断它的类型。由于它被赋值为一个数值，因此 TypeScript 推断它的类型为number。

后面，如果变量foo更改为其他类型的值，跟推断的类型不一致，TypeScript 就会报错。

1
2
let foo = 123;
foo = "hello"; // 报错

上面示例中，变量foo的类型推断为number，后面赋值为字符串，TypeScript 就报错了。

TypeScript 也可以推断函数的返回值。

1
2
3
function toString(num: number) {
  return String(num);
}

上面示例中，函数toString()没有声明返回值的类型，但是 TypeScript 推断返回的是字符串。正是因为 TypeScript 的类型推断，所以函数返回值的类型通常是省略不写的。

从这里可以看到，TypeScript 的设计思想是，类型声明是可选的，你可以加，也可以不加。即使不加类型声明，依然是有效的 TypeScript 代码，只是这时不能保证 TypeScript 会正确推断出类型。由于这个原因。所有 JavaScript 代码都是合法的 TypeScript 代码。

这样设计还有一个好处，将以前的 JavaScript 项目改为 TypeScript 项目时，你可以逐步地为老代码添加类型，即使有些代码没有添加，也不会无法运行。

  • 标题: 静态类型、超集、面向对象的JavaScript扩展——TS（TypeScript）
  • 作者: CuinnFan
  • 创建于 : 2023-12-26 01:54:16
  • 更新于 : 2023-12-26 02:47:01
  • 链接: https://cuinnfanck.com/2023/12/26/静态类型、超集、面向对象的JavaScript扩展——TS（TypeScript）/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
 评论
此页目录
静态类型、超集、面向对象的JavaScript扩展——TS（TypeScript）
  1. TypeScript介绍
    1. 什么是TS（TypeScript） ？
    2. TS相较于JS具体扩展了哪些内容？
  2. 上手TypeScript
    1. tsc 编译器
      1. 使用npm安装
      2. 编译脚本
    2. TypeScript基础
      1. 基础类型
      2. 类型声明
      3. 类型推断