typeScript

安装

 

正常    npm install typescript -g

安装成功以后执行   tsc --version 出现版本号代表ts安装成功

代码写完以后，执行  tsc (当前文件名)

编译完成以后，执行 node (编译文件名)   查看结果

 

正常的类型定义

var a:string  = 'HelloWorld'
let b:any;

 

enum 类型 枚举类型

 

enum REN{nan,nv,yao}

console.log(REN.yao) // 2


enum REN{nan='男人',nv='女人',yao='人妖'}

console.log(REN.yao) // '人妖'

 

普通函数

function searchPerson(age:number):string{
  return `我是一个${age}岁的小姐姐`;
}

let age:number = 18;
let result:string = searchPerson(age);

console.log(result);  // 我是一个18岁的小姐姐

 

有可选参数的函数

 

function searchPerson(age:number,stature?:string):string{
  let yy:string = '';
  yy = `我是一个${age}岁的小姐姐`;
  if(stature!==undefined){
    yy+=`,我的身材${stature}`;
  }
  return yy;
}

var result:string = searchPerson(18);
console.log(result);//我是一个18岁的小姐姐


var result:string = searchPerson(18,'大长腿');
console.log(result);//我是一个18岁的小姐姐,我的身材大长腿

 

参数有默认值的函数

 

function searchPerson(age:number = 18,stature:string = '水蛇腰'):string{
  return `我是一个${age}岁的小姐姐，我的身材${stature}`;
}

var result1:string = searchPerson(28,'大长腿');
console.log(result1);// 我是一个28岁的小姐姐，我的身材大长腿


var result:string = searchPerson();
console.log(result);// 我是一个18岁的小姐姐，我的身材水蛇腰

 

有剩余参数的函数

 

function searchPerson(...xuqiu:string[]):string{
  let yy = '我是一个';
  for(let i = 0; i < xuqiu.length; i++){
    yy += xuqiu[i];
    if(i<xuqiu.length-1){
      yy+='、';
    }
  }
  yy+='的小姐姐';
  return yy;
}

var result1:string = searchPerson('28岁','大长腿','水蛇腰');
console.log(result1);// 我是一个28岁、大长腿、水蛇腰的小姐姐

 

三种函数定义方式

 

// 函数声明法
function add(n1:number,n2:number):number{
  return n1+n2
}
// 函数表达式法
var add1 = function(n1:number,n2:number):number{
  return n1+n2
}
// 箭头函数
var add2 = (n1:number,n2:number):number=>{
  return n1+n2
}

 

 

复杂类型变量的声明

 

// 数组的声明，ts中数组的声明是单一类型，即每个数组中内部的元素是一种类型
let arr1:number[]     //声明一个数值类型的数组
let arr2:Array<string>  //声明一个字符串类型的数组
let arr3:Array<boolean>  //声明一个布尔值类型的数组


// 字面量赋值法
let arr4:number[] = []
let arr5:number[] = [1,2]
let arr6:Array<string> = ['132','黑色']
let arr7:Array<boolean> = [true,false]
// 构造函数赋值法
let arr8:number[] = new Array()
let arr9:number[] = new Array(1,2)
let arr10:Array<string> = new Array('132','黑色')
let arr11:Array<boolean> = new Array(true,false)

 

元组

元组的长度，以及每个值的类型都是写死的，一般没必要使用

let x:[string,number]

x = ['hello',10]

 

字符串的两种声明方式

let zcg:string = '12314';
let zcg1:String = new String('1234')

console.log(zcg)//'12314'
console.log(zcg1)//[String: '1234']

 

日期类型Date

 

let d:Date = new Date()
console.log(d)//2020-12-01T06:48:32.105Z

 

正则表达式

 

// 构造函数声明法
let reg1:RegExp = new RegExp("jspang")
let reg2:RegExp = new RegExp("jspang",'gi')
console.log(reg1) // /jspang/
console.log(reg2)　// /jspang/gi
// 字面量声明法
let reg3:RegExp = /jspang/
let reg4:RegExp = /jspang/gi
console.log(reg3)  // /jspang/
console.log(reg4)  // /jspang/gi

 

类的声明和使用

 

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('范冰冰',18)
console.log(jiejie)  // XiaoJieJie { name: '范冰冰', age: 18 }
jiejie.say()  // 小哥哥好

 

类内访问修饰符

 

1.  public:公有修饰符，可以在类内或者类外使用public修饰的属性或者行为，默认修饰符。
2.  protected:受保护的修饰符，可以本类和子类中使用protected修饰的属性和行为。
3.  private : 私有修饰符，只可以在类内使用private修饰的属性和行为。

class XiaoJieJie2{
  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 jiejie2:XiaoJieJie2 = new XiaoJieJie2('女','热巴',22)

console.log(jiejie2.sex)    // '女'
console.log(jiejie2.name)   //编译报错
console.log(jiejie2.age)    //编译报错
jiejie2.sayHello()    // '热巴'
jiejie2.sayLove()    //编译报错    

 

　　readonly:将属性设置为只读，只读属性必须在生命时或者构造函数里被初始化

 

class Man{
  public readonly sex:string = '男'
}

var man:Man = new Man()
man.sex='女'    // 编译报错
console.log(man.sex)  // '女'(虽然报错依旧成功赋值)

 

类的继承

class Jspang{
  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('小姐姐')
  }
}

// 类的继承
class JsShuai extends Jspang{
  public xingxiang:string = '帅气'
  public zhuangQian(){
    console.log('一天赚了一个亿')
  }
}// 类方法的重写
class JsShuai1 extends Jspang{
  public xingxiang:string = '帅气'
  public interest(){
    super.interest()
    console.log('建立电商平台')
  }
  public zhuangQian(){
    console.log('一天赚了一个亿')
  }
}

 

接口

 

//  接口定义使用interface接口

interface Husband {
  sex:string
  interest:string
}
let myhusband:Husband ={ sex:'男',interest:'看书、做家务'}
console.log(myhusband) // { sex: '男', interest: '看书、作家务' }

// 可选参数的接口
interface Husband1 {
  sex:string
  interest:string
  maiBaoBao?:Boolean
}
let myhusband1:Husband1 ={ sex:'男',interest:'看书、做家务',maiBaoBao:true}
console.log(myhusband) // { sex: '男', interest: '看书、作家务' }

// 规范函数类型接口
interface  SearchMan{
  (source:string,subString:string):boolean
}

let mySearch:SearchMan

mySearch = function(source:string,subString:string):boolean{
  let flag =source.search(subString)
  return (flag != -1)
} 

console.log(mySearch('高、富、帅、德','胖')) //false

 

命名空间的使用

 

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:shuaiGe.Dehua   = new bajie.Dehua()
dehua1.talk()  // 我是帅哥刘德华
dehua2.talk()  // 我是二师兄马德华

 

感谢大佬技术胖的免费学习讲解视频，地址：https://jspang.com/detailed?id=38