TypeScript


TypeScript学习笔记

一、 TypeScript起步

1.1TypeScript简介

  1. TypeScript 是由微软开发的一款开源的编程语言。
  2. TypeScript 是 Javascript 的超集,遵循最新的 ES6、ES5 规范。TypeScript 扩展了 JavaScript 的语法。
  3. TypeScript 更像后端 java、C#这样的面向对象语言可以让 js 开发大型企业项目。
  4. 谷歌也在大力支持 Typescript 的推广,谷歌的 angular2.x+就是基于 Typescript 语法。
  5. 前端三大框架: Angular、Vue 、React 都可以集成 TypeScript。

1.2 TypeScript环境搭建

全局安装ts

npm install -g typescript

编译ts文件为js文件

tsc helloworld.ts

1.3 TypeScript基于vscode自动编译.ts文件

1.生成tsconfig.json文件

在项目根目录下运行下面命令:

tsc --init  //运行命令后自动生成配置文件

2.在vscode上方的菜单栏中点击【任务】->【运行任务…】

3.点击【tsc:监视 - tsconfig.json】

二、TypeScript的数据类型

typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,在typescript中主要给我们提供了以下数据类型

    布尔类型(boolean)
    数字类型(number)
    字符串类型(string)
    数组类型(array)
    元组类型(tuple)
    枚举类型(enum)
    任意类型(any)
    null 和 undefined
    void类型
    never类型

2.1 布尔类型(boolean)

var flag:boolean=true; // ts规范需要指定变量的类型
// flag=123;  //错误

2.2 数字类型(number)

var num:number = 123;
num = 456;    // 正确
num = 'str';    // 错误

2.3 字符串类型 (string)

var str:string='this is ts';
str='haha';  // 正确
str=true;  // 错误

2.4 数组类型(array)

ts中定义数组有两种方式:

第一种:

var arr:number[]=[11,22,33,44];

第二种:

var arr:Array<number>=[11,22,33,55];

这两种方式均充分体现ts需要指定数据的类型,数组也不例外

2.5 元组类型(tuple)–属于数组的一种

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。
例如定义一个具有两个值,且两个值分别为字符串和数字的数组:

let arr:[number,string] = [123,'this is ts'];

2.6 枚举类型(enum)

语法:

enum 枚举名{ 
                标识符[=整型常数], 
                标识符[=整型常数], 
                ... 
                标识符[=整型常数], 
            } ;    
            

用法:

enum Flag {success=1,error=2};
let s:Flag=Flag.success;
let f:Flag=Flag.success;
enum Color {blue,red,'orange'};
var c:Color=Color.red;
console.log(c);   //1  如果标识符没有赋值 它的值就是下标

enum Color {blue,red=3,'orange'};
var c:Color = Color.red;
console.log(c);   //3
var c:Color = Color.orange;
console.log(c);   //4

enum Err {'undefined' = -1,'null' = -2,'success' = 1};
var statusCode:Err = Err.success;
console.log(e);

2.7 任意类型(any)

var num:any=123;
num='str';
num=true;

2.8 null 和 undefined

null 和 undefined 为其他(never)类型的子类型

var num:number;
console.log(num)  //输出:undefined   报错
var num:undefined;
console.log(num)  //输出:undefined  //不报错
var b:null;
b = 123 // 错误写法
b = null;
console.log(b)  //输出:null  //正确

一个类型有可能是number类型也有可能是undefined类型,那我们就可以使用联合类型给其指定

let num:number | undefined | null
console.log(num);  
num = null
console.log(num);  
num = 123
console.log(num);

2.9 void类型

void类型 :typescript中的void表示没有任何类型,一般用于定义函数的时候方法没有返回值。
用来表示函数无返回值的情况:

function run():void{
            console.log('run')
        }
run();

函数有返回值的情况,规范做法是写出返回值类型:

function fn():number{
           return 123;
        }
 fn();

2.10 never类型(仅做了解)

