TypeScript 创建第一个TypeScript文件

最新推荐文章于 2024-08-20 17:07:22 发布
最新推荐文章于 2024-08-20 17:07:22 发布
阅读量848 收藏
点赞数
分类专栏： TypeScript 文章标签： typescript javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ivenqin/article/details/113503322
版权
本文介绍了如何创建和运行第一个TypeScript文件。从理解.ts后缀名开始，通过VSCode创建.ts文件，编写简单代码，然后使用tsc编译成.js文件。编译选项如--watch、--outFile等也被提及，帮助开发者了解TypeScript的基本工作流程。
摘要由CSDN通过智能技术生成

上一节我们已经做好了准备工作，那么本节我们开始在 Visual Studio Code 中创建第一个 TypeScript 文件，并学习如何运行这个文件。

TypeScript 文件后缀名

在创建文件之前，我们来讲一下后缀名， TypeScript 中的文件都是以 .ts 为后缀名的，这和 JavaScript 文件是不同的，JavaScript 是以 .js 为后缀名，所以在这点上我们千万不要弄错哟。

创建一个 TypeScript 文件

首先可以在电脑指定路径创建一个文件夹，例如我创建一个名为 DemoXKD 的文件夹。接着打开 VSCode 软件，在 VSCode 中选择“文件(F) --> 打开文件夹”，然后选择 DemoXKD 文件夹。

如下图所示：

成功打开文件夹后可以显示如下，我们可以点击图标来选择创建文件或文件夹等：

点击创建文件，给文件命名为 test.ts，在文件中写入如下 TypeScri

最低0.47元/天 解锁文章
建立一个typescript工程
wulong710的专栏
11-30 3129
建立一个typescript工程，不要太复杂。 1.安装node.js 自己下载安装 2.打开命令行运行 $ node -v v8.12.0 $ npm install npm -g $ npm -v 6.4.1 andrew@DESKTOP-1CLR4DJ /cygdrive/e/study/ts/test_four $ npm -g install typescript $...
windows下用npm创建第一个typescript的 ant design项目
找个地方……
03-22 1801
 此处我参照https://ant.design/docs/react/use-in-typescript-cn使用npm创建一个ant design项目请保证安装安成npm, 此处不描述npm的安装安装create-react-app：npm install -g create-react-app创建基于typepscript的react项目， 项目名取为antd-demo-ts:create-...
