Tpyescript
typescitpt安装 编译
安装
npm install -g typescript
yarn global add typescipt
tsconfig.json配置文件
{
"compilerOptions": {
"module": "CommonJS",
"outDir": "./dist",
"target": "es5",
"strictNullChecks": true,
"watch": true
},
"include": [
"./src/**/*.ts"
],
"exclude": [
"node_modules"
]
}
执行命令
tsc
typescript中的数据类型
//布尔类型(boolean) true false
var flag:boolean=true;
//数字类型
var a:number=123;
console.log(a)
//字符串类型
var str:string="this is demo";
// str=111; 报错
// 数组类型(array) ts中定义数组有两种方式
//1.第一种定义数组方式
// let arr:number[]=[1,2,3,4,'122']; 报错,数组元素必须全是数字
let arr:string[]=['php','.net','go']; //字符串数组
//2.第二种定义数组的方式
let arr1:Array=[1,2,3,4,5];
console.log(arr1);
//元祖类型 tuple 属于数组的一种
let arr2:[string,number,boolean]=['ts',3.12,true];
//枚举类型,事先考虑到某一变量可能取得值,尽量用自然语言中含义清楚的单词来表示它的每一个值,这种方法称为枚举方法。用这种方法定义的类型称为枚举类型
/*
* enum 枚举名{
* 标识符[=整型常数],
* 标识符[=整型常数],
* ....
* 标识符[=整型常数],
* };
* //举例; pay_status 0 未支付 1支付 2 交易成功
* */
enum Flag{
success=1,
error=-1
}
var f:Flag=Flag.success;
console.log(f);//1
//任意类型 (any) 可以是任意类型。
var num:any="122";
num="str";
//任意类型的用法 可以用来解决获取dom节点的时候ts报错。
// var oBox:any=document.getElementById('box');
// oBox.style.color='red';
//null和undefined 其他数据类型的子类型
//定义没有赋值就是undefined
var num1:number | undefined;
console.log(num1);
var num2:null;
num2=null;
//元素可能是number类型,也可能是null,可能是undefined
var num3:number | null | undefined;
num3=1222;
console.log(num3)
//void类型 typescript 中的void表示没有任何类型 一般用于定义方法的时候方法没有返回值
function run():void {
console.log('run');
}
run();
//never类型,是其他类型(包括null和undefined)的子类型,代表从不会出现的值。这意为着never的变量只有被never类型所赋值。
typescript中的函数
/*
* ts中的函数用法
* */
//函数中声明法
function run1():string{
return '1222'
}
//匿名函数
var fun2=function():number{
return 11;
}
console.log(fun2()); //调用方法
//ts中定义传参
function getInfo(name:string,age:number):string{
return `${name}---${age}`
}
console.log(getInfo('zhangsan',20));
//没有返回值的方法
function run2():void{
console.log('1111');
}
run2();
//方法可选参数 要使用? 注意可选参数必须配置到参数的最后面
function getInfo1(name:string,age?:number):string{
if(age){
return `${name}---${age}`
}else{
return `${name}---年龄保密`
}
}
console.log(getInfo1('张三'));
console.log(getInfo1('张三',122));
//默认参数
function getInfo2(name:string,age:number=20):string{
if(age){
return `${name}---${age}`
}else{
return `${name}---年龄保密`
}
}
console.log(getInfo2('张三'));
console.log(getInfo2('张三',122));
//剩余参数
//三点运算符 接收新参数传过来的值
function sum(...result:number[]):number{
let sum=0;
for(var i=0;i
sum+=result[i]
}
return sum;
}
console.log(sum(1,3,7)); //11
//第二种写法
function sum1(a:number,b:number,...result:number[]):number{
let sum=a+b;
for(var i=0;i
sum+=result[i]
}
return sum;
}
console.log(sum1(1,3,7,333)); //344
//函数重载
/* 重载指的是两个或者两个以上同名函数,但他们的参数不一样,这时会出现函数重载的情况*/
/* typescript中的重载,通过为统一函数提供多个函数类型定义来尝试下多种功能的目的*/
function getInfo3(name:string):string;
function getInfo3(age:number):string;
function getInfo3(str:any):any{
if(typeof str==='string'){
//字符串类型
return '我叫:'+str
}else{
//数字类型
return '我的年龄是:'+str
}
}
console.log(getInfo3('张三')); //正确
console.log(getInfo3(1222)); //正确
// console.log(getInfo3(true)); 报错
function getInfo4(name:string):string;
function getInfo4(name:string,age:number):string;
function getInfo4(name:any,age?:any):any{
if(age){
return '我叫:'+name+'年龄是'+age
}else{
return '我叫:'+name
}
}
console.log(getInfo4('张三')); //正确 我叫:张三
console.log(getInfo4('猪头',111)); //正确 我叫:猪头年龄是111
//箭头函数 es6 箭头函数里面的this指向上下文
setTimeout(()=>{
console.log('run')
},1000)
typescript中的类
/*ts中的类*/
//es5里面的类
//1. 最简单的类
function Person(){
this.name='战三';
this.age=20;
}
//实例化
var p=new Person();
console.log(p.name); //战三
//2. 构造函数和原型链里面增加方法
function Person1(name,age){
this.name=name;
this.age=age;
//run是实例方法,必须通过new完一个实例,才能调用
this.run=function(){
console.log(this.name+'在运动')
}
}
//类的静态方法
// Person1.getInfo=function(){
// console.log('我是静态方法')
// }
//在原型链添加属性和方法
//原型链上面的属性会被多个实例共享, 构造函数不会
Person1.prototype.sex="男";
Person1.prototype.work=function(){
console.log(this.name+'在工作');
}
//es5的继承
//web类继承Person类 原型链+对象冒充的组合继承模式
function web(name,age) {
Person1.call(this,name,age); //对象冒充实现继承
}
web.prototype=Person1.prototype;
var w=new web('张三dd',12);
w.run(); //对象冒充可以继承构造函数里面的属性和方法。
// w.work(); // 报错 对象冒充无法继承原型链上的属性和方法。
w.work(); //原型链继承可以实现
var w=new web('ddddd',122);
w.run(); //对象冒充可以继承构造函数里面的属性和方法。
// w.work(); // 报错 对象冒充无法继承原型链上的属性和方法。
w.work(); //原型链继承可以实现
// var p1=new Person1();
// p1.run(); //战三在运动
// p1.work(); //战三在工作
//调用静态方法
// Person1.getInfo();//我是静态方法
/* ts中的类的写法*/
class Person5{
name:string; //属性,前面省略了public关键字
constructor(name:string) {//构造函数
this.name=name;
}
run():void{
console.log(this.name+"在跑路");
}
getName():string{
return this.name;
}
setName(name:string):void{
this.name=name;
}
}
let p1=new Person5('张三');
p1.run();//张三在跑路
console.log(p1.getName());// 获取name属性
p1.setName('kay');//设置name属性
console.log(p1.getName());// 重新获取name
ts的类的继承
/* ts中的类的写法*/
class Person5{
name:string; //属性,前面省略了public关键字
constructor(name:string) {//构造函数
this.name=name;
}
run()