其他类型 (包括 null 和 undefined)的子类型,代表从不会出现的值。

这意味着声明never的变量只能被never类型所赋值。

var a:undefined;
a = undefined;
var b:null;
b = null;

let a:never   
a = (()=>{
    
    throw new Error("错了")  
})()         // 抛出错误属于其他类型
console.log(a);        

三、typeScript中的函数

3.1 函数的定义

第一种:函数声明法

function run():string{
	return 'run';
}

第二种:匿名函数

var fun2 = function():number{
	return 123;
}

带參函数:

带參函数的函数声明法

function getInfo(name:string,age:number):string{
	return `${name} --- ${age}`;
}

带參函数的匿名函数法

var getInfo=function(name:string,age:number):string{
	return `${name} --- ${age}`;
}

无返回值的方法:

function run():void{
 console.log('run')
 }
run();

3.2 可选参数

function getInfo(name:string,age?:number):string{
	if(age){
			return `${name} --- ${age}`;
		}else{
        	return `${name} ---年龄保密`;
        }
}

注意:可选参数必须配置到参数的最后面

3.3 默认参数

es5里面没法设置默认参数,es6和ts中都可以设置默认参数

function getInfo(name:string,age:number=20):string{
    if(age){
        return `${name} --- ${age}`;
    }else{
        return `${name} ---年龄保密`;
    }
 }

3.4 剩余参数

function sum(a:number,b:number,c:number,d:number):number{
 	return a+b+c+d;
}
sum(1,2,3,4);
// 三点运算符:接受实參传过来的值
function sum(...res:number[]):number{ 
      var sum=0;
      // 在函数中可以直接使用这个数组
      for(let i=0;i<result.length;i++){
      	sum+=res[i];  
      }
      return sum;
}
sum(1,2,3,4,5,6);
function sum(a:number,b:number,...result:number[]):number{   
        var sum=a+b;
        for(var i=0;i<result.length;i++){
            sum+=result[i];  
        }
        return sum;
 }
 sum(1,2,3,4,5,6);

四、typeScript中的类

4.1 ts中类的定义

基本语法:

class 类名 {

	属性名:属性类型;
	
	constructor(){}
	
	// 也可以包含方法
	fn(){}
	
}

实体化类:

var obj = new Student(); 
class Person{

    name:string;   //属性  前面省略了public关键词

    constructor(n:string){  //构造函数   实例化类的时候触发的方法
        this.name=n;
    }

    run():void{

        alert(this.name);
    }

}
var p = new Person('张三');

p.run()
class Person{
    name:string; 
    
    constructor(name:string){  //构造函数   实例化类的时候触发的方法
        this.name=name;
    }
    
    getName():string{
        return this.name;
    }
    
    setName(name:string):void{
        this.name=name;
    }
}

var p=new Person('张三');
alert(p.getName());

p.setName('李四');
alert(p.getName());

4.2 ts中实现继承

ts中继承类会使用到extends和super关键字,被继承的类一般叫叫基类、父类、超类;继承的类一般被称作派生类、子类

class Person{
    name:string;
    
    constructor(name:string){
        this.name=name;
    }
    
    run():string{
        return `${this.name}在运动`
    }
}

// var p = new Person('王五');
// alert(p.run());

class Web extends Person{
    constructor(name:string){
        super(name);  /*初始化父类的构造函数*/
    }
}

var w=new Web('李四');
alert(w.run());

ts中父类的方法和子类的方法一致时,初始化谁就执行谁的方法

class Person{

    name:string;

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

    run():string{

        return `${this.name}在运动`
    }
}
// var p=new Person('王五');
// alert(p.run())


class Web extends Person{
    constructor(name:string){
		// 如果继承的父类有构造函数,此时派生类必须调用 super(),它会执行父类的构造函数。 而且,在构造函数里访问this的属性之前,我们一定要调用super()。这个是TypeScript强制执行的一条重要规则。
        super(name);  /*初始化父类的构造函数*/
        
    }
    run():string{
        return `${this.name}在运动-子类`
    }
    work(){
        alert(`${this.name}在工作`)
    }
}