第一个Typescript程序
wanggang_512的博客
08-20 179
Typescript入门 在开始使用 TypeScript 前你最好有以下准备： Node.js > 8.0，最好是最新的稳定版（目前是V10.16.3 ） 一个包管理工具 npm 或者 yarn 一个文本编辑器或者 IDE (笔者的是 vscode) 相关的 shell 命令仅适用于 linux系统，windows 系统不适用 安装 TypeScript TypeScript 的安装很简单，你可以通过npm直接在全局安装 TypeScript。 npm install -g typescr
TypeScript学习笔记（三）——TypeScript 类型声明文件
最新发布
weixin_56370772的博客
08-20 966
今天几乎所有的 JavaScript 应用都会引入许多第三方库来完成任务需求。这些第三方库不管是否是用 TS 编写的，最终都要编译成 JS 代码，才能发布给开发者使用。我们知道是 TS 提供了类型，才有了代码提示和类型保护等机制。但在项目开发中使用第三方库时，你会发现它们几乎都有相应的 TS 类型，这些类型是怎么来的呢？类型声明文件类型声明文件用来为已存在的 JS 库提供类型信息。这样在 TS 项目中使用这些库时，就像用 TS 一样，都会有代码提示、类型保护等机制了。
创建typescript项目
jatter的技术博客
05-01 1631
#cd 一个目录 npm init #初始化 npm install typescript --save-dev   #创建目录结构  projectRoot ├── src │   ├── file1.js │   └── file2.js ├── built └── tsconfig.json   #配置文件tsconfig.json {     "compil...
使用SpringBoot + Vue3 + TypeScript做的一个博客系统源码.zip
05-28
这是一个基于Spring Boot后端框架和Vue3前端框架，结合TypeScript语言实现的博客系统的源码。这个项目展示了如何将这三种技术有效地集成在一起，构建一个完整的Web应用。 **Spring Boot** 是一个由Pivotal团队提供...
typescript-bot:我的第一个打字稿机器人和第一个打字稿编码经验
03-13
在本文中，我们将深入探讨如何使用TypeScript创建一个名为"typescript-bot"的项目，这是许多开发者初涉TypeScript编码的典型实例。TypeScript是一种由微软开发的强类型、静态类型的编程语言，它扩展了JavaScript的...
创建我的第一个TypeScript文件
Liuyibei119的博客
08-19 156
一、安装node.js 二、初始化第一个TS项目 1.在cmd中依次输入如下 //创建文件夹并进入 mkdir first-ts-project && cd first-ts-project //初始化package.json文件 npm init -y //安装最新稳定版 npm install --save-dev typescript //安装最新版本（选择一个版本就可以了） npm install --save-dev typescript@next a>方法一 1
《TypeScript》电子pdf版
05-05
- **基本示例**: 创建一个 `.ts` 文件，例如 `hello.ts`。 - **简单代码**: 在文件中写入 `console.log("Hello, TypeScript!");`。 - **编译**: 使用命令 `tsc hello.ts` 将其编译为 JavaScript。 - **运行**: 运行...
三分钟带你搭建第一个TypeScript环境
weixin_42397937的博客
04-06 382
TypeScript逐渐成为前端工程师必备的技能之一，本文将指导你如何搭建TypeScript环境。
typescript读写文件
热门推荐
wulong710的专栏
07-31 2万+
读写文件需要用到fs-extra和path模块 安装读写文件对应模块 $ npm install fs-extra -S npm WARN saveError ENOENT: no such file or directory, open 'E:\study\ts\package.json' npm notice created a lockfile as package-lock.json...
TypeScript声明文件
shiming8879的博客
08-02 1100
TypeScript声明文件是一种包含TypeScript类型信息的.d.ts文件，它允许开发者为已存在的JavaScript代码提供类型注解。这些文件不包含可执行代码，只包含类型信息，因此它们可以被TypeScript编译器用于类型检查和代码智能提示。
TypeScript 声明文件（Declaration Files）
m0_70066267的博客
08-03 1438
TypeScript 声明文件是一种特殊的文件，它仅包含类型声明，不包含实现代码。这些文件告诉 TypeScript 编译器关于某个库或模块中类型的信息，而不需要编译器查看库的源代码。这对于那些没有提供原生 TypeScript 支持的 JavaScript 库尤为重要。对于流行的 JavaScript 库，社区可能已经创建了类型定义文件，并发布到了像 DefinitelyTyped 这样的类型定义库中。你可以通过 npm 安装这些类型定义文件，而无需自己编写。当你安装了一个包含@types。
如何创建高质量的TypeScript声明文件(五) - 示例
weixin_33971205的博客
11-09 113
2019独角兽企业重金招聘Python工程师标准>>> ...
my-typescript-library：我的第一个打字稿库，模板
02-24
"my-typescript-library"这个项目标题表明，它是一个基于TypeScript创建的库模板，用于帮助开发者快速搭建自己的TypeScript库。 首先，我们来详细了解一下TypeScript中的关键概念： 1. **类型系统**：TypeScript的...
TypeScript的三种声明文件、@types、.d.ts、declare、interface、type（超详细）
qq_51904231的博客
11-13 5103
我们可能在 TypeScript 项目中使用一些全局变量，这些变量没有通过模块导入的方式引入，而是直接通过 `标签引入的脚本文件。这些脚本文件可能会扩展全局命名空间，例如在浏览器环境中的 `window` 对象上添加新的属性或方法。为了让 TypeScript 编译器正确地理解这些全局变量，并提供类型检查和代码提示，我们需要编写相应的全局变量声明文件（通常命名为 `.d.ts`）
TypeScript 入门 搭建环境 构建自己的第一个TypeScript 案例
weixin_45966674的博客
04-05 1193
打开项目目录 在终端输入 npm i typescript -g 然后创建一个ts文件 我这里叫 index.ts 和我同名可以解决很多问题哦 然后 我们在index.ts中输入代码如下 function DomConst(){ let Dom: String = '我的第一个TS案例'; console.log(Dom); } DomConst(); 然后在终端输入 tsc index.ts 有时候这个指令会出问题这个问题比较奇葩 我不知道你们会不会遇到 如果出问题了那就输入 n
从0到1构建TypeScript项目以及初学TypeScript（day01）
weixin_45506970的博客
09-05 674
从0到1构建typescript项目静态强类型语言与动态弱类型语言构建TypeScript项目体验typescript配置typescript将index.ts中字符串插入到页面中构建生产环境的脚本typescript的数据类型类型注解回到工程中typescript枚举类型typescript重要概念：接口对象类型接口函数类型接口 静态强类型语言与动态弱类型语言 静态强类型语言 对类型极度严格 及时发现错误 运行时性能好 自文档化 动态弱类型语言 对类型非常放松 Bug发现不及时（可单元测试发现）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值