TypeScript 创建第一个TypeScript文件

最新推荐文章于 2024-08-02 16:55:49 发布
最新推荐文章于 2024-08-02 16:55:49 发布
阅读量828 收藏
点赞数
分类专栏： 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 3096
建立一个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 1785
 此处我参照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 170
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声明文件
最新发布
shiming8879的博客
08-02 1032
TypeScript声明文件是一种包含TypeScript类型信息的.d.ts文件，它允许开发者为已存在的JavaScript代码提供类型注解。这些文件不包含可执行代码，只包含类型信息，因此它们可以被TypeScript编译器用于类型检查和代码智能提示。
创建typescript项目
jatter的技术博客
05-01 1614
#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》电子pdf版
05-05
- **基本示例**: 创建一个 `.ts` 文件，例如 `hello.ts`。 - **简单代码**: 在文件中写入 `console.log("Hello, TypeScript!");`。 - **编译**: 使用命令 `tsc hello.ts` 将其编译为 JavaScript。 - **运行**: 运行...
创建我的第一个TypeScript文件
Liuyibei119的博客
08-19 143
一、安装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-file-uploader：TypeScript，带有文件上传器组件的React实现。 演示可在https：youtu.bege9IOvJVKWE获得
02-15
运行项目的步骤 要在本地运行该项目，请将此项目克隆到您的计算机上，并使用命令行在项目目录中运行以下命令。 yarn install yarn start 以开发模式运行该应用程序。 打开在浏览器中查看。 部署版本 访问此链接 什么是FileUploader？ <FileUploader>是可重用和可自定义的文件上载和放置区组件API。 该组件的实现是使用React TypeScript编写的。 以下是可以传递给组件的可选道具。 interface FileUploaderProps { dragDropText ?: string ; dragDropImage ?: string ; previewTextLabel ?: string ; showCompressionRate ?: boolean ; compressionTextLabel ?: st
一个初始项目使创建一个TypeScript库非常容易
08-10
一个初始项目，使创建一个TypeScript库非常容易
玩转 Typescript(全本)
05-25
TypeScript从今天数以百万计的JavaScript开发者所熟悉的语法和语义开始。使用现有的JavaScript代码，包括流行的JavaScript库，并从JavaScript代码中调用TypeScript代码。 TypeScript可以编译出纯净、 简洁的JavaScript代码，并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。
三分钟带你搭建第一个TypeScript环境
weixin_42397937的博客
04-06 361
TypeScript逐渐成为前端工程师必备的技能之一，本文将指导你如何搭建TypeScript环境。
typescript读写文件
热门推荐
wulong710的专栏
07-31 1万+
读写文件需要用到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声明文件(五) - 示例
weixin_33971205的博客
11-09 108
2019独角兽企业重金招聘Python工程师标准>>> ...
TypeScript的三种声明文件、@types、.d.ts、declare、interface、type（超详细）
qq_51904231的博客
11-13 4754
我们可能在 TypeScript 项目中使用一些全局变量，这些变量没有通过模块导入的方式引入，而是直接通过 `标签引入的脚本文件。这些脚本文件可能会扩展全局命名空间，例如在浏览器环境中的 `window` 对象上添加新的属性或方法。为了让 TypeScript 编译器正确地理解这些全局变量，并提供类型检查和代码提示，我们需要编写相应的全局变量声明文件（通常命名为 `.d.ts`）
精通TypeScript第二版：从基础到高级
1. **TypeScript工具和框架选项**：介绍了一系列用于TypeScript开发的工具和框架，包括TypeScript编译器、强类型系统以及与JavaScript的交互方式。此外，还讨论了DefinitelyTyped库，它是TypeScript社区维护的类型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值