TypeScript:给你不一样的js编写体验(初探ts)

TypeScript:给你不一样的js编写体验(初探ts)_第1张图片
2020都到了,还不准备入手试试TypeScrip嘛!!前端攻城狮下一站拉开初步攻势,走进TypeScript的世界!让我们去看看静态的js语言如何让代码更加的高效和易于维护吧!!


首先,TypeScript是什么?

我们需要先搞清楚TypeScript是什么才可以找到合适的学习方法去学习它。关于TypeScript,它是一个JavaScript的超集,那么既然如此,它就兼容JavaScript的所有的语法,然后在其基础上加上了其独有的内容。除此之外,我们上面说到了,TypeScript是一门静态语言,如果了解Js的人应该都知道,Js是一门动态的语言,它的代码书写更加的灵活,而如我们学的C,C++,Java这样的则是属于静态语言,它的定义都需要指定相应的类型进行说明,虽然显得较为麻烦,但是对于开发而言,却是有它的优势的。那么这里我们说我们的TypeScript也是一门静态的语言,那么它就会满足静态语言的所有的特性。所以,这里就要说明一下,在看此套博客前,你需要先具备Js的基础语法,以及一定的静态语言的基础.
(在TypeScript的世界里,我们让JavaScript的代码编写展现出Java代码编写的感觉!!)


我们应该如何编写TypeScrip的代码呢?

TypeScript是JavaScript的超集,那么它最后也就是会运行在浏览器上的,但是如果我们直接放到浏览器上运行,它肯定是会报错的,因为浏览器压根就不认识Ts的代码。所以,我们在编写完Ts的代码后,我们就现需要先对Ts的代码进行编译,编译成Js的代码后浏览器才能够正常的运行。如果之前有看过我写的webpack打包TypeScrip的那篇文章的可能这里就已经想到了一个方法,就是使用webpack为我们打包编译Ts的代码为Js的代码,但是如果我们仅仅只是写一些比较简单的逻辑,那么每次都去配置webpack的打包环境确实也很麻烦,那有没有简单的方式帮助我们既能够实现ts的编译,又能够提高Ts的开发效率呢?答案当然是肯定的咯,那么我们今天就来说说如何配置一个Ts的开发环境吧!!

  1. 方法一: 使用webpack打包Ts的代码,也就是我们上面说到的那个方式
  2. 方法二: 安装typescript,使用typeScript帮助我们打包:
// 安装:
npm install typescript -g
//使用:
tsc + ts文件路径

如果我们编写的是Node的代码,那么我们还可以装一个ts-node的模块,帮助我们直接以node运行ts文件:

// 安装
npm install ts-node -g
// 使用: 
ts-node + ts文件路径
  1. 方式三: 使用parcel打包编译ts代码: parcel其实和webpack一样,也是对ts代码进行编译打包,但是它比起webpack使用起来更加的方便,它节省了很多的webpack的配置,我们只需要下载后直接使用即可:
//安装: 
npm install parcel -D
// 使用:
parcel + 编译的入口文件(可以是js文件,ts文件,html文件)

大家可以根据以上的三种方式选择一种进行配置自己的Ts开发环境,配置好后,我们便可以开始我们的TypeScript代码的开发了。


上面我们说到了,ts是一种静态的语言,所以我们在ts里定义变量就不能够像js里面直接进行定义了,我们需要为我们的定义的每一个变量指定它的类型,指定类型后,给它赋值就必须要满足它的类型要求,就和静态语言一样,例:

const str: string = "abcd"   //指定了str为字符串类型
const num: number = 20       // 指定num为数值类型
const undef: undefined = undefined   //指定了undef为undefined类型
// .....

如上所示,我们在定义的变量后使用 : ,在冒号后指定变量的类型。以上的方式,在Ts中叫做类型的注解,就是我们直接指定变量的类型,同时在ts中也有类型推断的机制,当我们未明确指定类型时,ts会自动根据我们的赋值的类型判断改变量的类型,同样,我们再次赋值时也是不可以改变其类型的, 如:

const name = "zhangsan"

这里我们没有明确的指定name变量的类型,但是ts自动根据我们赋值的"zhangsan"判断name变量是一个字符串类型,之后我们再为name赋值时,就只能够赋值为string类型。


关于Ts变量我们就说这么多,今天TypeScript初探也就到这里了,我们简单说了下Ts是什么,如何配置一个Ts开发环境,以及Ts中的变量定义,内容很简单,但还是希望大家能够简单的了解一下Ts的基础入门,之后我们再说Ts中各种各样不同于Js的语法!!大家 加油!!!

你可能感兴趣的:(TypeScript)