Typescript基础

1 概述

官网：typescriptlang.org

特点：编译型语言；强类型语言；真正的面向对象语言(有接口、有泛型、有访问修饰符)

安装：

npm install -g typescript

atom-typescript

 

2 编译

tsc xxx.ts只编译不执行

有三种扩展名可选：.ts   .tsx   .d.ts

 

3 数据类型

有类型的script

var a:类型;

①基本类型：number  string  boolean  symbol  void   null   undefined   enum  any

1 void-空 一般用作返回值，如果赋值会报错

2 null、undefined：null-null   undefined-undefined

3 enum(枚举):有限的可能性，比如性别，星期

4 变体变量any：变体变量就是js原本的变量 

5 类型推测(隐式类型声明)：根据初始化值来推测类型

6 冲突检测：编译器会自动的排除掉无用的选项

7 联合类型：var g:number|string;

8 数组类型：var arr=[12,5,8];  等价于var arr:number[]=[12,5,8];

②联合类型var g:number|string;

③函数签名

④复合类型

var a:number;
a=12;

var b:void;
// b=12;

var c:null;
// c=12;

enum gender{
  male,female
}
var sex:gender;
sex=gender.male;

var d:any;
d=12;
d='abc';

//类型推测
var e;//等价于 var e:any;
var f=12;//等价于 var f:number=12;

//冲突检测
enum week{
  sunday,
  monday,
  thursday
}
var w;
switch(w){
  case week.sunday:
    break;
  case week.monday:
    break;
  case week.thursday:
    break;
}

//联合类型
var g:number|string;
//g=12;
//g='abc';

var h:boolean;
g=h?12:'abc';
//g=h?12:false; 报错，因为g不会成为布尔

var arr=[12,5,8];//等价于var arr:number[]=[12,5,8];
//arr[3]='abc';
var arr1=[12,'abc',false];

 编译之后的js

var a;
a = 12;
var b;
// b=12;
var c;
// c=12;
var gender;
(function (gender) {
    gender[gender["male"] = 0] = "male";
    gender[gender["female"] = 1] = "female";
})(gender || (gender = {}));
var sex;
sex = gender.male;
var d;
d = 12;
d = 'abc';
//类型推测
var e; //等价于 var e:any;
var f = 12; //等价于 var f:number=12;
//冲突检测
var week;
(function (week) {
    week[week["sunday"] = 0] = "sunday";
    week[week["monday"] = 1] = "monday";
    week[week["thursday"] = 2] = "thursday";
})(week || (week = {}));
var w;
switch (w) {
    case week.sunday:
        break;
    case week.monday:
        break;
    case week.thursday:
        break;
}
//联合类型
var g;
//g=12;
//g='abc';
var h;
g = h ? 12 : 'abc';
//g=h?12:false; 报错，因为g不会成为布尔
var arr = [12, 5, 8]; //等价于var arr:number[]=[12,5,8];
//arr[3]='abc';
var arr1 = [12, 'abc', false];

 

4 函数类型

   A：参数

        有类型

        签名检查--个数、类型得对

   B：返回值

        基本类型

        联合类型

        函数签名

        对象类型(复合类型)  var a:{x:number,y:number,z?:number};

外部声明变量
declare var $;

//函数参数类型
function show(a:number,b:number){
  console.log(a+b)
}
show(12,5);
//show('12',5);报错
//show(12);报错
//show(12,5,6);报错

//外部声明变量
declare var $;//不加这个会报错
$(function(){
  $('#div1').css('width','200px')
})

//以下这些都不用声明，因为ts已经自己声明了，还有很多
window.onload=function(){
  document.getElementById('div1').onclick=function(){
      alert('abc');
      //var page=Rapheal(0,0,400,300);
  }
}

//函数返回值类型
function sum(a:number,b:number):number{
    return a+b;

    // var c:boolean;
    // if(c){
    //   return 12;
    // }else{
    //   return 'abc';
    // }
}
console.log(sum(12,5));

//函数签名
function ajax(url:string,success:(res:string,code:number)=>void,
  error:(code:number)=>void){
  ;
}
ajax(
  '1.txt',
  function (str:string,code:number){

  },
  function (code:number){

  }
);

