TypeScript用法小结（基础部分）

最开始我是反对TypeScript的，后来用的人越来越多了，身为一个立志要成为一个伟大的全面的programmer，没办法学一学，想要成为一个强大的人,必须要接受很多新鲜的事物.
TypeScript越学越发现特别像java，话不多说，get Start。

relish:环境安装

node安装 //查看版本 node --version
npm install -g typescript //查看版本 tsc --version

3.npm init -y //生成package.json

4.tsc --init //基础化搭建环境生成tscconfig.json

npm i @types/node --dev--save //安装依赖,主要解决模块声明文件

6.使用编译工具，vscode ， ctrl+shift+b 构建ts文件，生成js文件，node 文件名.js运行代码

@1hello world

  var nick:string = 'Hellow World'；
  console.log(nick)；

@2数据类型

TypeScript中的数据类型有：

Undefined :
Number:数值类型;
string : 字符串类型;
Boolean: 布尔类型；
enum：枚举类型；
any : 任意类型，一个牛X的类型；
void：空类型；
Array : 数组类型;
Tuple : 元祖类型；
Null ：空类型。

2.1代码示例

//undefined  number  string  boolean
let age1:number;
console.log(age1); //undefined

let age2:number = 18;
console.log(age2); //number类型   18

let  hjy:string = 'huangjingyang';
console.log(hjy); //string 类型

let jyai:string = 'js';
let jyaia:String = new String('js');
console.log(jyai,jyaia,jyai.length,jyai)    //js [String: 'js']        2  2



let flag:boolean = false; //布尔值类型


//enmu枚举类型
enum REN{man='帅的',women='漂亮的',ts='gaygay的'}; 
console.log(REN);  //{ man: '帅的', women: '漂亮的', ts: 'gaygay的' }
console.log(REN.ts) //gaygay的

enum REN2{MAN,WOMEN,TS};
console.log(REN2)       //{ '0': 'man', '1': 'women', '2': 'ts', man: 0, women: 1, ts: 2 }
console.log(REN2.TS)  //2


//万能类型any
//any 类型 万能类型,万能类型数据类型的值可以改变  
let any1:any = 1000;
any1 = 'jingyang';
any1 = {};
console.log(any1);

//void类型，当一个函数没有 当一个函数没有返回值时，你通常会见到其返回值类型是 void：
function (): void {
    console.log('no retrun')
}

//设置变量类型为void没有太多的意义，因为只可以赋值为undefined 或者null
let unusable: void = undefined;

//数组类型 
let arr1:number[]; //数组类型 ---> 数字类型
let arr2:Array //数组类型 ---> 字符串
let arr3:Array //数组类型 ---> 布尔
//字面量赋值法则
let arr14:number[] = [];
let arr5:number[] = [1,2,3,4,5];
let arr6:Array = ['1','2','3'];
let arr7:Array = [true,false]
//构造函数赋值法则
let arr18:number[] = new Array(18,16);
let arr19:Array = new Array('19','19');
let arr20:Array = new Array(false,true);

//元祖类型  //可以在数组中有两种或者多种数据类型   //元祖是有顺序的
let x:[string,number]
x = ['hello',10]
let y:[string,string]
y = ['string',1] //这里的1编译器会报错

//null类型
let sn: string | null = "bar";
sn = null;  //需要选有类型为null,才可以赋值为null ,单个竖号表示可选类型

@3 TypeScript 函数

3.1 定义函数

function search(type:string):string{
  return `找到了${type}的女朋友`;
}
let type:string = '漂亮';
console.log(search(type));//找到了漂亮的女朋友

3.2 可选参数函数,默认参数的函数

function search3(age:number=18,fun?:string):string{
  return `找到了女朋友,${age}岁,长得像${fun?fun:'凤姐'}`;
}
search3(18);
search3(18,'刘亦菲');

3.3 传入多个是字符串的数组

//用  ...xuqiu:string[] 传入多个是字符串的数组
function search4(...xuqiu:string[]):string{
  let yy:string = 'hjy媳妇';
  for (let i = 0; i < xuqiu.length; i++) {
     yy = yy + xuqiu[i];
  }
  return yy;
};
console.log(search4('刘亦菲','舒畅'));

3.4 函数声明法函数表达式法箭头函数表达式

//函数声明法

