专业的编程技术博客社区

网站首页 > 博客文章 正文

第一个 TypeScript 程序（typescript then）

baijin 2024-10-17 07:55:20 博客文章 11 ℃ 0 评论

学习任何一门技术， 需要做的两个步骤就是。 一是安装该基础环境， 二是编写一个 Hello World! 然后可以给别人说你精通了 TypeScript 的拼写了。


在线运行代码

前端开发越来越趋向于所见即所得。所以除了本地安装使用之外， 官方也提供了在线的学习运行环境。叫做演练场：

地址为：https://www.typescriptlang.org/zh/play

编写我们第一个 TypeScript 程序

点击“运行”查看效果

再来个复杂点的：

代码如下：

class Hello{
    name: string;
    constructor(name: string){
        this.name = name;
    }

    sayHi(){
        return "Hello, Welcome to "  + this.name;
    }
}
let hello = new Hello("苗子说全栈");

console.log(hello.sayHi());

点击 “运行” 查看效果：


我们第一个 Say Hello 的程序就完成了。面向过程和面向对象的开发方式。在线编辑可以快速的验证自己的小例子。 然后直接在官方提供的虚拟容器中运行。

本地编写代码

但是实际开发中也需要本地进行开发。接下来说说本地运行的方式。

现在开发前端必备的基础环境就是 Node.js ，关于Node.js 的配置， 可以参考我的另外的文档。保姆级的介绍了 Mac, Windows， Linux 的安装。在各种编程语言的安装路上越走越远。


Node.js 环境

查看当前 Node.js 环境， 我这里使用的是最新的 LTS 版本。 如下：


而 TypeScript 直接使用 npm 进行安装。

npm 的安装语法为：

npm install -g   // 全局安装
npm install	   //当前项目安装

这里使用全局安装的方式：

npm install -g typescript

当安装完成后， 可以使用 tsc --version 检测版本号来查看是否安装成功。

至此， 我们安装好了 TypeScript 编程语言。接下来我们来执行我们的 Hello World！


新建 hello-world.ts

TypeScript 的源文件后缀名是 “.ts”。

并把第一个代码写到文件中。

然后使用 tsc 编译系统

tsc hello-world.ts

编译成功之后， 会生成一个 hello-world.js 的文件。 兼容版本 ES5。

使用 node hello-world.js 使用 node 运行。打开命令行， 执行：

node hello-world.js
Hello, 欢迎来到 苗子说全栈的频道！

也可以把这个文件直接放到页面中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>typescript 入门</title>
</head>
<body>
    <script src="hello-world.js"></script>
</body>
</html>

运行查看控制台：


以上就是本地进行编译的并使用的过程。当然还有更加详细的使用方式， 后续慢慢来说。这章就以 Hello World 开始，然后结束。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表