// var w=new Web('李四');
// alert(w.run());
// w.work();

4.3 类里面的修饰符

typescript里面定义属性的时候给我们提供了 三种修饰符

  1. public :公有 在当前类里面、 子类 、类外面都可以访问

  2. protected:保护类型 在当前类里面、子类里面可以访问 ,在类外部没法访问

  3. private :私有 在当前类里面可以访问,子类、类外部都没法访问

注意: 属性如果不加修饰符 默认就是 公有 (public)

4.3.1 public :公有 – 在类里面、 子类 、类外面都可以访问

class Person{

    public name:string;  /*公有属性*/

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

    run():string{

        return `${this.name}在运动`
    }
}
// var p=new Person('王五');
// alert(p.run())


class Web extends Person{
    constructor(name:string){

        super(name);  /*初始化父类的构造函数*/
    }
    run():string{

        return `${this.name}在运动-子类`
    }
    work(){

        alert(`${this.name}在工作`)
    }
}

var w=new Web('李四');

w.work();

类外部访问公有属性:

class Person{

    public name:string;  /*公有属性*/

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

    run():string{

        return `${this.name}在运动`
    }
}

var  p=new Person('哈哈哈');

alert(p.name);

4.3.2 protected:保护类型–在类里面、子类里面可以访问 ,在类外部没法访问

class Person{

        protected name:string;  /*公有属性*/

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

        run():string{

            return `${this.name}在运动`
        }
    }
    var p=new Person('王五');
    alert(p.run());
    
    class Web extends Person{
    constructor(name:string){

        super(name);  /*初始化父类的构造函数*/
    }                  
    work(){

        alert(`${this.name}在工作`)
    }
}

var w=new Web('李四11');
w.work();
alert( w.run())

4.3.3 private :私有 –在类里面可以访问,子类、类外部都没法访问

class Person{

        private name:string;  /*私有*/

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

        run():string{

            return `${this.name}在运动`
        }
    }

    var p = new Person('哈哈哈').name // 报错,只能在Person类中访问;

4.4 静态属性 静态方法

静态属性与静态方法定义存在于类本身上面而不是类的实例上的属性和方法,不能直接被实例化对象直接访问,只能被类本身调用,使用 static定义:

class Per{
    public name:string;
    public age:number=20;
    
    //静态属性
    static sex="男";
    
    constructor(name:string) {
            this.name=name;
    }
    run(){  /*实例方法*/
        alert(`${this.name}在运动`)
    }
    work(){
        alert(`${this.name}在工作`)
    }
    
    static print(){  /*静态方法  不能直接调用类中的数据,但可以通过访问静态属性的方式来获取数据*/
    	// alert('print方法'+this.name); /* 错误,访问不到 */
        alert('print方法'+Per.sex); /* 正确,可以访问静态方法*/
    }
}

// var p=new Per('张三');
// p.run();

Per.print();
alert(Per.sex);

4.5 多态

父类定义一个方法不去实现,让继承它的子类去实现 每一个子类有不同的表现

/*父类 Animal*/
class Animal {
    name:string;
    constructor(name:string) {
        this.name=name;
    }
    eat(){   //具体吃什么不知道,  具体吃什么?继承它的子类去实现 ,每一个子类的表现不一样
        console.log('吃的方法')
    }
}

/*子类 Dog*/
class Dog extends Animal{
    constructor(name:string){
        super(name);
    }
    eat(){
        return this.name+'吃肉骨头';
    }
}*子类 Cat*class Cat extends Animal{
    constructor(name:string){
        super(name)
    }
    eat(){
        return this.name+'吃鱼'
    }
}

4.6 抽象类

typescript中的抽象类特点:

  • 它是提供其他类继承的基类,不能直接被实例化。
  • 用abstract关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。
  • abstract抽象方法只能放在抽象类里面
  • 抽象类和抽象方法用来定义标准

