TypeScript 之 Hello World！

已于 2022-11-20 13:21:22 修改
阅读量1.4k 收藏 1
点赞数
分类专栏： # TypeScript 文章标签： typescript javascript 前端
于 2022-11-20 00:13:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sxzlc/article/details/127943714
版权

目录

■TypeScript 与 JavaScript比较

■TypeScript 相比于JavaScript 的优点

■安装前提

■安装

npm命令安装 【npm install -g typescript】

安装完了（查看安装的版本【tsc -v】）

■Hello World 

代码（编写 TS 文件）

编译（运行 TypeScript 编译器【tsc xxx.ts】，生存js文件 ）

编译后JS文件与，编译源TS文件的差异。

运行（通过 Node.js 运行这段代码【node  xxx.js】）

效果（控制台输出相应内容 ：Hello，World）

■安装出错

Log位置

错误信息 【error network 'proxy' config is set properly】

■更多资料

■TypeScript 与 JavaScript比较

JavaScript 是轻量级的解释性脚本语言，可嵌入到 HTML 页面中，在浏览器端执行。而TypeScript 是JavaScript 的超集，即包含JavaScript 的所有元素，能运行JavaScript 的代码，并扩展了JavaScript 的语法。相比于JavaScript ，它还增加了静态类型、类、模块、接口和类型注解方面的功能，更易于大项目的开发。
 

■TypeScript 相比于JavaScript 的优点

1.便于开发人员做注释。
2.能帮助开发人员检测出错误并修改。
3.TypeScript工具使重构更变的容易、快捷。
4.TypeScript 引入了 JavaScript 中没有的“类”概念。
5.TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。
6.类型安全功能能在编码期间检测错误，这为开发人员创建了一个更高效的编码和调试过程。

■安装前提

安装node.js环境

Node.js之Hello World_sun0322的博客-CSDN博客

■安装

npm命令安装 【npm install -g typescript】

使用node.js的npm命令安装 （下面命令要用管理员权限运行！！！）

npm install -g typescript

（安装过程中出错，重新指定镜像源后，再次尝试安装，安装成功！！！）  

npm config set registry http://registry.npm.taobao.org/

安装完了（查看安装的版本【tsc -v】）

tsc -V

===

■Hello World 

代码（编写 TS 文件）

G:\MyTypeScript\helloworld.ts

function greeter (person) {
  return 'Hello, ' + person
}

let user = 'World'

console.log(greeter(user))

greet   英 [ɡriːt]  v. 问候，迎接，招呼；称呼；接受；呈现在...前

编译（运行 TypeScript 编译器【tsc xxx.ts】，生存js文件 ）

tsc helloworld.ts

编译后JS文件与，编译源TS文件的差异。

（ts中，结尾的【;】可以写，也可以不写）

 

===

运行（通过 Node.js 运行这段代码【node  xxx.js】）

node helloworld.js

效果（控制台输出相应内容 ：Hello，World）

G:\MyTypeScript>node helloworld.js
Hello, World

 ===

■安装出错

Log位置

C:\Users\YourUserName\AppData\Local\npm-cache\_logs\

错误信息 【error network 'proxy' config is set properly】


