0.为什么我要从头开始再学一次TypeScript & 环境搭建

最新推荐文章于 2024-09-11 09:30:52 发布

转载最新推荐文章于 2024-09-11 09:30:52 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cd80448f265da036207c745

文章标签：

#javascript #ViewUI

本文针对TypeScript初学者，深入解析TypeScript的使用场景与设计理念，通过实战案例帮助读者掌握TypeScript的高级特性，同时提供了一个从零开始搭建TypeScript开发环境的详细指南。

我相信有不少小伙伴和我一样,对TypeScript的理解其实很浅.但是项目里用了,于是就拿起来用了,对照着interfce和props去写一些类型,并没有理解里面的深入原因与设计意图,只是单纯的使用-还用不好,碰到稍微复杂的类型就直接any了事.别人说起TypeScript,不敢说自己真正掌握了,只敢说"用过".

于是我决定从新学一遍TypeScript. 一是为了把TypeScript融会贯通-去了一趟FD发现这玩意就没人不会的. 二是为了以后的Go学习打个基础. 三是因为--好久没正儿八经的写文章了,没有从笔记继续输出东西了.我之前以为我博客不会有人看的,结果还真有人看,问我最近怎么不写了.

为什么说是重新学一遍呢?因为如果是刚开始学,我建议先撸一遍官方文档,有一个大概印象,只是对实际使用有比较大的疑惑,再来看我写的这些没什么营养的东西.我也不会讲一些typescript中最基础的概念,那些东西你看文档是最好的.

总之,也许文章写的不怎么样,但是希望能够对你有帮助.

既然你能点开这篇文章,那么我已经不需要向你介绍为什么我们需要TypeScript了.当然,对Ts一知半解的人,比如我,会舔着个脸告诉你有静态检查啊,IDE支持啊什么的,但是实际上这些东西只是一部分,更多的东西,还是在编程思路和严谨性上的转变.那么废话不要再说了,直接进入正题吧.

不同于Js,Ts是需要环境支持的.所以我们得先找个办法方便的运行我们的TypsScript.

如果你只是调试或者临时用用,可以直接使用CodeSandBox来运行TypeScript代码.很容易配置,就不细说了.

如果是项目中的使用,当然还是要依靠npm的.官方文档的方式是

npm install -g typescript

就可以愉快了写代码了.

当然,如果你要集成StoryBook和Sass,也可以直接用我之前集成的一个Template:

github.com/CoderMageFo…

不过这次,我想着不用npm,所以我们试试parcel吧.

在你需要使用的目录里运行:

npm i -g parcel-bundler

然后在你需要的目录下新建一个空白的html.如果你使用的是webstorm,在html输入! 然后按tab就可以了.记得要引入index.ts.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TypeScript</title>
</head>
<body>

</body>
<script src="./index.ts"></script>
</html>
复制代码