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

🎈 作者：​​不吃西红柿​​

---

目录

​​一、什么是 TypeScript？​​

​​二、TS和JS的对比​​

​​三、TypeScript小课堂​​

​​01 TypeScript开发环境的构建​​

​​02 开启我们的helloWorld.ts​​

​​03 TS变量类型那些事​​

​​04 Ts函数​​

​​05 函数的三种定义方式​​

​​06 变量的作用域，函数划分​​

​​07 引用类型的数组​​

​​08 引用类型的字符串​​

​​09 引用类型的日期对象​​

​​10 引用类型的正则表达式​​

​​11 面向对象编程-类的声明和使用​​

​​12 面向对象编程-类的修饰符​​

​​13 面向对象编程-基础和重写​​

​​14 面向对象编程-接口知识​​

​​15 面向对象编程-命名空间​​

---

一、什么是 TypeScript？

• TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript的语法。
• TypeScript是属于编程语言，静态类型和面向对象。
• TypeScript遵循最新的ES6、ES5规范，它扩展了JS的语法。
• TypeScript可以让JS开发大型企业应用，即适用于大型应用 或 多人协作

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

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

二、TS和JS的对比

1. TS是应用程序
2. TS是JS超集 (less sass---->css) (ts---->js)
3. 跨平台 + 开源
4. 开始于JS,终止于JS
5. 重用JS，甚至可以引入js流行的库 ​​echats​​
6. 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)

06 变量的作用域，函数划分

function zhengXing():void{  
  var yangzi:string = '刘亦菲'  
  console.log(yangzi)  
}
zhengXing()  
console.log(yangzi)

以上例子说明了，在函数体内，是封闭的

无论是全局声明，还是什么声明，都只在函数体内起作用

在外部，所以是不起作用的

什么是全局变量？(函数体外声明的变量) 什么是局部变量？(函数体内声明的变量)

var yangzi:string = '刘亦菲'  
function zhengXing():void{  
  console.log('我的女神是'+yangzi)  
}
zhengXing()    
console.log(yangzi)

小坑:重名会发生变量提升 

当重名的时候，内部变量会起作用

var yangzi:string = '刘亦菲'  
function zhengXing():void{  
  var yangzi:string = '黄圣依'  
  console.log('我的女神是'+yangzi)  
}
zhengXing()  
console.log(yangzi)

终端显示结果：

var yangzi:string = '刘亦菲' 
function zhengXing():void{  
  //当在函数体内未声明就使用，会显示undefined 
  console.log('我的女神是'+yangzi) 
  var yangzi:string = '黄圣依' 
  console.log('我的女神是'+yangzi) 
}
zhengXing() 
console.log(yangzi)

其实上面那一段变量提升相当于下面的写法

var yangzi:string = '刘亦菲'  
function zhengXing():voi d{  
  var yangzi:string   
  console.log('我的女神是'+yangzi)  
   yangzi = '黄圣依'  
  console.log('我的女神是'+yangzi)  
}
zhengXing()  
console.log(yangzi)

所以说，为声明之前打印会显示undefined

所以记住第一句打印的是undefined，第二句打印的是函数体内声明的变量

js早期只有局部变量和全局变量

但是比如我们的大众语言，java，c++

她们的变量都是以大括号{}为区域划分的

所以js经常被吐槽说，js不适合大型项目开发

因为很容易引起内存溢出

因为它没有变量作用域

划分只能靠函数来进行，是非常不方便的

所以在我们的ES6，就使用了let

let关键字就可以声明函数的作用域是块级作用域

function zhengXing():void{  
  var yangzia:string="朱茵"  
  {
    let yangzib:string='巩俐'  
    console.log('我的女神是'+yangzib+'吗')  
  }
  console.log('我的女神是'+yangzia+'吗')  
  console.log('我的女神是'+yangzib+'吗')  
}
zhengXing()

我们进行构建时终端会报错错误

但是我们运行文件之后会发现，它还是正常输出了，为什么？

这是一个小坑：为什么会这样？

因为它自动帮我们把let转译成了var

我们在构建编译好的js文件中可以查到

我们尝试在js文件中，把var修改成let

我们会发现会报错，说明我们的块级作用域还是起作用了

07 引用类型的数组

我们之前讲的都是值类型

比如给一个变量赋一个数值型的值

或者说给一个变量赋一个字符串