49 silly reify }
50 timing reify:retireShallow Completed in 14ms
51 timing reify:createSparse Completed in 12ms
52 timing reify:loadBundles Completed in 1ms
53 silly audit bulk request { typescript: [ '4.9.3' ] }
54 silly tarball no local data for typescript@https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz. Extracting by manifest.
55 http fetch POST 200 https://registry.npmjs.org/-/npm/v1/security/advisories/bulk 7321ms
56 timing auditReport:getReport Completed in 7324ms
57 silly audit report {}
58 timing auditReport:init Completed in 0ms
59 timing reify:audit Completed in 7326ms
60 verbose stack Error: Socket timeout
60 verbose stack     at TLSSocket.onTimeout (G:\Program Files\nodejs\node_modules\npm\node_modules\agentkeepalive\lib\agent.js:346:23)
60 verbose stack     at TLSSocket.emit (node:events:525:35)
60 verbose stack     at TLSSocket.Socket._onTimeout (node:net:550:8)
60 verbose stack     at listOnTimeout (node:internal/timers:559:17)
60 verbose stack     at processTimers (node:internal/timers:502:7)
61 verbose cwd G:\
62 verbose Windows_NT 10.0.19045
63 verbose node v16.18.0
64 verbose npm  v8.19.2
65 error code ERR_SOCKET_TIMEOUT
66 error network Socket timeout
67 error network This is a problem related to network connectivity.
67 error network In most cases you are behind a proxy or have bad network settings.
67 error network
67 error network If you are behind a proxy, please make sure that the
67 error network 'proxy' config is set properly.  See: 'npm help config'
68 verbose exit 1
69 timing npm Completed in 1463915ms
70 verbose unfinished npm timer command:install 1668871218592
71 verbose unfinished npm timer reify 1668871218601
72 verbose unfinished npm timer reify:unpack 1668871218934
73 verbose unfinished npm timer reifyNode:node_modules/typescript 1668871218935
74 verbose unfinished npm timer reify:rollback:createSparse 1668872681884
75 verbose code 1

尝试重新指定镜像源

npm install 报错 ERR! network ‘proxy‘ config is set properly. See: ‘npm help config‘_Tine自由的博客-CSDN博客

# 淘宝源（推荐）
$ npm config set registry http://registry.npm.taobao.org/
 
# 官方源
$ npm config set registry http://registry.npmjs.org/
$ npm config set registry https://registry.npmjs.org/
 
# cnpm 源
$ npm config set registry https://registry.cnpmjs.org/
# 如果使用 cnpm，注意是否安装了 cnpm，cnpm 走推荐走的也是淘宝源
$ npm install -g cnpm --registry=https://registry.npm.taobao.org/

■更多资料

Vue3+TypeScript？看这一篇就够了_淮城一只猫的博客-CSDN博客_vue3+typescript

===

