[ TypeScript连载-第二期 ] 初识-TypeScript

·  阅读 526
[ TypeScript连载-第二期 ] 初识-TypeScript

海阔凭鱼跃,天高任鸟飞。Hey 你好!我是秦爱德。😄

安装ts

从上篇文章我们知道了ts的由来以及它的优劣势分析,整体来说ts本身还是非常棒哒😜 未来可期 👍

要想使用ts,我们需要执行如下命令:

npm install -g typescript

这样我们就在全局环境下安装 tsc 命令,安装完成之后,我们就可以在任何地方执行 tsc 命令了。

我们约定使用 TypeScript 编写的文件以 .ts 为后缀,ts的优势之一就是增强了编辑器和 IDE 的功能,主流的编辑器都支持 TypeScript,这里推荐使用 Visual Studio Code

最简单的栗子 🌰

新建一个hello.ts文件,并敲下如下几行代码

function hello(person: string) {
    return "Hello, " + person;
}
let user = "秦爱德";
document.body.innerHTML = hello(user);
复制代码

新建一个hello.html文件,并敲下如下几行代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello</title>
</head>
<body>
    <script src="hello.js"></script>
</body>
</html>
复制代码

执行命令

tsc hello.ts

这时候会在同级目录下面生成一个编译好的文件 hello.js

function hello(person) {
    return "Hello, " + person;
}
var user = "秦爱德";
document.body.innerHTML = hello(user);
复制代码

这时候在打开hello.html文件,如愿的、我们在浏览器里看到了打印 “Hello, 秦爱德”

稍微改动一下代码

我们尝试将改动一下hello.ts

function hello(person: string) {
    return "Hello, " + person;
}
let user = ['秦爱德'];
document.body.innerHTML = hello(user);
复制代码

重新编译,会看到这时候产生了一个错误

编译报错

最终还是通过编译,生成了hello.js文件

function hello(person) {
    return "Hello, " + person;
}
var user = ['秦爱德'];
document.body.innerHTML = hello(user);
复制代码

这便是前文提到的TypeScript 具有强大的包容性,即使 TypeScript 编译报错,也可以生成 JavaScript 文件。

好了,到了这个时候,我们便算是完整的使用TypeScript写了一个最简单的栗子🌰

当然,ts的强大远不止此!敬请期待我们接下来的ts学习之旅吧,咱们下期见!🙏

点赞👍再看,已成习惯!该系列持续更新,你们的一键三连就是我持续写作的最大动力,如果对本篇博客有任何意见和建议,欢迎师兄们留言!😜😝

我是秦爱德,一个在互联网夹缝求生的程序员!

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改