TypeScript第一个程序HelloWorld

已于 2023-04-28 08:04:08 修改
阅读量2.4k 收藏 15
点赞数 6
分类专栏： Vue3 文章标签： typescript javascript 前端
于 2023-04-28 07:46:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57756904/article/details/130383784
版权

博主作品：《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis-plus+MySQL+Vue等前后端分离项目，可以在左边的分类专栏找到更多项目。《Uniapp项目案例》有几个有uniapp教程，企业实战开发。《微服务实战》专栏是本人的实战经验总结，《Spring家族及微服务系列》专注Spring、SpringMVC、SpringBoot、SpringCloud系列、Nacos等源码解读、热门面试题、架构设计等。除此之外还有不少文章等你来细细品味，更多惊喜等着你哦

🍅开源Vue3项目免费哦：点击这里克隆或者下载  ，点击star(star越多维护动力越多)   🍅

目录

一、安装你的TypeScript

二、编写第一个TypeScript文件

三、编译代码

四、运行TypeScript Web应用

💖Vue项目

一、安装你的TypeScript

有两种主要的方式来获取TypeScript工具：

  • 通过npm（Node.js包管理器）
  • 安装Visual Studio的TypeScript插件

Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。 如果你的Visual Studio还没有安装TypeScript，你可以下载它。

针对使用npm的用户：

npm install -g typescript

学过、用过Vue的都比较熟悉了吧，没学过的就要安装下node.js

二、编写第一个TypeScript文件

在idea项目根目录下新建typescript文件，你也可以在其他编辑器，如官方推荐的VSCode等。

下面是笔者新建的hello.ts文件

文件内容如下： 

function hello(str) {
  return str
}

let user = 'HelloWord'

console.log(hello(user))

三、编译代码

我们使用了.ts扩展名，但是这段代码仅仅是JavaScript而已。 你可以直接从现有的JavaScript应用里复制/粘贴这段代码。

在控制台，运行TypeScript编译器：

输出结果为一个hello.js文件，它包含了和输入文件中相同的JavsScript代码。 一切准备就绪，我们可以运行这个使用TypeScript写的JavaScript应用了！

四、运行TypeScript Web应用

同样在idea根目录下创建hello.html

<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="hello.js"></script>
</body>
</html>

注意是hello.js

在浏览器里打开hello.html运行这个应用！

笔者用的idea，看你安装了哪些浏览器，笔者有谷歌浏览器，于是点击谷歌浏览器。

点击F12，查看控制台

可见它输出了"HelloWorld" 

可选地：在Visual Studio里打开hello.ts或者把代码复制到TypeScript playground。 将鼠标悬停在标识符上查看它们的类型。 注意在某些情况下它们的类型可以被自动地推断出来。 重新输入一下最后一行代码，看一下自动补全列表和参数列表，它们会根据DOM元素类型而变化。 将光标放在hello函数上，点击F12可以跟踪到它的定义。 还有一点，你可以右键点击标识，使用重构功能来重命名。

💖Vue项目

✨一波三折，CeaM Vue3开源来袭

✨基于Java+SpringBoot+Vue前后端分离求职招聘管理系统设计与实现(有视频讲解)

✨基于Java+SpringBoot+Vue+Uniapp(有教程)前后端分离健身预约系统设计与实现

✨基于Java+SpringBoot+Vue+Uniapp前后端分离商城系统设计与实现

✨基于Java+SpringBoot+Vue+uniapp前后端分离图书阅读系统设计与实现

✨基于Java+SpringBoot+Vue前后端分离学生管理系统设计与实现(有视频讲解)

✨基于Java+SpringBoot+Vue前后端分离驾校管理系统设计与实现(有视频讲解)

✨基于Java+SpringBoot+Vue前后端分离图书借阅系统设计与实现(有视频讲解)

✨基于Java+SpringBoot+Vue前后端分离旅游度假系统设计与实现(有视频讲解)

✨基于Java+SpringBoot+Vue前后端分离农产品物流系统设计与实现(有视频讲解)