// 类
let person={ 
  name:'hls',  
  age:'18',  
  skill:'web',  
  saySomething:function(){ 
    console.log('不忘初心，砥砺前行')  
  }
}
console.log(person.name)  
person.saySomething()

数组引用类型----比如：array String Date RegExp

数组的初始化，也就是声明

下面是数组的两种声明方法

let arr1:number[] //数值类型   
let arr2:Array//数组类型变成了布尔类型

下面我们看看数组赋值的两种方式

• 字面量赋值法

let arr1:number[]=[]   
let arr2:number[]=[1,2,3]  

let arr3:Array<string>=['香蕉','橘子','菠萝','草莓']  
let arr4:Array<boolean>=[true,false,false]

• 构造函数赋值法(构造函数:用new来赋值)

let arr1:number[]=new Array()  
let arr2:number[]=new Array(1,2,3)  

let arr3:Array<string>=new Array('香蕉','橘子','菠萝','草莓')  
let arr4:Array<boolean>=new Array(tr ue,false,false)

这两种方法都阔以，都很直观鸭

有一种特殊的数组叫做元组

元组可以在我们的ts中赋值两种类型

在开发中，元祖还是比较少用的，所以此处略

08 引用类型的字符串

基本类型字符串：单引号或双引号字符引起来的字符串

引用类型字符串：用new实例化的String类型字符串

let hls:string = 'hello'  
let cola:String = new String('WO')  
console.log(hls)  
console.log(cola)

小结：用引用类型或者基本类型声明的字符串，属性和方法的用法都是一样的

为什么要有引用类型和基本类型两种类型呢？

其实很早之前只有普通类型

但是我们的前端人员经常操作我们的string类型

那么为了扩展方法，就加了引用类型

下面我来看看数组最基本的属性：length

let hls:string = 'hello'  
let cola:String = new String('WO')  

console.log(hls.length)  
console.log(cola.length)

这个属性经常使用，所以最好记住

1. 查找字符串 indexOf 

let something:string='这类框架主要原理就是将 APP的?部分需要动态变动的内容通过H5来实现'  
let xiaojiejie:string = 'H5'  
console.log(something.indexOf(xiaojiejie))

2. 从后面开始查找字符串 lastIndexOf（查无的话就返回-1）

let something:string='这类框架主要原理就是将APP的?部分需要动态变动的内容通过H5来实现'  
let xiaojiejie:string = 'H'  
console.log(something.lastIndexOf(xiaojiejie))

3. 截取字符串

let something:string='这类框架主要原理就是将APP的?部分需要动态变动的内容通过H5来实现'  
let xiaojiejie:string = 'H'  
console.log(something.substring(8))

let something:string='这类框架主要原理就是将APP的?部分需要动态变动的内容通过H5来实现'  
let xiaojiejie:string = 'H'  
console.log(something.substring(8,4))

4. 替换字符串:replace

let something:string='多学习，多练习，HTML，css，javascript'  
let xiaojiejie:string = 'typecript'  
console.log(something.replace('javascript','typecript'))

09 引用类型的日期对象

• 不传递任何参数

let d:Date = new Date()  
console.log(d)

• 传递一个整数

let d1:Date = new Date(1000)//1970-01-01 00:00:00  
let d2:Date = new Date(2000)//1970-01-01 00:00:00  
console.log(d1)  
console.log(d2)

• 传递一个字符串

let d1:Date = new Date('2020/02/27 14:57:00')  
let d2:Date = new Date('2020-02-27 14:57:00')  
let d3:Date = new Date('2020-02-27T14:57:00')  
console.log(d1)  
console.log(d2)  
console.log(d3)

  

还有更多语法如下，几乎和js是一样的，不赘述

let d:Date = new Date('year','month','day','hour','minute','second','microsecond')

10 引用类型的正则表达式

RegExp 和字符串很像

• 构造函数声明法

let reg1:RegExp=new RegExp("helloworld")  
console.log(reg1)  
let reg2:RegExp=new RegExp("helloworld",'gi')  
console.log(reg2)

• 字面量声明

let reg11:RegExp=/helloworld/  
console.log(reg11)  
let reg22:RegExp=/helloworld/gi  
console.log(reg22)

正则表达式常用的两个方法

// test(string)  
let reg1:RegExp=/helloworld/i  
let website:string='helloworld.com'  
let result1:boolean=reg1.test(website)  
console.log(result1)  

