前端结合Typescript进行快速开发
2023-09-27 14:29:19 时间
这里介绍的是不使用任何的前端框架,保持初心,最简单的做法。以下总结,使用工具Visual Studio Code。
第一步:创建一个package.json文件。这个可以通过 npm init命令来完成。
第二步:创建一个tsconfig.json文件。这个用来定义typescript的编译选项。关键的一个设置如下,就是typeRoots这个设置。
第三步:在根目录下创建一个typings目录,并创建一个index.d.ts文件。在这个文件中,引用其他的d.ts文件。例如
/// <reference path="../node_modules/@microsoft/teams-js/dist/MicrosoftTeams.d.ts" />
这些d.ts文件,可以通过 npm install 命令来安装标准的npm包得到。例如,如果我安装了microsoftTeams的客户端JS SDK(npm install @microsoft/teams-js ),就会有如下的文件。
第四步:编写你的业务应用的前端代码逻辑,使用ts文件。例如
在这里写代码时有完整的智能提示。非常舒服。
第五步:运行 tsc 命令生成 js文件,并且在html文件中直接应用这些js文件,例如
相关文章
- TypeScript算法题实战——链表篇(链表的设计、反转、两两交换、删除、相交和环形链表)
- TypeScript中typeof的简单介绍
- TypeScript 类型增强declare的使用
- typeScript类型别名
- typeScript基础(6)_数组类型
- [TypeScript]webpack打包ts代码
- [TypeScript]编译配置
- TypeScript学习笔记(四):函数
- 前端vue3+typescript搭建vite项目(初识vite+项目配置完善+屏幕适配)
- React接入Typescript
- vue + typescript 项目起手式
- 利用TypeScript构建优雅的React Native项目
- 对微信小程序的生命周期进行扩展 – Typescript 篇