### 彪哥

爱好前端

- 初识 TypeScript

  - 简介
  - 安装 TypeScript
  - 编写第一个 TypeScript 程序
    - 编译代码
    - 类型注解
    - 接口
    - 类
    - 总结

- TypeScript 常用语法

- ts-axios 项目初始化

- ts-axios 基础功能实现

- ts-axios 异常情况处理

- ts-axios 接口扩展

- ts-axios 拦截器实现

- ts-axios 配置化实现

- ts-axios 取消功能实现

- ts-axios 更多功能实现

- ts-axios 单元测试

- ts-axios 部署与发布

- 《TypeScript 从零实现 axios》
- 初识 TypeScript

HuangYi
2020-01-05
目录

# 编写第一个 TypeScript 程序

# # 编写第一个 TypeScript 程序

在编辑器，将下面的代码输入到 greeter.ts 文件里：

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

    let user = 'Yee'

    console.log(greeter(user))

1
2
3
4
5
6
7

## # 编译代码

我们使用了 `.ts` 扩展名，但是这段代码仅仅是 JavaScript 而已。

在命令行上，运行 TypeScript 编译器：

    tsc greeter.ts

1

输出结果为一个 `greeter.js` 文件，它包含了和输入文件中相同的 JavsScript 代码。

在命令行上，通过 Node.js 运行这段代码：

    node greeter.js

1

控制台输出：

    Hello, Yee

1

## # 类型注解

接下来让我们看看 TypeScript 工具带来的高级功能。 给 `person` 函数的参数添加 `: string` 类型注解，如下：

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

    let user = 'Yee'

    console.log(greeter(user))

1
2
3
4
5
6
7

TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式。 在这个例子里，我们希望 `greeter` 函数接收一个字符串参数。 然后尝试把 `greeter` 的调用改成传入一个数组：

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

    let user = [0, 1, 2]

    console.log(greeter(user))

1
2
3
4
5
6
7

重新编译，你会看到产生了一个错误：

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

1

类似地，尝试删除 `greeter` 调用的所有参数。 TypeScript 会告诉你使用了非期望个数的参数调用了这个函数。 在这两种情况中，TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。

要注意的是尽管有错误，`greeter.js` 文件还是被创建了。 就算你的代码里有错误，你仍然可以使用 TypeScript。但在这种情况下，TypeScript 会警告你代码可能不会按预期执行。

## # 接口

让我们继续扩展这个示例应用。这里我们使用接口来描述一个拥有 `firstName` 和 `lastName` 字段的对象。 在 `TypeScript` 里，只在两个类型内部的结构兼容，那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 `implements` 语句。

    interface Person {
      firstName: string
      lastName: string
    }

    function greeter (person: Person) {
      return 'Hello, ' + person.firstName + ' ' + person.lastName
    }

    let user = {
      firstName: 'Yee',
      lastName: 'Huang'
    }

    console.log(greeter(user))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

## # 类

最后，让我们使用类来改写这个例子。 TypeScript 支持 JavaScript 的新特性，比如支持基于类的面向对象编程。

让我们创建一个 `User` 类，它带有一个构造函数和一些公共字段。因为类的字段包含了接口所需要的字段，所以他们能很好的兼容。

还要注意的是，我在类的声明上会注明所有的成员变量，这样比较一目了然。

    class User {
      fullName: string
      firstName: string
      lastName: string

      constructor (firstName: string, lastName: string) {
        this.firstName = firstName
        this.lastName = lastName
        this.fullName = firstName + ' ' + lastName
      }
    }

    interface Person {
      firstName: string
      lastName: string
    }

    function greeter (person: Person) {
      return 'Hello, ' + person.firstName + ' ' + person.lastName
    }

    let user = new User('Yee', 'Huang')

    console.log(greeter(user))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

重新运行 `tsc greeter.ts`，你会看到 TypeScript 里的类只是一个语法糖，本质上还是 `JavaScript` 函数的实现。

## # 总结

到这里，你已经对 TypeScript 有了一个大致的印象，那么下一章让我们来一起学习 TypeScript 的一些常用语法吧。

编辑
(opens new window)
#TypeScript
上次更新: 2022/12/14, 19:36:42
安装 TypeScript
基础类型

← 安装 TypeScript 基础类型→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式