# Typescript学习

**Repository Path**: hrbu2023/ts-learning

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-17
- **Last Updated**: 2025-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Typescript







需要再Node环境下  安装 Typescript工具

- nvm

- Node
- typescript 





# 安装环境

## nvm

![image-20250917103507994](./assets/image-20250917103507994.png)

![image-20250917103522726](./assets/image-20250917103522726.png)

![image-20250917103603807](./assets/image-20250917103603807.png)

![image-20250917103616193](./assets/image-20250917103616193.png)

![image-20250917103628854](./assets/image-20250917103628854.png)

![image-20250917103642505](./assets/image-20250917103642505.png)

## 安装Node

![image-20250917103739548](./assets/image-20250917103739548.png)



- 查看有那些版本可以安装   

  ```
  nvm  list 
  ```

  

- 查看可以用安装的版本号

```
C:\Users\Administrator>nvm list available

|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|    24.8.0    |   22.19.0    |   0.12.18    |   0.11.16    |
|    24.7.0    |   22.18.0    |   0.12.17    |   0.11.15    |
|    24.6.0    |   22.17.1    |   0.12.16    |   0.11.14    |
|    24.5.0    |   22.17.0    |   0.12.15    |   0.11.13    |
|    24.4.1    |   22.16.0    |   0.12.14    |   0.11.12    |
|    24.4.0    |   22.15.1    |   0.12.13    |   0.11.11    |
|    24.3.0    |   22.15.0    |   0.12.12    |   0.11.10    |
|    24.2.0    |   22.14.0    |   0.12.11    |    0.11.9    |
|    24.1.0    |   22.13.1    |   0.12.10    |    0.11.8    |
|    24.0.2    |   22.13.0    |    0.12.9    |    0.11.7    |
|    24.0.1    |   22.12.0    |    0.12.8    |    0.11.6    |
|    24.0.0    |   22.11.0    |    0.12.7    |    0.11.5    |
|   23.11.1    |   20.19.5    |    0.12.6    |    0.11.4    |
|   23.11.0    |   20.19.4    |    0.12.5    |    0.11.3    |
|   23.10.0    |   20.19.3    |    0.12.4    |    0.11.2    |
|    23.9.0    |   20.19.2    |    0.12.3    |    0.11.1    |
|    23.8.0    |   20.19.1    |    0.12.2    |    0.11.0    |
|    23.7.0    |   20.19.0    |    0.12.1    |    0.9.12    |
|    23.6.1    |   20.18.3    |    0.12.0    |    0.9.11    |
|    23.6.0    |   20.18.2    |   0.10.48    |    0.9.10    |

```

选择某一个版本号进行安装

```shell
# 1 安装了  20.18.2 
C:\Users\Administrator>nvm install  20.18.2
Downloading node.js version 20.18.2 (64-bit)...
Extracting node and npm...
Complete
Installation complete.
If you want to use this version, type:

nvm use 20.18.2

# 1 安装了  18.12.0
C:\Users\Administrator>nvm install  18.12.0
Downloading node.js version 18.12.0 (64-bit)...
Extracting node and npm...
Complete
Installation complete.
If you want to use this version, type:

nvm use 18.12.0
```

设置某一个版本号激活

```
C:\Users\Administrator>nvm use 20.18.2
Now using node v20.18.2 (64-bit)

C:\Users\Administrator>node -v
v20.18.2
```



## 使用npm 安装 typescript

npm 通过网络https://www.npmjs.com/ 自动的下载软件进行安装

设置 npm镜像

可以阅读https://npmmirror.com/设置

```
npm config set registry https://registry.npmmirror.com
```



```
npm i typescript -g
```

## 测试ts编译成js

1. 创建 hello.ts

   hello.ts 

   ```typescript
   let a: string = "张三"
   
   ```

   ![image-20250917110423719](./assets/image-20250917110423719.png)

   

   

   

2. 翻译成js

   ![image-20250917110645608](./assets/image-20250917110645608.png)



# 设置自动编译

- 创建一个配置文件

```
C:\Users\Administrator\Desktop\javaproject\ts>tsc --init

Created a new tsconfig.json                                                                                             
                                                                                                                     TS 
You can learn more at https://aka.ms/tsconfig
```

生成的tsconfig.json

```
{
  // Visit https://aka.ms/tsconfig to read more about this file
  "compilerOptions": {
    // File Layout
    // "rootDir": "./src",
    // "outDir": "./dist",

    // Environment Settings
    // See also https://aka.ms/tsconfig/module
    "module": "es6",
    "target": "es6",
    "types": [],
    // For nodejs:
    // "lib": ["esnext"],
    // "types": ["node"],
    // and npm install -D @types/node
    "noEmitOnError": true,
    // Other Outputs
    // "sourceMap": true,
    // "declaration": true,
    // "declarationMap": true,

    // Stricter Typechecking Options
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,

    // Style Options
    // "noImplicitReturns": true,
    // "noImplicitOverride": true,
    // "noUnusedLocals": true,
    // "noUnusedParameters": true,
    // "noFallthroughCasesInSwitch": true,
    // "noPropertyAccessFromIndexSignature": true,

    // Recommended Options
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
  }
}

```



- 让tsc动态观察，当文件发生变化的时候，翻译ts

```
tsc   --watch   或者   tsc -w
```