标准:

abstract class Animal{
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    abstract eat():any;  //抽象方法不包含具体实现并且必须在派生类中实现。
    run(){
        console.log('其他方法可以不实现')
    }
}

// var a=new Animal() /*错误的写法--抽象类不能直接被实例化*/

抽象方法必须在派生类中实现:

*Dog 子类*class Dog extends Animal{
    //抽象类的子类必须实现抽象类里面的抽象方法
    constructor(name:any){
        super(name)
    }
    eat(){
        console.log(this.name+'吃粮食')
    }
}
var d=new Dog('小花花');
d.eat();*Cat 子类*class Cat extends Animal{
    //抽象类的子类必须实现抽象类里面的抽象方法
    constructor(name:any){
        super(name)
    }
    run(){
    }
    eat(){
        console.log(this.name+'吃老鼠')
    }
}
var c=new Cat('小花猫');
c.eat();

五、typeScript中的接口

接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。 typescrip中的接口类似于java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等。

5.1 属性接口

定义接口,使用接口对传入参数进行约束:

// 定义属性接口
interface FullName{
    firstName:string;
    secondName:string;
}
// 使用接口对形参进行约束
function func(name:FullName):void{    //name是对象,接收的实际参数必须包含有firstName和secondName属性
    console.log(`姓:${name.firstName},名:${name.secondName}`);
}
func({firstName:"张",secondName:"三"})   // 这种传递方式不能有多余的属性, 否则编译报错
let obj = {
    firstName:"李",
    secondName:"四",
    age:19
}
func(obj)  // 这种传递方式可以有多余的属性

接口规范可以被不同的方法使用,即对批量方法进行约束:

interface FullName{
    firstName:string;
    secondName:string;
}
// 使用接口对实际参数进行约束
function func(name:FullName):void{    
    console.log(`姓:${name.firstName},名:${name.secondName}`);
}
// 使用接口对实际参数进行约束
function func2(info:FullName):void{    
    console.log(`${info.firstName}----${info.secondName}`);
}

func({firstName:"张",secondName:"三"})  
let obj = {
    firstName:"李",
    secondName:"四",
    age:19
}
func(obj)  

func2({firstName:"张",secondName:"三"})
func2(obj)

可选属性:

interface FullName{
    firstName:string;
    secondName:string;
    age?:number;
}
// 使用接口对实际参数进行约束
function func(name:FullName):void{    
    console.log(`姓:${name.firstName},名:${name.secondName}`);
}
// 使用接口对实际参数进行约束
function func2(info:FullName):void{    
    if(info.age){
        console.log(`${info.firstName}----${info.secondName}----${info.age}`);
    }
    else{
        console.log(`${info.firstName}----${info.secondName}`);
    }
}

func({firstName:"张",secondName:"三"})  
let obj = {
    firstName:"李",
    secondName:"四",
    age:19
}
func(obj)  

func2({firstName:"张",secondName:"三"})
func2(obj)

5.2 函数类型接口–对方法进行约束

对方法传入的参数以及返回值进行约束,也是批量约束

//对实参和函数进行约束
interface SumOfNums{
    (num1:number,num2:number):number;     // :前是对实参的约束,:后是对返回值的约束
}
let sum:SumOfNums = function(num1:number,num2:number):number{
    return num1+num2
}
console.log(sum(10, 20));

5.3 可索引接口

对数组、对象的约束

对数组进行约束:

// 对数组进行约束
interface ArrItf{
    [index:number]:number;     // :前是对索引的约束,:后是每一个元素的类型的约束
}
let arr1:ArrItf = [10, 20]    //正确写法
// let arr1:ArrItf = [10, 20, "hello"]  //报错
console.log(arr1);

对对象进行约束:

interface ObjItf{
    [index:string]:any
}
var arr:ObjItf={name:'张三', age:17};
console.log(arr);

5.4 类类型接口

