Typescript知识总结（1）

忘是亡心i 2023-10-02 11:02 26阅读 0赞

**目录**

一 . 总体思维导图

二. 为什么要学习（优点）

三 . 如何使用

3.1 下载（我用的npm）

3.2 简单的使用demo（我用的vscode）

四.基本类型

4.1 布尔类型

4.2 数值类型

4.3 字符串

4.4 数组

4.5 元组

4.6 枚举

4.7 Object

4.8 Any

4.9 unknown

4.10 Void

4.11 Null和Undefined

4.12 Never

--------------------

### 一 . 总体思维导图 ###

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16][]

--------------------

**接下来正式进入typescript的学习**

### 二. 为什么要学习（优点） ###

> **首先，他是js的超集，就是说JavaScript有的它都有，甚至还有其没有的许多其他功能；其次，它更加的严谨，比如说定义变量的时候js是动态的，而ts是静态的（一开始就声明这个变量是什么类型），最后就是，用它方便后期维护和多人协作。**
> 
> **TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。 typescript不仅可以约束我们的编码习惯，还能起到注释的作用，当我们看到一函数后我们立马就能知道这个函数的用法，需要传什么值，返回值是什么类型一目了然，对大型项目的维护性有很大的提 升。也不至于使开发者搬起石头砸自己的脚。**
> 
> **重点：类型检查、直接编译到原生js、引入新的语法糖**

--------------------

### 三 . 如何使用 ###

#### 3.1 下载（我用的npm） ####

npm install -g typescript

#### 3.2 简单的使用demo（我用的vscode） ####

**ts最终还是要转化为js文件才能运行**

> 1.新建空白文件夹;
> 
> 2.npm init /\* 初始化项目 \*/;
> 
> 3.tsc --init /\* 初始化typescript配置 \*/
> 
> 4.新建index.ts文件生成一个tsconfig.json文件；
> 
> 5.打开json文件，取消outDir的注释，指的是编译到的路径，然后新建一个文件夹js存放编译后的js ；
> 
> 6.选中index.ts--》点击右上角‘终端’--》运行生成任务--》点击tsc:监视--在js文件夹下就生成了编译后的js文件。

--------------------

### 四.基本类型 ###

**ts支持所有js中的类型，并且还做了拓展**

#### 4.1 布尔类型 ####

const isDone: boolean = true;

--------------------

#### 4.2 数值类型 ####

支持二进制，十进制，十六进制等数
    const decLiteral: number = 6
    const hexLiteral: number = 0xf00d
    const binaryLiteral: number = 0b1010
    const octalLiteral: number = 0o744

--------------------

#### 4.3 字符串 ####

支持模板字符串
    let name: string = "bob";
    let sentence: string = `Hello, my name is ${ name }`

--------------------

#### 4.4 数组 ####

数组有两种定义类型方式，如下
    let list: number[] = [1, 2, 3];
    let list2: Array<number> = [1, 2, 3];

--------------------

#### 4.5 元组 ####

元组类型表示一个已知元素数量和类型的数组，各元素类型不一定一致。
    let x: [string, number];
    x = ['hello', 10]; // OK
    x = ['hello', 10, false]; // Error
    x = [10, 'hello']; // Error

--------------------

#### 4.6 枚举 ####

**表示几种可能值之一，枚举值可以为数字，字符串等**

enum Direction {
        Up,
        Down,
        Left,
        Right
    }
    console.log(Direction.Up === 0); // true
    console.log(Direction.Down === 1); // true
    console.log(Direction.Left === 2); // true
    console.log(Direction.Right === 3); // true
    // 数字枚举支持反向映射，即通过值获取key
    console.log(Direction[0] === 'Up'); // true
    enum Direction {
        Up = 10,
        Down,
        Left,
        Right
    }
    console.log(Direction.Up, Direction.Down, Direction.Left, Direction.Right); 
    // 10 11 12 13
    // 字符串
    enum Direction {
        Up = 'Up',
        Down = 'Down',
        Left = 'Left',
        Right = 'Right'
    }
    console.log(Direction['Right'], Direction.Up); // Right Up

--------------------

#### 4.7 Object ####

> object 表示非原始类型，也就是除 number，string，boolean，symbol，null 或 undefined 之外的类型

declare function create(o: object | null): void;
    create({ prop: 0 }); // OK
    create(null); // OK
    create(undefined); // OK
    create(42); // Error
    create("string"); // Error
    create(false); // Error

--------------------

#### 4.8 Any ####

any表示任何可能，当设置为any时，类型检查器对这些值将不再进行检查，所以实际项目中不建议使用。大部分情况下可用unknown替代。

let notSure: any = 4;
    notSure = "maybe a string instead"; // OK 
    notSure.toString(); // OK

--------------------

#### 4.9 unknown ####

> unknown在ts3.0加入，用法同any，表示当前并不知道该变量为哪种类型，不过不会关闭类型检查，在unknown类型被确定为某一中类型之前，不能进行实例化，getter，函数执行等。

let notSure: unknown = 4;
    notSure = "maybe a string instead"; // OK 
    notSure.toString(); // ERROR

通过unknown的使用场景是不知道类型为何种类型时，结合类型保护机制使用，如下：

function getValue(value: unknown): string {
      if (value instanceof Date) { // 这里由于把value的类型缩小为Date实例的范围内,所以`value.toISOString()`
        return value.toISOString();
      }
      return String(value);
    }

--------------------

#### 4.10 Void ####

**声名一个void类型的变量没有什么大用，因为只能为void变量赋undefined和null**

let unusable: void = undefined; // ok
    function warnUser(): void {
        alert("This is my warning message");
    }

--------------------

#### 4.11 Null和Undefined ####

> 和void类似，本身的类型用处不大，不过可以把null和undefined赋给任何其他类型变量。 但是当指定了--strictNullChecks，它们就只能赋给自己本身了。

let u: undefined = undefined;
    let n: null = null;

--------------------

#### 4.12 Never ####

**never表示永不会存在的值**

// 返回never的函数必须存在无法达到的终点
    function error(message: string): never {
        throw new Error(message);
    }
    function infiniteLoop(): never {
        while (true) {
        }
    }

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20211006234029342.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16