[Typescript]基础篇之安装与使用

Typescript 文件的最终归宿是归于 javascript,使用 Typescript 开发方便静态类型检查，方便应用级别的开发，结构更加清晰，因此推荐使用 Typescript 开发

因为 Typescript 文件的最终归宿是归于 javascript 的，因此需要使用工具将.ts 文件转化为.js 文件

使用 typescript 工具包，可以实现文件的转化，通过工具包的命令，将 ts 文件编译为 js 文件

基础应用

1. 工具包的安装

npm i typescript [-g]

可以全局安装 typescript，那么可以在任意位置执行该包的命令；安装完成后，可以在设置的全局安装目录下找到该工具包的命令脚本；

可以只在当前项目安装该工具包，那么该包的命令也只应用于当前项目；安装完成后，可以在当前项目 node_modules 目录下的.bin 文件中找到该工具包的命令脚本；

2. 执行命令脚本,编译文件

tsc [*.ts];

文件被编译成 js 文件

3. 执行文件

node [.js]

项目应用

直接执行 ts 问题

如果项目使用 ts 开发，那么难道要把每个文件 tsc 编译么？然后在用 node 执行 js 文件？这个肯定是不现实的

那么 node 是否可以直接运行 ts 文件呢？
这是不可以的，node 是一个 javascript 运行时环境，因此仅可以执行 js 文件

如果想要直接运行 ts 文件，可以使用 ts-node 插件

npm i ts-node -D

仅开发阶段需要，因此安装在 devDependencies 中，是开发依赖

安装 typescript,安装方法请查看基础应用部分

初始化 typescript 的配置文件tsconfig.json

初始化命令

tsc --init

然后添加包的类型声明，因为 typescript 具有类型检查
例如@types/express,如果使用了 node 的内部模块，例如 path 等，也要添加 node 的类型声明@types/node

在 package.json 中 script 脚本添加运行 ts 文件命令

"ts-node ./server/bin/index.ts";

报错

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for D:\projectName\index.ts
    at new NodeError (node:internal/errors:372:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
    at defaultLoad (node:internal/modules/esm/load:21:20)
    at ESMLoader.load (node:internal/modules/esm/loader:407:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:326:22)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:345:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:304:34)
    at async Promise.all (index 0) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

无法识别的后缀类型，找到解决方案说是使用以下命令运行 ts 文件：

"node --loader ts-node/esm ./server/bin/index.ts";

出现新的错误，ts 加载 ts 问题

ts 文件 a.ts 引入 b.ts ,import 时，如果写后缀.ts，静态检查报错，不允许写扩展名

但是不写扩展名，运行的时候会报错

Can't find module xxxx/xxx/xxxx,没有添加 ts 后缀导致找不到文件，也就是在 ts 文件中加载 ts 文件时无法正确解析 ts 文件的后缀

临时方案：

// @ts-ignore
import b from "../utils/b.ts";

此时可以正常解析