对类的约束和抽象类抽象有点相似

//对类进行约束
interface DogItf{
    name:string;   //将来定义的类必须有name这个实例属性
    eat(food:string):void;  //将来定义的类必须有eat这个实例方法
}
class Animal{
    drink(){
        console.log("喝");
     
    }
}

class Dog extends Animal implements DogItf{

    name:string;
    constructor(n:string){
        super()
        this.name = "小狗"
    }

    eat(food:string){
        console.log(`${this.name}正在吃${food}`);
    }
}
let dog1 = new Dog("小白");
dog1.eat("骨头");
dog1.drink();

六、typeScript中的泛型

6.1 泛型的定义

泛型:软件工程中,我们不仅要创建一致的、定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。

在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。

通俗理解:泛型就是解决类、接口、方法的复用性,以及对不特定数据类型的支持(类型校验)。

6.2 泛型函数

/*只能返回string类型的数据*/
    function getData(value:string):string{
        return value;
    }

/*同时返回 string类型 和number类型  (代码冗余)*/
    function getData1(value:string):string{
        return value;
    }

    function getData2(value:number):number{
        return value;
    }


/*同时返回 string类型 和number类型       any可以解决这个问题*/
    function getData(value:any):any{
        return '哈哈哈';
    }
    getData(123);
    getData('str');

any放弃了类型检查,传入什么 返回什么。比如:传入number 类型必须返回number类型 传入 string类型必须返回string类型。

泛型:可以支持不特定的数据类型,T表示泛型,具体什么类型是调用这个方法的时候决定的:

function getData<T>(val:T):T{     // 当中出现的T类型由调用的时候的<>中的类型决定
    return val
}
console.log(getData<number>(30));
console.log(getData<string>("hello"));
console.log(getData<boolean>(true));

6.3 泛型类

class GetElem{  

    arr2:number[] = [];

    add(val:number){
        this.arr2.push(val)
    }

    getSecondElem():number{
        return this.arr2[1]
    }
} 

上面代码,将类型规定为number之后,对字符串不适用,但如果使用泛型就可以解决:

class GetElem<T>{   //该类中需要写到类型的地方(T表示),都可以用调用时候传进来的<>中的类型来代替,

    arr2:T[] = [];

    add(val:T){
        this.arr2.push(val)
    }

    getSecondElem():T{
        return this.arr2[1]
    }
} 
let obj1 = new GetElem<number>();
obj1.add(10);
obj1.add(20);
obj1.add(30);
console.log(obj1.getSecondElem());


let obj2 = new GetElem<string>();
obj2.add("hello");
obj2.add(" world");
obj2.add(" and ts");
console.log(obj2.getSecondElem());

七、模块

7.1 模块的的概念

关于术语的一点说明: 请务必注意一点,TypeScript 1.5里术语名已经发生了变化。
内部模块”现在称做“命名空间”。“外部模块”现在则简称为“模块”,模块在其自身的作用域里执行,而不是在全局作用域里;
这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export形式之一导出它们。
相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用 import形式之一。

7.2 模块引入的几种方法

根据导出方式,可以有对应的导入格式:

export {a, func, Dog2}      
// 对应导入方式:import {a, func, Dog2} from "./md1"   使用: a    func()


export default {a, func, Dog2}   
// 对应导入方式:import md1 from "./md1"    使用:md1.a    md1.func()

main.ts:

// import {a, func, Dog2} from "./md1"

// console.log(a)

// func()

// var objDog = new Dog2()
// objDog.eat()
//---------------------------------------------
// import {a as myA, func, Dog2} from "./md1"
// console.log(myA)
//-----------------------------------------------
// import md1 from "./md1"
// func()
// console.log(md1.a)


//-----------------------------------------------
// import A from "./md1"
// console.log(A.a)

md1.ts:

function func(){
    console.log("这是md1中的func函数")
}

class Dog2{

    eat(){
        console.log("吃------")
    }
}