sun0322
关注
专栏目录
TypeScript入门基础(一)——第一个程序hello world
weixin_43298884的博客
04-05 208
文章目录概述：第一个typescript程序 概述： TypeScript 程序由以下几个部分组成： 模块 函数 变量 语句和表达式 注释 第一个typescript程序 文件名：01_hellotest.ts const helloTest : string = "hello world !!!!" console.log(helloTest) 以上代码，在程序控制台中，输出“hello world !!!” 我使用的开发环境是VScode；有使用相同开发工具的小伙伴，遇到问题，可以私信我。 效果如
TypeScript 基础语法
weixin_41886169的博客
11-20 139
TypeScript 程序由以下几个部分组成： 模块 函数 变量 语句和表达式 注释 第一个 TypeScript 程序 我们可以使用以下 TypeScript 程序来输出 “Hello World” ： Runoob.ts 文件代码： const hello : string = "Hello World!" console.log(hello) 以上代码首先通过 tsc 命令编译： tsc Runoob.ts 得到如下 js 代码： Runoob.js 文件代码： var hello = "Hell
TypeScript之HelloWorld
Riven的博客
10-15 815
TypeScript 全局安装ts 在安装前需要先装node npm install typescript -g 终端输入 tsc 出现如下提示 即安装成功 然后在文件夹创建一个demo1.ts文件 ts之HelloWorld function jump(){ let web:string = "Hello world"; console.log(web); } // ts-node jump(); 将此文件在终端打开 运行 tsc demo1.ts 会发现生成了一个对应
浅谈——typescript与JavaScript的区别
热门推荐
weixin_41962385的博客
04-12 1万+
TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言。 JavaScript 是轻量级的解释性脚本语言，可嵌入到 HTML 页面中，在浏览器端执行。而TypeScript 是JavaScript 的超集，即包含JavaScript 的所有元素，能运行JavaScript 的代码，并扩展了JavaScript 的语法。相比于JavaScript ，它还增加了静态类型...
TypeScript Helloworld
星之空
08-29 731
TypeScript配置入门实例。 1. Install TypeScript npm install -g typescript tsc --version tsc --help 2. Helloworld 2.1 New test.ts class Startup { public static main(): number { let...
TypeScript第一个程序HelloWorld
qq_57756904的博客
04-28 2458
我们使用了.ts扩展名，但是这段代码仅仅是JavaScript而已。 你可以直接从现有的JavaScript应用里复制/粘贴这段代码。 在控制台，运行TypeScript编译器
TypeScript 快速 Hello World !
LACERBA
06-03 828
相关环境配置 代码编写及执行
angular-typescript-hello-world:带有单元测试的简单 AngularJS-TypeScript hello world 应用程序
06-13
角度打字稿你好世界 带有单元测试的简单 AngularJS-TypeScript hello world 应用程序。 要安装必要的依赖项，只需下载然后导航到 package.json，启动 cmd 或终端并执行以下命令： npm install
ts-graphql-hello-world：TypeScript Lambda GraphQL Hello World示例
02-18
TypeScript Lambda GraphQL Hello World示例 带TypeScript的简单GraphQL Lambda函数示例。 GraphQL由apollo-server-lambda驱动。 使用Query返回问候世界。 它将为发布提供终点，也为操场提供终点。 工具 纱 无服务器...
【TypeScript教程】03—如何使用 TypeScript 编写" Hello World "程序
web前端开发
03-28 738
英文 | https://www.javascripttutorial.net翻译 | 杨小爱在今天的教程中，我们将学习如何使用 TypeScript 编写第一个“Hello World”程序。node.js 中的 TypeScript Hello World 程序首先，创建一个新文件夹来存储代码，例如，helloworld。其次，启动 VS Code 并打开该文件夹...
一步一步学习TypeScript(01.Hello_World)
weiqi的博客
12-08 1525
新建一个文件夹helloworld. 在vs code中打开. 新建一个app.ts文件 class Startup { public static main(): number { console.log('Hello World'); return 0; } hello(){ console.log('Hello');
typescript hello world
weixin_34284188的博客
02-08 121
2019独角兽企业重金招聘Python工程师标准>>> ...
typescript入门之helloworld
软考鸭
07-30 225
typescript纯手工编写入门。
TypeScript - (一) 搭建TypeScript环境，运行第一个"Hello World" TypeScript程序
Cr的博客
08-01 1741
简介: TypeScript是由微软C#首席架构师开发的一款JavaScript超集的编程语言，写好的TypeScript文件可以编译成可执行的JavaScript文件。 个人对TypeScript的理解: 1.JavaScript的强类型，超集。 2.写法基本与后端写法一样。 3.模块化模式开发，面向对象编程模式。 提示: 进行以下操作前，请确保正确安装了node环境。 1. 安...
TypeScript入门01:hello_world
11-22 338
typescript学习
Kotlin专题「十五」：泛型
https://juejin.cn/user/1654096907477549/posts
09-09 454
前言：彪悍的人生，不需要解释，只要你按时达到目的地，很少有人在乎你开的是奔驰还是拖拉机。 一、概述   在 Java 中，其实所谓的泛型就是类型的参数化。如果方法有入参，那么这些入参面前往往会有类型，这个类型就是修饰参数所用。假如我们在创建类型的时候，也为其指定了参数，这个参数又是个类型，这种我们就称为泛型。 本篇中会涉及到 Java 的泛型以及PECS法则，有不了解的先看看[<font color="2E98F5">Java 中的泛型以及PECS法则（协变和逆变）](https
浅学TypeScript（2）——HelloWorld
衡与墨的博客
12-05 472
安装 首先需要先安装node环境，如果之前没装过，搜索一下node官网，选择适合你电脑的版本下载并安装即可。 安装ts的指令： npm install -g typescript 安装很快，几秒钟时间就能结束： 此时最新版本是3.72 IDE支持 常用的IDE有VS code、sublime text、web storm等，我比较习惯用idea，给idea加上一些插件后，它拿来开发别的语言也是很...
TypeScript基础篇 - TS的Helloworld和环境配置
最新发布
qq_35729091的博客
07-17 655
Node环境的typescript解释执行器 REPL（Read eval print loop）【读取 解析执行 打印 循环】【人机交互模型】 tsconfig.json(演示) tsconfig.json Typescript的配置文件 放到项目根目录 详细参数见：TypeScript: TSConfig Reference - Docs on every TSConfig option input/output参数 小节总结 总结一
如何使用 TypeScript 编写“ Hello World “程序
m0_61643133的博客
11-03 315
请注意，app.js 是 app.ts 文件的输出文件，因此，我们不应直接更改此文件中的代码，否则一旦重新编译 app.ts 文件，我们将丢失所做的更改。在今天的教程中，我们学习了如何在 TypeScript 中创建第一个名为 Hello, World!TypeScript 编译器会生成一个新的 app.js 文件，Live Server 会自动在 Web 浏览器上重新加载它。首先，创建一个新文件夹来存储代码，例如，helloworld。要进行更改，我们需要编辑 app.ts 文件。
请用所有编程语言输出hello world
03-31
Python: ``` print("Hello, World!") ``` Java: ``` public class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); } } ``` C++: ``` #include <iostream> using namespace std; int main() { cout << "Hello, World!"; return 0; } ``` C: ``` #include <stdio.h> int main() { printf("Hello, World!"); return 0; } ``` JavaScript: ``` console.log("Hello, World!"); ``` PHP: ``` <?php echo "Hello, World!"; ?> ``` Swift: ``` print("Hello, World!") ``` Ruby: ``` puts "Hello, World!" ``` Go: ``` package main import "fmt" func main() { fmt.Println("Hello, World!") } ``` Perl: ``` print "Hello, World!\n"; ``` R: ``` cat("Hello, World!") ``` Scala: ``` object HelloWorld { def main(args: Array[String]): Unit = { println("Hello, World!") } } ``` Kotlin: ``` fun main() { println("Hello, World!") } ``` Lua: ``` print("Hello, World!") ``` Objective-C: ``` #import <Foundation/Foundation.h> int main() { NSLog(@"Hello, World!"); return 0; } ``` C#: ``` using System; public class HelloWorld { public static void Main(string[] args) { Console.WriteLine("Hello, World!"); } } ``` VB.NET: ``` Module HelloWorld Sub Main() Console.WriteLine("Hello, World!") End Sub End Module ``` SQL: ``` SELECT 'Hello, World!' ``` BASH: ``` echo "Hello, World!" ``` PowerShell: ``` Write-Host "Hello, World!" ``` Batch: ``` @echo off echo Hello, World! ``` Haskell: ``` main = putStrLn "Hello, World!" ``` Rust: ``` fn main() { println!("Hello, World!"); } ``` Dart: ``` void main() { print('Hello, World!'); } ``` Elixir: ``` IO.puts "Hello, World!" ``` Scala: ``` object HelloWorld { def main(args: Array[String]): Unit = { println("Hello, World!") } } ``` Julia: ``` println("Hello, World!") ``` TypeScript: ``` console.log("Hello, World!"); ``` CoffeeScript: ``` console.log "Hello, World!" ``` Pascal: ``` program HelloWorld; begin writeln('Hello, World!'); end. ``` Fortran: ``` program hello print *, "Hello, World!" end program hello ``` Lisp: ``` (print "Hello, World!") ``` F#: ``` [<EntryPoint>] let main argv = printfn "Hello, World!" 0 // return an integer exit code ``` Ada: ``` with Ada.Text_IO; use Ada.Text_IO; procedure Hello is begin Put_Line ("Hello, World!"); end Hello; ``` Racket: ``` #lang racket (displayln "Hello, World!") ``` Clojure: ``` (println "Hello, World!") ``` OCaml: ``` print_endline "Hello, World!" ``` Smalltalk: ``` Transcript show: 'Hello, World!'. ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值