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


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

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

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

基础应用

  1. 工具包的安装
npm i typescript [-g]

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

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

  1. 执行命令脚本,编译文件
tsc [*.ts];

文件被编译成 js 文件

  1. 执行文件
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";

此时可以正常解析

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三知之灵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值