卡布奇诺-海晨
关注
  • 6
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
TypeScript 快速入门之基础语法（一篇文章精通系列）（我的第一个TS程序【一】）【WebStorm版本】案例源代码
08-31
**创建第一个TypeScript程序** 在WebStorm中，新建一个TypeScript文件，如`index.ts`。这是一个简单的“Hello, World!”程序： ```typescript console.log("Hello, World!"); ``` 保存后，WebStorm会自动编译成...
浅谈——typescript与JavaScript的区别
热门推荐
weixin_41962385的博客
04-12 1万+
TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言。 JavaScript 是轻量级的解释性脚本语言，可嵌入到 HTML 页面中，在浏览器端执行。而TypeScript 是JavaScript 的超集，即包含JavaScript 的所有元素，能运行JavaScript 的代码，并扩展了JavaScript 的语法。相比于JavaScript ，它还增加了静态类型...
【TypeScript教程】03—如何使用 TypeScript 编写" Hello World "程序
web前端开发
03-28 712
英文 | https://www.javascripttutorial.net翻译 | 杨小爱在今天的教程中，我们将学习如何使用 TypeScript 编写第一个“Hello World”程序。node.js 中的 TypeScript Hello World 程序首先，创建一个新文件夹来存储代码，例如，helloworld。其次，启动 VS Code 并打开该文件夹...
TypeScript基础篇 - TS的Helloworld和环境配置
qq_35729091的博客
07-17 524
Node环境的typescript解释执行器 REPL（Read eval print loop）【读取 解析执行 打印 循环】【人机交互模型】 tsconfig.json(演示) tsconfig.json Typescript的配置文件 放到项目根目录 详细参数见：TypeScript: TSConfig Reference - Docs on every TSConfig option input/output参数 小节总结 总结一
typescript入门之helloworld
计算机图形学
07-30 205
typescript纯手工编写入门。
Intellij idea设置支持TypeScript
java-boy的博客
06-26 1万+
1、查看本地是否安装typeScripttsc -version如果没有显示版本，则证明没有安装typeScript2、安装typeScriptnpm install -g typescript注意，需要先安装nodejs3、打开idea，依次找到如下界面点击Edit,设置路径：C:\Users\xxx\AppData\Roaming\npm\node_modules\typescript\lib...
hello-world-react-native
03-30
2. **环境配置**：安装Node.js、npm（Node包管理器）和React Native CLI（命令行工具）是开始"hello-world-react-native"项目的第一步。还需要配置Android Studio或Xcode开发环境，以便在对应的平台上运行和调试应用...
angular2-hello-world:我在Angular 2.0中的第一个问候世界
05-11
我在Angular 2.0中的第一个问候世界。 设置 1. npm install安装依赖项。 2. tsc编译TypeScript文件。 3. live-server以启动Web服务器并启动应用程序。 免责声明 截至2015年8月16日，TypeScript ES6编译器仍处于beta...
stencil-title:只是测试我的第一个组件
04-02
本文将深入探讨"只是测试我的第一个组件"这个主题，以及与TypeScript相关的知识点。 首先，让我们了解StencilJS。Stencil是一个由 Ionic 团队开发的工具，它结合了编译器的最佳特性，如AOT（Ahead-of-Time）编译和...
angular2.0-demo:基于angular2.0的helloworld
05-30
在"angular2.0-demo"项目中，可能会有一个名为`HelloWorldComponent`的组件，它负责显示“Hello, World!”文本。 2. **模块（Module）**：在Angular 2.0中，应用由一个或多个模块组成，每个模块都有自己的功能和...
10个必备的IntelliJ IDEA插件，提高开发效率
yue_stack的博客
08-23 246
只需按 “ctrl+;安装链接：https://plugins.jetbrains.com/plugin/14515-code-issue-manager-document--fix-issues-in-your-codebase。WakaTime 是一个能够根据你的编程活动，自动生成各种数据的工具，可以让你看到在编码过程中的指标、见解和时间跟踪，从而评估你的编码效率。你可以准确地知道编码所花费的时间，因为此插件会自动记录你输入的起止时间以及各种细节，如项目、文件、分支、提交/PR、功能等。
idea中运行typescript
pgLi
05-07 3347
1、安装Run Configuration for TypeScript插件 2、安装ts-node，并配置tsconfig.json npm i ts-node -D // tsconfig.json { "ts-node": { "compilerOptions": { "module": "commonjs" } }, "compilerOptions": { ... } } ..
idea调试ts
in_the_road的博客
03-13 1501
3、安装ts依赖包（可以用于打印console）2、全局安装ts-node。1、安装IDEA插件。
typescript环境安装及IDEA配置typescript
千里之行，始于足下！
01-10 8304
一、typescript环境安装 1、安装node、npm 下载官网安装包： http://nodejs.cn/download/， 双击运行 2、安装完node、npm后，查看是否安装成功 node -v npm -v 3、安装typescript npm install -g typescript 4、安装后查看typescript是否安装成功 tsc -version 或者 ts...
【记录】IntelliJ IDEA实用的插件
小确幸的博客
11-05 4306
对于常用的 IDE 工具，也有必要掌握使用的一些插件，用以提升我们的效率。本着这种想法，把自己使用的和了解的 IDEA 插件做下整理。
开始编写属于你的第一个Typescript的程序吧~
wangweiscsdn的博客
09-06 284
开始学习Typescript 吧~
环境搭建 HelloWorld（ts版本问题解决方案）
xuniwawa010的专栏
07-07 601
一、下载layabox 官网https://www.layabox.com/ 首页上有两个，一个Engine，一个IDE Engine我下载的TS版本，解压后，就是一个库 IDE则是绿色版的，下载无需安装即可使用。我下载的当前最新版本1.7.19.1 beta 对于使用TS开发人员，只需下载IDE即可。 二、新建一个项目 任意新建一个UI示例项目，提示版本不匹配。由于之前安装vscode导致，查看论坛解答 cmd命令行输入tsc -v打印查...
IDEA安装和使用教程,idea 安装本地插件
aifans_bert的博客
09-14 1488
第三，跨平台的能力，uni-app能够跨多个终端，H5，安卓，Ios，微信小程序，百度小程序，头条小程序，支付宝小程序，真正实现了一套代码，多端运行，而且很好适应了我国的市场。为什么会选择它呢，第一，vue语法，学习成本低，上手速度快，只要之前你做过vue的项目，那么就能很快上手，其实是vue和微信小程序的结合体，一半vue，一半微信小程序。2，低端机跑程序的话，如果内容复杂了，会比较卡，我们在测试直播连麦的时候，有些操作反复做，比如连麦挂断，在低端机会闪退，究其原因我也不清楚是怎么回事。
TypeScript 入门 搭建环境 构建自己的第一个TypeScript 案例
weixin_45966674的博客
04-05 1166
打开项目目录 在终端输入 npm i typescript -g 然后创建一个ts文件 我这里叫 index.ts 和我同名可以解决很多问题哦 然后 我们在index.ts中输入代码如下 function DomConst(){ let Dom: String = '我的第一个TS案例'; console.log(Dom); } DomConst(); 然后在终端输入 tsc index.ts 有时候这个指令会出问题这个问题比较奇葩 我不知道你们会不会遇到 如果出问题了那就输入 n
typescript 编写一个异步执行的程序
最新发布
09-07
在 TypeScript 中，你可以使用 `async` 和 `await` 关键字来编写异步执行的程序。 下面是一个简单的例子，展示了如何使用 `async` 和 `await` 来等待一个异步函数的执行： ```typescript async function fetchData(): Promise<string> { const response = await fetch('http://example.com/data'); return await response.text(); } async function main() { const data = await fetchData(); console.log(data); } main(); ``` 在这个例子中，`fetchData` 函数使用 `await` 来等待 `fetch` 函数的执行，然后使用 `await` 来等待 `response.text()` 的执行。这个函数最终返回一个字符串类型的 `Promise`。 然后，在 `main` 函数中，我们调用 `fetchData` 函数，并使用 `await` 来等待返回的 `Promise` 的解决。最后，我们在控制台中输出返回的数据。 请注意，在使用 `async` 和 `await` 的函数中，你必须在函数前面添加 `async` 关键字，并且在使用 `await` 的行前面添加 `await` 关键字。 希望这个例子能够帮助你开始使用 `async` 和 `await` 在 TypeScript 中编写异步执行的程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

卡布奇诺-海晨

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

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

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

打赏作者

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

抵扣说明：

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

余额充值