# TypeScriptDemo

**Repository Path**: ektx/TypeScriptDemo

## Basic Information

- **Project Name**: TypeScriptDemo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-15
- **Last Updated**: 2020-12-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TypeScript

[toc]

## 网站

[中文官网](https://www.tslang.cn/)  
[英文官网](https://www.typescriptlang.org/)  
[中文手册](https://typescript.bootcss.com/)  

## 安装

```sh
npm install -g typescript
```

## tsc的使用

### tsc命令的使用
```bash
# 查看使用帮助
tsc --help
# 将 hello.ts 文件生成到 dist 目录中
tsc --outDir dist hello.ts
# 将 src 目录中的 hello.ts 生成到 dist 目录中
tsc --outDir dist ./src/hello.ts
```

### 自动编译

在 vscode 中添加任务，

```bash
# 生成 tsconfig.json
tsc --init

# vs code -> 终端 -> 运行生成任务 > 监视刚才生成的 tsconfig.json
```

**tsc 常见配制说明：**

- -w 监控文件变化，自动编译
- --incremental 增量编译，只对修改过的文件进行编译工作


#### 动态生成

```bash
tsc -w
```

> 动态生成时，你需要先配置一下 **tsconfig.json**

### 查看版本

```bash
tsc -v
```

## 忽略错误

```ts
if (false) {
    // @ts-ignore: Unreachable code error
    console.log("hello");
}
```

## 类型

### 数组

```ts
// 定义一个都是数字的数组
let arr: number[] = [1,2,3];
let arr2: Array<number> = [1,2,3];
```

- 元组类型(tuple)
给数组中每个位置定义类型

```ts
// 定义一个数组，第一个元素是数字，第二个是字符串
let arr:[number, string] = [1,'hello'] // 正确
let arr2:[number, string] = [1, 2] // 2不是字符串
```

### 枚举类型 enum

```ts
enum Color {red, blue, pink}

console.log(Color.red) // 0

enum Apple {iPhone, iMac = 5, iPod}

console.log(Apple.iPhone) // 0 保持 0
console.log(Apple.iMac) // 5
console.log(Apple.iPod) // 6 自动递增
```

### 接口（自定义）类型 interface

```ts
interface Person {
    firstName: string;
    lastName: string;
}

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

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);


// 定义不确定接口类型
interface Obj {
    [name: string]: any
}

let obj: Obj = {
    name: 'abc',
    1: 'skal'
}
```

### Any

```ts
// any 表示任意类型
// 设置为 any 后，赋值不再受到类型的约束
let str: any = 123
// 赋值字符串
str = "hello ts"
// 赋值布尔值
str = false
```

### unknow

```ts
// unknown
let value: unknown

value = true


let abc: unknown = value
let abc2: any = value
let abc3: number = value // Error
```
### void

```ts
// void 表示无返回值，值只能为 undefined
let no: void = undefined

// 无返回值的函数
function test(): void {
    console.log('test...')
}
```

### 断言

```ts
let someValue: any = "this is a string";
// 使用 as 来断言类型
let strLength: number = (someValue as string).length;
// 或是 <> 来断言类型
let strLength2: number = (<string>someValue).length;
console.log(strLength)
```

[📚 类型断言](https://jkchao.github.io/typescript-book-chinese/typings/typeAssertion.html)  
### 泛型

```ts
function hello<T>(arg: T): void {}

function hello<number>(2){} // √
function hello2<number>(true){} // x

// Array demo
function hiArr<T>(params: T[]) {}
hiArr<number>([1,2])
```

- T type 表示类型
- K key 表示对象中的键类型
- V value 表示对象中的值类型
- E Element 表示元素类型

## 资料
[✍🏻 在线编辑器](https://www.staging-typescript.org/play)