typescript知识点

一、配置ts环境及编译

npm install typescript -g
tsc xxx.ts
//想用node查看console
node xxx.js

二、基础知识点

1.基本类型：

（1）字符串：

let email:string = '122121@qq.com';
// 模板字符串
let msg:string = `我的邮箱是：${email}`

（2）布尔类型：

let isshow:boolean = false;

（3）数字：

let num:number =20;

（4）定义数组：

// string[]  表示对数组中的每一项定义类型，这样表示数组中的每一个元素都要是string类型，这属于强制声明为字符串类型
let arr:string[]=["1","2","3"]
// 这种其实是隐式类型声明，默认给他数字类型,相当于let arr:number[]=[1,2,3];
let arr = [1,2,3];
arr[3] = '1';//报错
//隐式声明，默认给她类型是any,相当于let arr:any[]=[1,'2',false];
let arr = [1,'2',false];

（5）.元组：

//  为解决数组中多种类型混合
let arr:[string,number] = ["rth",23];

（6）.枚举：

//主要针对一些：要定义一些固定的值，比如一周几天的
enum Weeks {Mon,Tue,Wes}
let day:Weeks = Weeks.Mon;
let day1:Weeks = Weeks["Mon"];
let day2:string = Weeks[0];
// 也可以手动赋值
enum Weeks {Mon=1,Tue,Wes}

（7）.any

let x:any='aaaa';

（8）.void

//当一个函数没有任何返回值的时候，或者返回值是undefined或null的时候，其返回值类型可以写void
function warnUser():void{
    console.log("32")
}

（9）.Null和Undefined

let a:undefined = undefined;
let a:null = null;

2.联合类型

let x:string|number|boolean;
x='1';
x=1;
x=false;

3.类型推论（即隐式类型声明）

//定义一个变量，直接赋值，没有定义类型，他会默认是你定义的那个值的类型；
let x=3;//默认就是number类型了
x='2';//报错

4.类型断言

let x:number|string|boolean = 'this is a string';
let strlength:number = (<string>x).length;   //断言的两种语法，两种都可以，通过断言，访问x下面的属性
let strlength1:number = (x as string).length;

5. 函数类型

(1)参数（参数也有类型）

fucntion show(a:number,b:string){

}
show(12,'12');
show(12,12);//报错
show(12);//报错,函数签名检查;实参形参不对应
show(12,'12',12);//报错,函数签名检查;实参形参不对应

（2）返回值（也有类型）

function sum(a:number,b:number):number{
    return a+b;//返回的必须是number类型的
}
sum(1,2);

（3）函数签名

// 里面定义的这些参数的类型啥的，就叫做函数签名
function ajax(url:string,success:(res:string)=>string,error:()=>void){
    if(success){
        console.log(success);
    }
}
ajax('2',function(res:string){return '23'},function(){})

6.外部变量声明：

declare var 名字;
//比如要引入一个$,这样就可以在页面使用$了；
//像window、document在typescript内部已经声明过了，可以直接用的；
declare var $;

7.接口(就是一种约定、限制)

//(1)
interface Point{
  x:number,
  y:number,
  z?:string, //可选
  [propName : string] : any;  //允许有任意的属性
}
var p:Point;
p={x:1,y:2};
p={x:1,y:2,z:'1'};
p={x:1,y:2,z:3,m:1}
//(2)
interface A{
  x:number,
  y:number,
}
interface B{
  x:number,
  y:number,
  z:number
}
var a:A|B;//a只能包含A于B公共的属性
a.z;//报错
a.x;//success

7.1 函数类型的接口(接口的一种用法，方法的参数类型声明)

interface SearchFunc{
    (souce:string,substring:string):boolean;
}
let searchfunc:SearchFunc
searchfunc = function(souce:string,substring:string):boolean{
    let result = souce.search(substring);
    return result>-1;
}

7.2 接口声明方法（类实现接口，必须实现接口里面声明的方法，关键字implements）

interface Animal{
    eat();
}
class Sheep implements Animal{
    eat(){
        console.log(323);
    }
}

8.class写法：

class Person{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    showme(){
        return '我叫'+this.name+',今年'+this.age+'岁';
    }
}
var p = new Person("rth",12);
console.log(p.showme());
//上面的类也可以这样写，构造函数里面变化；这样要声明一下public，否则就相当于没有定义name，上面那种写法默认是public的
class Person{
    constructor(public name:string,public age:number){
    }
    showme(){
        return '我叫'+this.name+',今年'+this.age+'岁';
    }
}
var p = new Person("rth",12);
编译过后的js：
var Person = (function () {
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.showme = function () {
        return '我叫' + this.name + ',今年' + this.age + '岁';
    };
    return Person;
}());
var p = new Person("rth", 12);
console.log(p.showme());

9.访问修饰符

public(公有，任何人都可以访问)、private(私有，只有类的内部可以访问)、protected(受保护，只有类跟他的子类可以调用)

class Person{
    public name:string;
    private age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    showme(){
        return '我叫'+this.name+',今年'+this.age+'岁';
    }
}
var p = new Person("rth",12);
console.log(p.name);
console.log(p.age);//报错

12.定义对象：

// 先用interface定义一个名字叫做Person的接口
interface Person {
   name: string
   age: number
}
// 定义一个变量,里面key要和上面对象，少一个多一个都会报错
let obj: Person = {
   name: 'rth',
   age: 20
}
// 某些属性可选、或者无法预知会出现啥新的属性;propName可以改成其他的名字
interface Person {
   name: string,
   age?: number,
   [propName:string] : any(这块这个属性的类型必须包含上面两种属性的类型，也可以写成string|number)
}

 

转载于:https://my.oschina.net/u/3950671/blog/3029287