新建一个ts 项目

已于 2023-07-07 10:30:10 修改
阅读量907 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： typescript javascript
于 2023-07-06 09:38:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wbskb/article/details/131568344
文章介绍了如何使用TypeScript，微软的开源编程语言，来创建项目。通过全局安装typescript包，搭建自动编译环境，使用Vite创建Vue3+TS项目，并提到了在VSCode中下载相关插件以辅助编码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

typescript是 微软 公司开源的编程语言， type是 类型的意思，表示在js的基础之上提供了强类型 支持。

新建一个ts 项目

全局安装 typescript 包（编译引擎）-> 注册 tsc 命令

npm install -g typescript

搭建自动编译环境

npm create vite@latest ts-pro -- --template vanilla-ts

代码：

let num:number = 123
let num2:number = 456

console.log(num,num2)

Vue3+TS 创建一个新项目

使用vite创建项目，并选择带ts的版本

npm create vite@latest my-vue-ts-app -- --template vue-ts

下载 vscode插件 （提示写代码的时的文本）

 

--

偷光
关注
如何创建一个vite+vue3+ts项目（小白必看）
蜗牛~~
06-15 2686
当修改代码时，HMR 能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的。（2）写好页面之后，我们来创建路由，在 src 路径下新建 router/index.ts。
VS Code中TypeScript项目的创建与运行
m0_62153576的博客
11-18 993
在现代前端开发中，TypeScript因其强类型特性和对JavaScript的超集支持，越来越受到开发者的青睐。Visual Studio Code（VS Code）作为一个功能强大的代码编辑器，提供了对TypeScript的内置支持，使得开发者可以更加便捷地进行TypeScript项目的开发。本文将详细介绍如何在VS Code中创建和运行一个TypeScript项目。
ts项目的创建以及ts基础
wythhhhh的博客
08-17 739
for...in... 一般用来遍历对象，遍历的是key，且key为string，对于单数组对应的key便是数组的下标
搭建ts项目
FormAda的博客
09-03 1390
创建项目 创建文件夹，复制以下文件： package.json: { "name": "03", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production", "start": "webpack serve --open chr
创建TypeScript项目
最新发布
ysq1314147的博客
06-04 417
执行命令：tsc --init，按下回车键，生成tsconfig.json文件。打开tsconfig.json ，将：rootDir和outDir的注释放开, 修改如下所示。在终端里执行命令：npm init -y ，生成package.json文件。方式二：watch模式，就是通过监听你修改了ts文件，自动后台编译，特点就是快。3.3查看dist文件夹里来自test.ts文件编译生成的test.js文件。3.2添加好build之后，开始编译test.ts文件（F5运行查看）src文件夹用于存放ts文件。
TS_开发一个项目
分享程序相关知识
06-28 2847
使用 typescript +webpack 开发一个简单前端项目。
TypeScript - 笔记(1) - 创建基本的ts项目
King Saj
02-07 2054
创建基本的ts项目 新建test 文件夹,创建index.html, min.ts文件 终端使用 tsc min.ts 命令,将.ts文件,转换为.js 文件 点击vscode终端管理器 // 创建 package.json 文件 npm init 安装 lite-server 轻量级的仅适用于开发 的 node 服务器， 它仅支持 web app, 它能够为你打开浏览器, 当你的html或是JavaScript文件变化时，它会识别到并自动帮你刷新浏览器, 还能使用套接字自动注入变化的CS
ts项目搭建
Acitylion的博客
06-04 1555
1.项目初始化 npm init -y 2.下载配置文件 npm i -D webpack webpack-cli typescript ts-loader html-webpack-plugin webpack-dev-server clean-webpack-plugin @babel/core @babel/preset-env babel-loader core-js 3.创建一个webpack.config.js //引入 const path = require('path'); /.
VS Code搭建Ts环境
Aprilyang42的博客
02-24 4017
VS Code搭建ts环境并创建项目进行编译测试
vue3+vite+ts+pinia新建项目（略详细版）
chu_geng的博客
01-11 1794
使用 vue3+vite+ts+pinia 从头搭建项目
【NodeJs】轻松构建一个纯ts项目-tsground
热门推荐
专注Rust编程与技术分享，涵盖C++、Python等开发实战，新手友好，专注实战，助力编程成长。
11-18 1万+
本文灵感来源于此前的一篇文章【NodeJs】从头到尾构建一个Typescript项目,由于构建一个TS项目要经过许多步骤，比如创建项目，添加依赖，写配置文件，除此以外还要各种调试，而眼下又没找到个合适的脚手架来生成一个项目，这就导致比如我想测试某一段ts代码或者想要写个小demo就是花费很多功夫，因此就自己做一个cli来生成这种项目，替代这些前期配置的步骤，如果再有需要自定义的需求直接再生成的项目上修改就好了，tsground就这么诞生了。
create-ts-project：创建TypeScript monorepo项目，并配置项目参考，jest，eslint和ptiertier，并准备进行开发
02-05
创建TypeScript项目 创建打字稿项目生成使用项目准备就绪的开发monorepo，（V2），， 和。 生成的回购包含脚本，以帮助管理回购中软件包之间的依赖性。 它包括针对每个推送或PR上的lint / test / build的GitHub Action，将模块发布到NPM以及将NodeJS应用打包在Docker映像中。 简短的版本：类似于Create React App for TypeScript monorepos，具有（可选）持续集成，包发布和基于Docker的部署也可以立即使用。 如果您有疑问或某些事情“不起作用”，请随时。 您可以在Twitter 上找到我。 内容 在
【TS入门笔记6---快速创建ts项目】
weixin_46218101的博客
04-29 544
【TS入门笔记6---快速创建ts项目】
创建vue3+ts项目
qq_48783694的博客
03-12 5901
在开发项目的时候，经常会用到svg矢量图，使用svg矢量图之后，页面上加载的不再是图片资源，很大的提升了页面性能，svg文件比img小很多，在项目中机会不占资源。安装依赖：https://www.npmjs.com/package/vite-plugin-mock。官网地址：https://element-plus.gitee.io/zh-CN/API接口统一管理：创建src/api/use/index.ts以及type.ts。官网：https://stylelint.bootcss.com/
ts项目构建
weixin_54986082的博客
04-22 1041
通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。
搭建一个简单的ts小工程
HzjCsdn的博客
01-04 1469
使用 browserify source tsify 整合ts代码 流程就是写ts代码，使用browserify source tsify整合为一个js文件，再用html启动这个js文件，就是这么easy gulpfile.js var gulp = require("gulp"); var browserify = require("browserify"); var source = require('vinyl-source-stream'); var tsify = require("tsify")
搭建一个Vue3+Ts项目
weixin_45594156的博客
12-08 3602
Vite+Vue3+Ts+sass+Router+pinia+axios,Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
快速创建vue-ts项目基本结构
m0_56409834的博客
06-13 717
【代码】快速创建vue-ts项目基本结构。
通过vite从0-1搭建一个vue-ts项目
阿琰a_的博客
04-22 1871
vite是目前比较主流的前端构建工具，能够提高前端开发体验，所以这里的构建工具选择了vite。
新建一个vue3 ts项目
03-25
### 使用 Vue CLI 或 Vite 创建 Vue 3 和 TypeScript 新项目 #### 方法一：通过 Vue CLI 创建 Vue 3 + TypeScript 项目 可以使用 Vue CLI 来快速搭建一个支持 Vue 3 和 TypeScript 的开发环境。以下是具体实现方式： 全局安装 Vue CLI 工具： ```bash npm install -g @vue/cli ``` 创建一个新的 Vue 2 或 Vue 3 项目时，可以通过交互式命令行界面选择所需的选项[^1]。对于 Vue 3 项目，在初始化过程中需明确指定版本并启用 TypeScript 支持。 运行以下命令来启动项目创建流程： ```bash vue create my-vue3-typescript-app ``` 在交互界面上，当被询问到 **Vue version** 时，请选择 `Manually select features` 并勾选 Vue 3 和 TypeScript 功能模块。这一步骤确保最终生成的项目基于最新框架特性构建，并具备完整的类型定义文件支持。 --- #### 方法二：利用 Vite 构建工具设置 Vue 3 + TypeScript 环境 另一种更现代化的方法是采用 Vite 替代传统 Webpack 打包方案来进行高效开发体验优化。下面介绍如何借助 Vite 初始化带有 TypeScript 配置的新 Vue 3 应用程序实例: 执行如下脚本以开始建立过程: ```bash npm init vite@latest my-vue3-typescript-app --template vue-ts ``` 上述操作将引导开发者完成一系列参数设定工作流，其中包括但不限于模板种类挑选环节——这里特别指定了针对 Vue 技术栈且内置了 TypeScript 支持的基础样板结构作为蓝本[^4]。 一旦基础目录树成功生成完毕之后，则需要进入目标文件夹位置继续后续依赖项加载动作: ```bash cd my-vue3-typescript-app npm install ``` 最后为了验证整个环境是否正常运作起来，可尝试启动本地服务器查看效果: ```bash npm run dev ``` 与此同时，如果希望进一步自定义路径别名比如把 'src' 映射成 '@', 参考样例代码展示部分即可得知相应调整措施[^2]: ```javascript import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import path from "path"; const pathSrc = path.resolve(__dirname, "src"); export default defineConfig({ plugins: [vue()], resolve: { alias: { "@": pathSrc, }, }, }); ``` 以上就是分别运用两种不同技术手段达成相同目的即设立兼容 Vue 3 版本同时还融合了强类型语言特性的前端工程项目全过程说明文档内容摘要总结描述形式呈现给读者朋友们参考学习之用！ ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值