//exec(string)   
let reg1:RegExp=/helloworld/i  
let website:string='helloworld.com'  
// let result1:boolean=reg1.test(website)  
console.log(reg1.exec(website))

11 面向对象编程-类的声明和使用

要学会使用类，才能new出对象来

类是对象具体事物的一个抽象

对象是类的具体表现

类的出现-增加代码复用性和维护性

一系列类的使用，都叫做面向对象编程

ts就是基于类的面向对象编程语言

如何声明类？大驼峰命名法

class XiaoJieJie{ 
  name:string 
  age:number 
  constructor(name:string,age:number){ 
    this.name=name; 
    this.age=age 
  }
  say(){ 
    console.log('小哥哥好') 
  }
}
let jiejie:XiaoJieJie=new XiaoJieJie('HLS',18) 
console.log(jiejie) 
jiejie.say()

12 面向对象编程-类的修饰符

• public 共有的
• protected
• private

class XiaoJieJie{ 
  public sex:string 
  protected name:string 
  private age:number 
  public constructor(sex:string,name:string,age:number){ 
    this.sex = sex 
    this.name = name 
    this.age = age 
  }
  public sayHello(){
    console.log('小哥哥')  
  }
  protected sayLove(){  
    console.log('我爱你') 
  } 
}
var jiejie:XiaoJieJie=new XiaoJieJie('女','亦舒',22) 
console.log(jiejie.sex) 
// console.log(jiejie.name) 
// console.log(jiejie.age) 
jiejie.sayHello() 
// jiejie.sayLove()

注意私有的是不能访问的，VSCode会直接提示你

只读修饰符 readonly 不能改

• 只读属性必须在声明属性时就直接给它赋值，不要给空，它会报错

class Man{ 
  public readonly sex:String='男' 
}
var man:Man=new Man() 
//不能改,改的话会报错
man.sex='女'

13 面向对象编程-基础和重写

类必须有扩展能力

继承：允许我们创建一个类(子类)，从已有的类(父亲)上继承所有的属性和方法，子类可以新建父类中没有的属性和方法

父类：

class Hls{ 
  public name:string 
  public age:number 
  public skill:string 
  constructor(name:string,age:number,skill:string){ 
    this.name = name 
    this.age =age 
    this.skill =skill 
  }
  public interest(){ 
    console.log('听歌')
  }
}
let hlsObj:Hls = new Hls('离散',18,'coding') 
hlsObj.interest()

子类继承：

ts不支持多重继承

class Cola extends Hls{ 
    public xingxiang:string='魅力' 
    public zhuangQian(){ 
      console.log('赚了一个亿') 
    }
}
let cola=new Cola('演员',3,'表演') 
cola.interest() 
cola.zhuangQian()

重写interest方法

class Cola extends Hls{ 
  public xingxiang:string='魅力' 
  public interest(){ 
    super.interest() 
    console.log('建立电商平台') 
  }
  public zhuangQian(){
    console.log('赚了一个亿')
  }
}
let cola=new Cola('演员',3,'表演') 
cola.interest()

14 面向对象编程-接口知识

接口:定义规范，就是规划程序化的东西

interface Hasband{ 
  sex:string 
  interest:string 
  //接口可选参数，有个问号
  maiBaoBao?:Boolean 
}
let myhusband:Hasband={sex:'男',interest:'看书',maiBaoBao:true} 
console.log(myhusband)

定义一个函数

interface SearchMan{ 
  (source:string,subString:string):boolean 
}
//声明
let mySearch:SearchMan 
mySearch=function(source :string,subString:string):boolean{ 
  //声明一个内部变量flag进行search(查找)
  let flag=source.search(subString) 
  //不等于-1 就是true
  //等于-1 就是false
  return (flag!=-1) 
}
//调用
console.log(mySearch('高，富，帅，德','胖'))

接口还可以规范类，和规范函数差不多

15 面向对象编程-命名空间

作用：让变量之间互不干扰

namespace shuaiGe{ 
  export class Dehua{ 
    public name:string = '刘德华' 
    talk(){ 
      console.log('我是歌手兼演员刘德华') 
    }
  }
}
namespace bajie{ 
  export class Dehua{ 
    public name:string = '马德华' 
    talk(){
      console.log('我是马德华') 
    }
  }
}

let dehua1:shuaiGe.Dehua=new shuaiGe.Dehua() 
let dehua2:bajie.Dehua=new bajie.Dehua() 
dehua1.talk() 
dehua2.talk()