最开始我是反对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<string> //数组类型 ---> 字符串
let arr3:Array<boolean> //数组类型 ---> 布尔
//字面量赋值法则
let arr14:number[] = [];
let arr5:number[] = [1,2,3,4,5];
let arr6:Array<string> = ['1','2','3'];
let arr7:Array<boolean> = [true,false]
//构造函数赋值法则
let arr18:number[] = new Array(18,16);
let arr19:Array<string> = new Array('19','19');
let arr20:Array<boolean> = 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
感觉有帮助,麻烦点个赞吧.
网友评论