# ts-study

**Repository Path**: vsiryxm/ts-study

## Basic Information

- **Project Name**: ts-study
- **Description**: TypeScript学习笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-15
- **Last Updated**: 2022-06-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


### TypeScript学习笔记

#### TS简介

TypeScript 是JavaScript的一个超集，支持ECMAScript 6标准。以下简称TS。
TS是微软开源的语言，设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的 JavaScript可以运行在任何浏览器上。

官网：https://typescriptlang.org

为什么要使用TypeScript？
- 类型推演与类型匹配
TypeScript通过类型注解提供编译时的静态类型检查。
- 开发编译时报错
- 极大程度地避免了低级错误
- 支持JavaScript最新特性（包含ES6/7/8）

> 文件扩展名为：`.ts`，语法上区分大小写，语句末尾的分号是可选的。
建议使用let替换var，let为ES6引入关键词，主要是为了解决var作用域混乱的问题。

#### TS数据类型
- 布尔类型（boolean）
- 数值类型（number）
- 字符串类型（string）
- 数组类型（array）
- 元组类型（tuple）
- 枚举类型（enum）
- any和unknown类型
- null和undefined类型
- void类型
- never类型

#### TS与JS的关系

![](./doc/ts-1.png) 
![](./doc/ts-2.png)

ESMA International（爱玛国际）是一个JS标准组织，负责维护版本。

ECMAScript = ES

ES3/ES5版本：支持目前所有主流浏览器，没有ES4这个版本（失败了）

ES6版本 = ES2015：颠覆性版本，开始支持面向对象编程，支持const、let，引入了Module的概念，但目前主流浏览器未支持，需要使用TSC来编译成ES5再使用。

ECMA约定，ES的版本由ES+年份来命名，ES7=ES2016，ES8=ES2017

#### 安装TS

前置条件：先安装好nodejs
```
npm install -g typescript

tsc --version
Version 4.3.5
```

#### 使用TS

1、新建一个`app.ts`文件；
```
mkdir src
cd src
touch app.ts 
```

2、新建ts配置文件
```
cd ../
tsc --init
```
内容如下：
```
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES5",
        "strict": false,
        "noImplicitAny": true,
        "strictNullChecks": false,
        "sourceMap": false,
        "outDir": "./dist"
    },
    "include": [
        "src/**/*"
    ],
    "compileOnSave": false
}
```

3、编写代码

4、编译成js
```
tsc -t es5 -w  ./src/*.ts
```

5、运行js
```
node app.js
```

#### 配置文件与TSC命令参数说明

tsconfig.json

```
{
    "compilerOptions": { //编译配置选项 确定如何编译ts文件
        "module": "commonjs", 
        "target": "es5", 
        "sourceMap": false,
        "noImplicitAny": true, 
        "strictNullChecks": false,
        "outDir": "./dist"
    },
    "include": [
        "src/**/*"
    ]
}
```

以下参数与配置文件里的配置项意义相同：

|配置项|说明|
|--|:--|
|--module|可简写为-m，载入扩展模块，可以使用commonjs、amd、umd、system、es6、es2015、none这些选项|
|--target|可简写为-t，用于指定生成代码的兼容版本，可以从es3、es5、es2015、es6中选择一个，如果不设置，默认生成的代码兼容到es3。|
|--declaration|可简写为-d，额外生成一个 .d.ts 扩展名的文件。|
|--removeComments|如果设置为true时，则删除文件的注释|
|--out|编译多个文件并合并到一个输出的文件|
|--sourcemap|sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。如果设置为true，则会生成一个 sourcemap (.map) 文件。|
|--watch|可简写为-w，设置为true时开启监视模式，编译器将监视ts文件变化。当文件变化时，自动编译成js。|
|--outDir|指定生成js文件的目录|
|--noImplicitUseStrict|当设置为true时，编译输出时不会调用'use strict'指令（也就是不生成use strict）|
|--sourceRoot|设置在调试时定位的目标文件根目录|
|--forceConsistentCasingInFileNames|设置为true时，将强制区分大小写。默认为false。|
|--exclude|exclude用于排除不需要编译的ts文件，该属性和files属性冲突，两者只能设置其一。|
|--files|当files属性不存在时，编译器会编译当前目录和子目录中的所有文件。当files属性存在是，仅仅是编译files列表中的文件。该属性和exclude属性冲突。如果同时指定了exclude和files，则files属性优先。|
|--compileOnSave|该属性用于启用保存时编译功能。**注意：**当前仅仅只有VS2015配置TypeScript1.8.4以后或者在atom中搭配atom-typescript插件才有效|


#### 保留关键词

```
break、as、catch、switch、case、if、throw、else、var、number、string、get、module、type、instanceof、typeof、public、private、enum、export、finally、for、while、void、null、super、this、new、in、return、true、false、any、extends、static、let、package、implements、interface、function、new、try、yield、const、continue、do
```

#### 学习资料

https://www.tslang.cn/docs/home.html 中文手册

https://www.imooc.com/learn/1306

https://www.runoob.com/typescript/ts-tutorial.html

http://www.semlinker.com/master-ts-generic/ 一文读懂 TypeScript 泛型及应用

https://segmentfault.com/a/1190000023858355 细数这些年被困扰过的 TS 问题

https://24kcs.github.io/vue3_study/chapter2/1_type.html 尚硅谷教程

#### VsCode配置
安装插件：
```
TypeScript Toolbox
TSLint
JSON to TS

HTML Boilerplate
Beautify
```