// export {a, func, Dog2}      // 对应导入方式:import {a, func, Dog2} from "./md1"


export default {a, func, Dog2}   // 对应导入方式:import md1 from "./md1"    使用:md1.a,  md1.func()

7.3 命名空间

命名空间:
在代码量较大的情况下,为了避免各种变量命名相冲突,可将相似功能的函数、类、接口等放置到命名空间内
同Java的包、.Net的命名空间一样,TypeScript的命名空间可以将代码包裹起来,只对外暴露需要在外部访问的对象。命名空间内的对象通过export关键字对外暴露。

命名空间和模块的区别:

命名空间:内部模块,主要用于组织代码,避免命名冲突。

模 块:ts的外部模块的简称,侧重代码的复用,一个模块里可能会有多个命名空间。

main.ts中:

import A from "./md1"
console.log(A.a)

md2.ts中:

export namespace A{
    export let a = 10;

    function func(){
        console.log("这是md1中的func函数")
    }

    class Dog2{

        eat(){
            console.log("吃------")
        }
    }
}
console.log(A.a)  //10

namespace B{

    let a = 100;

    function func(){
        console.log("这是md1中的func函数")
    }

    class Dog2{

        eat(){
            console.log("吃------")
        }
    }
}

八、装饰器

装饰器:装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性上,可以为原本的代码添加额外的功能。

通俗的讲装饰器就是一个函数,可以注入到类、方法、属性参数上来扩展类、属性、方法的功能。

常见的装饰器有:类装饰器、属性装饰器、方法装饰器

装饰器的写法:普通装饰器(无传参) 、 装饰器工厂(可传参)

装饰器是过去几年中js最大的成就之一。

8.1 类装饰器

8.1.1 类装饰器:普通装饰器(无法传参)

function logClass(p:any){    
    //这里的代码在开始装饰的时候就会执行了!
    console.log(p);      // p接收这个被装饰的类
    
}

@logClass
class MyClass{
   
}

8.1.2 类装饰器:装饰器工厂(可传参)

function logClass(p:any){    
    //这里的代码在开始装饰的时候就会执行了!
    return function(target:any){
        console.log(target)   //target是类
        console.log(p)  // p接收装饰器参数
    }
}

@logClass("aaa")     //向装饰器传递参数
class MyClass{
   
}

8.2 属性装饰器

属性装饰器表达式会在运行时当作函数被调用,传入下列2个参数:

  1. 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。
  2. 成员的名字。
//实现一个装饰器,每次定义一个方法,都可以往数组arr中追加函数名作为数组的元素
function logProperty(p:any){    
    return function(target:any,attr:any){
        console.log(target);  //对于静态成员来说是类的构造函数,对于实例成员是类的原型对象
        console.log(attr);   //成员的名字
        console.log(p);  //p接收装饰器参数
    }
}

class MyClass{
    @logProperty("aaa")
    public name:string="zhangsan";

    @logProperty("bbb")
    static gender="男"
}

8.3 方法装饰器

function logMethod(p:any){    
    //这里的代码在开始装饰的时候就会执行了!
    return function(target:any,methodName:any,desc:any){
        // console.log(target)   //target对于静态成员来说是类的构造函数,对于实例成员是类的原型对象
        // console.log(methodName);   // 被装饰的方法名
        // console.log(desc);   // 属性描述符,它的value属性就是被装饰的这个函数
        // console.log(p)  // p接收装饰器参数

        //保存原有指向
        let oMethod = desc.value;
        desc.value = function(...res:any){

            console.log("log: 调用了sum1这个方法");
            oMethod(...res)
        }
    }
}

class MyClass{

    @logMethod("")
    sum1(n1:number,n2:number){
        console.log(`和是:${n1+n2}`)
    }
}
let obj = new MyClass()
obj.sum1(10,20)   //相当于每次调用这个函数,都会执行 desc.value中的
obj.sum1(30,40)

文章作者: 时秋
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 时秋 !
  目录