❤ 就这？TypeScript其实并不难！（上）（建议收藏）❤

2022-05-23 280

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： ❤ 就这？TypeScript其实并不难！（建议收藏）❤

正文

一、什么是 TypeScript？

TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript的语法。

TypeScript是属于编程语言，静态类型和面向对象。

TypeScript遵循最新的ES6、ES5规范，它扩展了JS的语法。

TypeScript可以让JS开发大型企业应用，即适用于大型应用或多人协作

最新的Vue、React也可以集成TypeScript

谷歌也在大力支持TypeScript的推广，谷歌的angular2.x就是基于TypeScript语法

二、TS和JS的对比

TS是应用程序

TS是JS超集 (less sass---->css) (ts---->js)

跨平台 + 开源

开始于JS,终止于JS

重用JS，甚至可以引入js流行的库 echats

TypeScript 有类接口模块

三、TypeScript小课堂

注意：安装TypeScript环境之前要安装node环境

01 TypeScript开发环境的构建

安装node，安装完之后在cmd查询 node npm版本号

显示版本号则说明安装成功

在终端输入

npm install typescript -g

安装成功之后输入如下命令，查看版本号

tsc --version

在终端输入如下命令进行初始化

npm init -y

成功之后会出现package.json文件。-y表示默认

package.json不需要修改什么，因为我们接下来主要是学习语法

接下来输入如下命令，会生成tsconfig.json文件。

tsc --init

这个文件是我们写ts文件之后如何编译成为js文件的一个配置文件

接下来我们在终端输入以下命令

npm install @types/node --dev-save

它是在我们的开发环境中使用的，它主要解决的是模块的声明文件问题

安装成功之后就可以查找其版本号啦

02 开启我们的helloWorld.ts

以上的准备工作弄好之后，我们就可以开始学习我们的ts啦

新建一个文件helloWorld.ts，就开始在里面写我们的ts代码啦

// ts支持强类型，所以我们声明一个变量a可以给它加上类型
var a:string = "HelloWorld"  
console.log(a)

那下一步是什么呢？

就是我们的ts文件要转成js文件

在终端那里选择运行生成文件，选择tsc：构建-tsconfig.json这个选项

注意

路径里面最好不要有中文路径

如果遇到以下报错信息，可以使用管理员身份运行 PowerShell，然后输入 set-executionpolicy remotesigned，然后选择yes

这样就成功解决这个问题啦，我们继续往下学

构建成功之后它会自动生成一个js文件,它是严格模式，是在tsconfig.json配置的

有了这个文件，我们就可以在我们的终端输入以下命令运行文件

node helloWorld.js

可以发现被成功打印出来了~

03 TS变量类型那些事

下面我们抽取一些类型来实践一下吧

undefined

我们新建一个文件（demo003.ts）开始我们的测试

var age:number  
console.log(age)

和上面说的一样，在终端那里选择运行生成文件，选择tsc：构建-tsconfig.json这个选项来生成我们的demo003.js文件

然后我们运行我们的文件

或者在终端输入以下命令行，实现自动构建

npm tac watch

我们会发现输出了undefined

这个时候如果我们给age赋值，运行之后就会显示出来啦。

var age:number = 18;

number

我们的number不仅支持整数，还支持浮点型数字

var age:number = 18;  
var height:number = 165;  
console.log(age)  
console.log(height)

NaN(No a Number)

var age:number = NaN  
var height:number =  165;  
console.log(age)  
console.log(height)

string

单引号和双引号都是可以的

var hls:string =  "hls喜欢 迈克杰克逊"  
console.log(hls)  
console.log('-------------') 
var cola:string =  'cola也 喜欢 迈克杰克逊'  
console.log(cola)

boolean

(ts中布尔值只有true和false两个)

(0和null在ts中不表示false了)

var b:boolean = true    
var c:boolean = false   
console.log(b)  
console.log('-------------')  
console.log(c)

enum 枚举类型

枚举类型 enum 比如：人有男人，女人，中性四季有春夏秋冬

enum REN{man,woman,neutral}  
console.log(REN.man)

这里打印出来的是下标，第一个是0（也就是说从零开始）

如果我们要打印出来内容，应该怎么操作呢？

console.log('-------------')   
enum REN{man='男人',woman='女人',neutral='妖'}  
console.log(REN.man) 
用等于赋值过去即可（注意这里要用=）

any 万能类型

它能够存放任意类型，并且成功输出

var t:any =10  
t=true   
t='hls'  
console.log('-------------')  
console.log(t)

ts和js不同：ts需要声明我们的变量类型

04 Ts函数

函数定义：

把功能相近的需求封装成一个独立的代码块

然后每次传入不同的变量

变量不同，所以呈现的结果就不同

function searchXiaoJieJie(age:number):string {  
  return '找到了'+age +'岁的小姐姐'  
}
var age:number = 18;  
var result:string=searchXiaoJieJie(age)  
console.log(result)

在这里我们只需要手动改变age的值就可以了

要注意的地方

必须用function这个关键字来定义一个函数

函数名与变量名是一样的(都需要遵循加类型的规则)

函数的参数可有可无

如果参数有多个，用逗号隔开

形参(形式上的参数)和实参(真实传递的参数)

可选参数的函数

function searchXiaoJie Jie(age:number,status?:string):string {  
  let yy:string=''  
  yy='找到了'+age+'岁'  
  if(status!=undefined){  
    yy = yy +status   
  }
  return yy+'的小姐姐'  
}
var result:string=searchXiaoJieJie(22,'大长腿')  
console.log(result)

有默认参数的函数

function searchXiaoJieJie(age:number=18,status:string='小蛮腰'):string {  
  let yy:string=''  
  yy='找到了'+age+'岁'  
  if(status!=undefined){  
    yy = yy +status  
  }
  return yy+'的小姐姐'  
} 
var result:string=searchXiaoJieJie()  
console.log(result)

如果手动设置传入也是可以的

var result:string=searchXiaoJieJie(22,'大长腿') 
console.log(result)

当我们的需求是不确定的，我们可以这样写

function searchXiaoJieJie(...xuqiu:string[]):string {  
  let yy:string='找到了'  
  for(let i=0;i<xuqiu.length-1;i++) {  
    yy = yy +xuqiu[i]   
    if(i<xuqiu.length){  
      yy = yy + '、'  
    }
  }
  yy=yy+'的小姐姐'  
  return yy   
} 
var result:string=searchXiaoJieJie('22岁','大长腿','瓜子脸','小蛮腰')  
console.log(result)

05 函数的三种定义方式

函数声明法(常用)

function add(n1:number,n2:number):number{   
  return n1+n2   
} 
console.log(add(1,2))

函数表达式法

先声明一个变量，把这个函数赋值给变量

这个变量就是函数名

通过变量名就可以调用这个函数

注意：定义之后要调用，否则会报错

var add = function(n1:num ber,n 2:number):number{  
  return n1+n2  
}
console.log(add(1,3))

箭头函数完全支持ES6

利于回调

函数都是有作用域的

var add=(n1:number,n2:number):number=>{   
  return n1+n2 //this   
}
console.log(add(3,5)

❤ 就这？TypeScript其实并不难！（上）（建议收藏）❤

正文

一、什么是 TypeScript？

二、TS和JS的对比

三、TypeScript小课堂

01 TypeScript开发环境的构建

02 开启我们的helloWorld.ts

03 TS变量类型那些事

04 Ts函数

05 函数的三种定义方式

热门文章

最新文章

相关课程

相关电子书

相关实验场景