# TypeScript

**Repository Path**: huang-mande/type-script

## Basic Information

- **Project Name**: TypeScript
- **Description**: 学习目录
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-04-28
- **Last Updated**: 2023-07-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## TypeScript

### 需要注意的点

typescript区分大小写

tsc +文件名称 将type script编译成js文件

建议使用分号，语句写在同一行必须使用分号间隔

### 基础类型（特殊的）

* any 声明为 any 的变量可以赋予任意类型的值。
* 元组 ![image-20230606230515141](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606230515141.png)
* 枚举 enum ：
* ![image-20230606230504028](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606230504028.png)
* never是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环）

![image-20230606230441439](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606230441439.png)

==**注意：TypeScript 和 JavaScript 没有整数类型。**==

### 变量声明

typescript的变量声明主要 区别是变量名之后加:之后再加类型 = 值，可以省略 值 类型等

```typescript
var [变量名] : [类型] = 值;
```

```typescript
var uname:string = "Runoob";
```

### 函数定义中

需要定义返回值的时候需要在函数名称之后添加冒号后定义 返回值类型

![image-20230606230417606](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606230417606.png)

在函数中的参数传递中 参数的类型如果需要确定，也需要在参数之后添加 : 类型

![](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606230417606.png)

在 TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？。可选参数必须跟在必需参数后面。 如果上例我们想让 firstName 是可选的，lastName 必选，那么就要调整它们的位置，把 firstName 放在后面。如果都是可选参数就没关系。

![image-20230606230531750](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606230531750.png)

匿名函数：把函数定义好之后赋值给一个变量 和普通的函数定义一样

![image-20230606230542435](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606230542435.png)

##重头来过



## Day1

### 1.常用类型

![image-20230606154927243](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606154927243.png)

### 2.类型别名type

![image-20230606155359099](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606155359099.png)

### 3.函数类型

#### 单独指定参数和而返回类型

![image-20230606160033684](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606160033684.png)

#### 同时指定参数和返回类型（有点麻烦）

![image-20230606160506717](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606160506717.png)

这种形式只使用于函数表达式

#### 参数的传递与否

![image-20230606162027963](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606162027963.png)

### 4.对象类型

![image-20230606162954270](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606162954270.png)

### 5.接口

![image-20230606164448116](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606164448116.png)

#### 接口和类型别名的区别

![image-20230606164737265](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606164737265.png)

#### 接口继承

和java的语法差不多呀

![image-20230606164957134](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606164957134.png)

## Day2

### 6.元组（map？）

![image-20230606204827138](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606204827138.png)

### 7.类型推论

没有明确指出类型的地方，TS的类型推论机制回帮助提供类型，就是说有些地方的类型可以省略不写

![image-20230606205154886](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606205154886.png)

函数的返回值也是可以省略不写的

![image-20230606212808190](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606212808190.png)

### 8.类型断言

通过as关键字指定一个更加具体的类型

当程序员，比ts更加明确变量的具体类型使用

![image-20230606214428569](https://gitee.com/huang-mande/pic-go-image/raw/master/Image/image-20230606214428569.png)

### 9.字面量类型

typescript 中 某个特定的字符串可以作为TS中的类型

![image-20230608101553798](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608101553798.png)

![image-20230608101710332](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608101710332.png)

### 10.枚举



![image-20230608103549323](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608103549323.png)

![image-20230608103607934](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608103607934.png)

![image-20230608103650566](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608103650566.png)

![image-20230608103935572](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608103935572.png)

### 11.没用的typeof

![image-20230608104410426](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608104410426.png)

### 12.高级类型

#### 类class

![image-20230608104537753](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608104537753.png)

和java一样可以通过extends继承父类 相对于js 多了一个implements（实现接口）

![image-20230608105044440](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608105044440.png)

![image-20230608105329422](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608105329422.png)

和java差不多

**protected ：仅对其声明所在的类和子类中（非实例对象）可见**

![image-20230608105516706](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608105516706.png)

==private当前类中可见，对实例对象以及其子类不可见==

![image-20230608110317069](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608110317069.png)

==readonly防止在构造函数之外对属性进行赋值==

![image-20230608110433821](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608110433821.png)

### 13.可以兼容

#### class类的兼容

![image-20230608110718199](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608110718199.png)

成员多的可以赋值给成员少的

![image-20230608110812181](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608110812181.png)

#### 接口兼容

![image-20230608111753354](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608111753354.png)

#### 函数兼容

![image-20230608113133602](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608113133602.png)

![image-20230608113210664](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230608113210664.png)

### 14.Type使用

继承语法：

![image-20230609102903946](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230609102903946.png)

## Day3

### 15.any类型的复习

![image-20230609104516477](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230609104516477.png)

### 16.交叉类型 type的继承 &

![image-20230609104813773](../../../Library/Application Support/typora-user-images/image-20230609104813773.png)

### 17.泛型函数

![image-20230609105714780](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230609105714780.png)

![image-20230609105859518](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230609105859518.png)

调用函数的时候可以简化泛型函数的调用

==因为是泛型所以可能不能访问属性 需要添加约束来收缩类型==

![image-20230609110222309](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230609110222309.png)

**方法**

![image-20230609110249438](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230609110249438.png)

![image-20230609110351022](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230609110351022.png)

**泛型的类型变量可以有多个，类型变量之间，还可以约束**（看不懂了）

![image-20230609110814713](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230609110814713.png)

**泛型在创造接口时候的使用**

![image-20230609111256997](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230609111256997.png)

泛型可以在 class的创建中使用 可以使用Readonly来构造一个类型，将type的所有属性都设置为只读

### 18.索引签名类型

![image-20230609112100708](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230609112100708.png)

### 19.映射类型 ——基于旧类型创建新的类型 减少重复

![image-20230609112347589](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230609112347589.png)

![image-20230609112445600](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230609112445600.png)

![image-20230609112613659](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230609112613659.png)

![image-20230609112637259](https://gitee.com/huang-mande/work-image/raw/master/Image/image-20230609112637259.png)