//复合类型
var a:{x:number,y:number,z?:number};
//下边这两种都可以
a={x:12,y:5};
a={x:12,y:5,z:99};

//可选参数跟复合类型差不多
function sum1(a:number,b:number,c?:number){
  return a+b;
}
sum1(1,2);
sum1(1,2,3);

编译之后的js

//函数参数类型
function show(a, b) {
    console.log(a + b);
}
show(12, 5);
$(function () {
    $('#div1').css('width', '200px');
});
//以下这些都不用声明，因为ts已经自己声明了，还有很多
window.onload = function () {
    document.getElementById('div1').onclick = function () {
        alert('abc');
        //var page=Rapheal(0,0,400,300);
    };
};
//函数返回值类型
function sum(a, b) {
    return a + b;
    // var c:boolean;
    // if(c){
    //   return 12;
    // }else{
    //   return 'abc';
    // }
}
console.log(sum(12, 5));
//函数签名
function ajax(url, success, error) {
    ;
}
ajax('1.txt', function (str, code) {
}, function (code) {
});
//复合类型
var a;
//下边这两种都可以
a = { x: 12, y: 5 };
a = { x: 12, y: 5, z: 99 };
//可选参数跟复合类型差不多
function sum1(a, b, c) {
    return a + b;
}
sum1(1, 2);
sum1(1, 2, 3);

 

5 接口--interface

接口跟java的不一样

接口：约定、限制

汽车(接口):开、加油、停、锁

//第一个例子
interface Point{
  x:number,
  y:number,
  z?:number
}
var p:Point;
p={x:12,y:5};
p={x:12,y:5,z:99};

//第二个例子
interface A{
  x:number,
  y:number
}
interface B{
  x:number,
  y:number,
  z:number
}
var a:A|B;
console.log(a.x);

编译后的js

var p;
p = { x: 12, y: 5 };
p = { x: 12, y: 5, z: 99 };
var a;
console.log(a.z);

 

6 真正的面向对象

class、extend、多继承

访问修饰符：

  A:public  公有  任何人都可以访问

  B:private   私有  只有类的内部可以访问

  C:protected  受保护的   只有子类可以访问

/案例1
class Person{
  name:string;
  age:number;

  constructor(name:string,age:number){
    this.name=name;
    this.age=age;
  }

  showMe(){
    console.log('我的名字叫：'+this.name+'我的年龄是：'+this.age)
  }
}
var p=new Person('blue',18)
p.showMe();


//案例2
class Person1{
  public name:string;
  private age:number;

  show(){
    this.age=18;
  }
}
var p1=new Person1();
p1.name='blue';
//p1.age=18;内部才能访问

编译后的js

//案例1
var Person = /** @class */ (function () {
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.showMe = function () {
        console.log('我的名字叫：' + this.name + '我的年龄是：' + this.age);
    };
    return Person;
}());
var p = new Person('blue', 18);
p.showMe();
//案例2
var Person1 = /** @class */ (function () {
    function Person1() {
    }
    Person1.prototype.show = function () {
        this.age = 18;
    };
    return Person1;
}());
var p1 = new Person1();
p1.name = 'blue';
//p1.age=18;内部才能访问

 

7 泛型

别跟'any'搞混了

可以理解为任何类型，可以用联合类型或者其他的

array是一个典型的泛型

//案例1
class Calc<T>{
    a:T;
    b:T;

    constructor(a:T,b:T){
      this.a=a;
      this.b=b;
    }

    show(c:T){
      alert(this.a);
      alert(this.b);
      alert(c);
    }
}
var obj=new Calc<number>(12,5);
obj.a=12;
//obj.b='abc';
obj.show(99);


//数组完整的写法
var arr:Array<number>=new Array<number>();//数组完整的写法

编译后的js

//案例1
var Calc = /** @class */ (function () {
    function Calc(a, b) {
        this.a = a;
        this.b = b;
    }
    Calc.prototype.show = function (c) {
        alert(this.a);
        alert(this.b);
        alert(c);
    };
    return Calc;
}());
var obj = new Calc(12, 5);
obj.a = 12;
//obj.b='abc';
obj.show(99);
//数组完整的写法
var arr = new Array(); //数组完整的写法