# wh-1017-typescript

**Repository Path**: chenwei5000/wh-1017-typescript

## Basic Information

- **Project Name**: wh-1017-typescript
- **Description**: 1, ts的安装和使用
2, ts的类型
3, ts 在项目中的表现
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-17
- **Last Updated**: 2023-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## TypeScript  笔记



### 1. ts 的介绍

​	typescript 能够给代码的数据类型添加一些批注，如果程序在编写的时候有问题，会及时报错	

​	减少代码调错的时间，提高开发的效率，提升团队协作的效率



​	微软2013开发的一个新的编程语言，它包含了传统的es5和es6+

​	目前来说，ts浏览器还不识别，还需要经过babel进行编译，目前语言的排名在逐步提升

​	更适合团队协作开发，突出“最佳实践”

### 2. 使用ts

​		`$ npm i typescript -g`

#### 2.1 正常使用

```ts
// 1. 创建ts的文件
function fn(x: number, y: number): number {
    return x + y;
}

fn(1, 4);
```

​	`$ tsc demo.ts`



#### 2.2 项目中使用

​	`$ tsc --init`  在项目中创建 tsconfig.json 文件

```json
{
    "compilerOptions": {
        // 要编译的目标版本
        "target": "es5",
        // 使用的模块化的方案
        "module": "commonjs",
        // 指定的输出目录
        "outDir": "./js",
        // 指定的编译入口
        "rootDir": "./ts",
        // 如果语法有问题报错了，则不通过编译
        "noEmitOnError": true
    }
}
```

​		启动项目监听 `$ tsc -w`     w  指的是 watch 监听的意思



### 3. ts 的类型

```javascript
// 1. 基本数据类型

// string类型
let str: string;
str = 'hello';

// number类型
let num: number;
num = 10;

// boolean类型
let bool: boolean;
bool = false;

// Undefined和Null
// 这俩是其他类型的子类型，可以默认赋值，但是在严格模式中，只有自己的唯一值
let data: undefined;
data = undefined;
data = null;

// 自定义字面量的类型
let str1: 'hello';
str1 = 'hello';

// any类型
let count: any;
count = 10;
count = 'adsad';

// void类型 - 没有返回值
```

```javascript
// 2. 数组相关的类型
// Array类型
// 方式1：
let arr: string[];
arr = ["10", "a"];
// 方式2
let arr1: Array<string | boolean>;
arr1 = [false, 'adsas']

// Tuple元组 - 规定了数组的长度和指定的类型，还有位置
let tArr: [number, boolean, string];
tArr = [20, false, 'hello'];

// enum枚举
enum Names {
    // 默认情况下，值是从0开始排序
    James, Jake, Justing
}
let num: number;
num = Names.James; // 0
enum Names {
    // James是0， Justing是8
    James, Jake = 7, Justing
}
enum Names {
    // James是0， Justing会报错，因为没有排序了
    James, Jake = '马云', Justing
}
```

```javascript
// 3. 对象和其他类型
// object 类型 - 不严谨，不建议使用
let obj: object;
obj = {}; obj = []; 

// union联合类型
let data: string | number;
data = 100;
data = 'hello';

// 类型推断/类型推导  - 它是一个概念，是ts内部处理的逻辑
let num = 10;
num = 'hello'; // X  会报错，默认批注为 number 类型

// 类型断言
// 有些情况通过异步或者dom的方法获取的内容是其他数据，无法进行添加批注
// 对于ts来说，如果没有添加过批注，那么在使用的时候就有可能存在隐患
// 所以在连续调用方法或者属性的时候就会产生报错，不允许编译

// 所谓的断言就是，程序员对于所获取到的内容有绝对的把握，不会出现错误
// 也就是说，告诉ts这些相关的内容不要进行编译之前的检查和校验了
const box = document.querySelector('#box');
// 方式1
(box as HTMLElement).style.color = '#f40';
// 方式2
(<HTMLElement>box).style.color = 'purple';
```

```javascript
// 4. 函数类型
// 有没有参数，有没有返回值
function fn(): void {
    console.log(100)
}

// 有参数和返回值的情况
function fn(x: number, y: number): number {
    return x + y;
}

// 函数的参数可选
function fn(x: number, y ?: number): number {
    return x + y;
}

// 函数参数的默认值
function fn(x: number = 0, y: number = 0): number {
    return x + y;
}

// 函数的rest参数
function fn(x:number, y:number, ...string[]): void {
    // ...
}
function createElement(tagName: string, attr: object, ...object[])
```



### 4. 接口



### 5. 泛型