# typescript-study

**Repository Path**: fujishu/typescript-study

## Basic Information

- **Project Name**: typescript-study
- **Description**: TypeScript学习
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-01-11
- **Last Updated**: 2023-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TypeScript

TypeScript 是微软开发的一个开源的编程语言，通过在 JavaScript 的基础上添加静态类型定义构建而成。

TypeScript 通过 TypeScript 编译器（tsc）或 Babel 转译为 JavaScript 代码，可运行在任何浏览器，任何操作系统。

TypeScript 给 JavaScript 带来了编译时的类型系统，便于代码阅读、类型检查、携同开发。

[TypeScript 官网](https://www.typescriptlang.org/zh/)

[TypeScript 中文网](https://www.tslang.cn/index.html)

[TypeScript 菜鸟教程](https://www.runoob.com/typescript/ts-tutorial.html)

## TypeScript 安装

### npm 全局安装

```shell
npm install -g typescript
```

查看本机 TypeScript 版本

```shell
npm view typescript version
```

查看 TypeScript 所有可以使用的版本

```shell
npm view typescript versions
```

查看 tsc 版本

```shell
tsc --version
```

更新 TypeScript 版本

```shell
npm install typescript@latest -g
```

### node 环境中执行 ts 文件

安装 node 的 ts 环境支持：

```shell
npm i @types/node --save-dev
```

安装执行命令：

```shell
npm i ts-node -g
```

查看 ts-node 版本：

```shell
ts-node -v
```

用 ts-node 执行 ts 文件：

```shell
ts-node example.ts
```

## TS配置文件

### 概述

tscongfig.json文件：可以直接写注释、是ts编译器的配置文件。

如果一个目录下存在一个`tsconfig.json`文件，那么它意味着这个目录是TypeScript项目的根目录。

 `tsconfig.json`文件中指定了用来编译这个项目的根文件和编译选项。

### 使用tsconfig.json

- 不带任何输入文件的情况下调用`tsc`，编译器会从当前目录开始去查找`tsconfig.json`文件，逐级向上搜索父目录。
- 不带任何输入文件的情况下调用`tsc`，且使用命令行参数`--project`（或`-p`）指定一个包含`tsconfig.json`文件的目录。

当命令行上指定了输入文件时，`tsconfig.json`文件会被忽略。

```shell
tsc test.ts
```

### 常用配置选项

| 配置             | 说明                                                      |
| ---------------- | --------------------------------------------------------- |
| noImplicitAny    | 禁止使用隐含的 any 类型，如函数参数没有设置具体类型       |
| strictNullChecks | 开启时不否允许将 null、undefined 赋值给其他类型比如字符串 |
| target           | 转换成 JS 的版本                                          |
| strict           | 是否严格模式执行                                          |
| module           | 使用的模块系统                                            |

## webpack 项目配置

TypeScript 在 webpack 中的集成：

### 安装 ts-loader

（或者[awesome-typescript-loader](https://www.npmjs.com/package/awesome-typescript-loader)）

```shell
npm install ts-loader --save-dev
```

### 配置 webpack.config.js

```js
module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
  },
  resolve: {
    // Add '.ts' and '.tsx' as a resolvable extension.
    extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
  },
  module: {
    loaders: [
      // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
      { test: /\.tsx?$/, loader: "ts-loader" },
    ],
  },
};
```