function add(add1:number,add2:number):number{
  return add1+add2;
}
console.log(add(1,1));

//函数表达式法

let add2 = function (yuhou:any):number {
  return 1
}

console.log(add2)
console.log(add2('fasdf'))

//箭头函数表达式
let add3 = (n1:number,n2:number):number=>n1+n2;
console.log(add3(1,2));

4 一些引用数据类型

4.1 日期对象

//不传递参数
let d:Date = new Date();
console.log(d);  //这里打印出  2018-12-24T09:20:12.807Z

//传递参数

let d2:Date = new Date(1000); //1970-01-01 00:00:00 开始之后往后数1000
let d3:Date = new Date(2000); //1970-01-01 00:00:00 开始之后往后数1000
console.log(d2,d3);   //1970-01-01T00:00:01.000Z 1970-01-01T00:00:02.000Z


//传递字符串

let d4:Date = new Date('2018/12/19 12:28:00');
let d5:Date = new Date('2018-12-19 12:28:00');
let d6:Date = new Date('2018-12-19T12:28:00');
console.log(d4,d5,d6);  //2018-12-19T04:28:00.000Z 2018-12-19T04:28:00.000Z 2018-12-19T04:28:00.000Z

4.2 正则表达式

//RegExp   string

//构造函数声明法
let reg1:RegExp = new RegExp('huangjingyang');
console.log(reg1);
let reg2:RegExp = new RegExp('huangjingyang','g');
console.log(reg2);



//字面量声明法则
let reg3:RegExp = /huangjingyang/i;
let reg4:RegExp = /huangjingyang/gi;
let reg5:RegExp = /huangjingyang/g;


//test(string)  exec(string);
let reg6:RegExp = /huangjingyang/i;
let web:string = 'huangjingyanghenshuai' 
console.log(reg6.test(web));

console.log(reg6.exec(web))//成功返回对应[ 'huangjingyang', index: 0, input: 'huangjingyanghenshuai' ],不成功返回null

5 面向对象编程

5.1 修饰符

//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('weman','liuyifei',18);
console.log(jiejie.sex);
console.log(jiejie.name); //编译报错 受保护属性
console.log(jiejie.age); //编译报错  私有属性
console.log(jiejie.sayHello()); 
console.log(jiejie.sayLove()); //编译报错 受保护方法

//readonly  只读修饰符
class Man{
  public readonly sex:string='男';//只读属性必须在类上面直接赋值
}
var man:Man = new Man();
man.sex = '女';   //表一报错,只读属性编译报错

5.2 继承和重写

class Jypang{
  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 user(){
    console.log('找小姐姐');
  }
}

let jspangObj:Jypang = new Jypang('jingyang',18,'shuai');

class jyShuai extends Jypang{
  public xingxiang:string = "帅气";
  public interst(){
    super.user();
    console.log('建立公司平台');
  }
  public zhengqian(){
    console.log('一天挣一个亿')
  }
}
let shuai:jyShuai = new jyShuai('jingyang',18,'shuai');

// TypeScript 不支持多重继承

5.3 接口

//接口编程  interface

interface Husband{
  sex:string
  interest:string
  maiBaoBao?:Boolean
}

let myHusband:Husband = {sex:'nan',interest:'找女朋友',maiBaoBao:true};

console.log(myHusband)

interface SearchMan {
  (source:string,subString:string):boolean
}
let mySarch:SearchMan;

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

console.log(mySarch('矮','富，帅，德')); //false
console.log(mySarch('富，帅，德,矮','富，帅，德')); //true

5.4 命名空间

//命名空间 namespace 
namespace shuaiGe{
  export class Dehua{
    public name:string = 'liudehua'
    TreeWalker(){
      console.log('我是黄靖阳，跟刘德华一样的男人')
    }
  }
}

namespace buShuaiGe{
  export class Dehua{
    public name:string = 'liudehua'
    TreeWalker(){
      console.log('我是吴孟达，一个笑星')
    }
  }
}
let persion1 = new shuaiGe.Dehua();
let persion2 = new buShuaiGe.Dehua();

persion1.TreeWalker();
persion2.TreeWalker();

注:学习来自技术胖视频,有兴趣的同学可以看下.感觉简单就疯狂倍速播放吧..........
http://jspang.com/post/typescript.html

感觉有帮助,麻烦点个赞吧.