TypeScript学习笔记

1. 安装

cnpm install -g typescript
//or
yarn global add typescript

2.检查版本

tsc -v

开始

1.init json文件

tsc --init

把   "outDir": "./",   打开 ， 改为    "outDir": "./js", 

  

 2.监听ts

vscode 终端 => 运行任务

 

 3.数据类型

布尔类型 boolean

let flag:boolean = true;

数字类型 number

let num:number = 666;

 字符串类型 string

let str:string = 'This is TypeScript';

// 数组 方式1  

let arr:number[] = [1,2,3]; 

let arr2:object[] = [ {a:10}, {a:10}];

// 数组 方式2

let arr3:Array<number> = [1,2,3];

let arr4:Array<object> = [{a:1},{a:2}];

 

//数组 方式3

let arr33:any[] = ['123',true,66]

console.log('arr33',arr33)

 

元组类型(tuple) 指定数组中每一项值的类型

let arr5:[string,number,object,boolean] = ['123',3.14,{},false];

枚举类型 enum

enum Color {red,blue,orange};

let r:Color = Color.red; //0

 

// 如果没有定义值，那么默认值就是索引

如果你返回的是 0 不好理解是什么意思，但是你返回一个Color.red  就知道0代表的是红色

 

 

void表示方法没有返回任何类型

function run():void {

  console.log('66')

}

run();

 

// 返回/打印数字

function crnumber(type:number) {

  console.log('type',type)

  return type

}

crnumber(123)

never类型 是其他类型(null和undefined)的子类型 只能被never类型赋值，表示不会出现的值 , 几乎用不着

var a:never;

a = (()=>{

  // 抛出一个错误

  throw new Error("错误");

})()

 

// 3.1 函数的定义

// 函数声明法

function fn1():number {

  return 123

}

// 匿名函数

var fn2 = function ():string {

    return 'es50'

}

alert(fn2());

 

 

// 函数配置可选参数

function select(params:string,params2?:number) {

  console.log('配置可选参数',params,params2)

}

select('arg1')

 

//3.4 剩余参数

function sum(...array:number[]):number {

  let sum = 0;

  for (let index = 0; index < array.length; index++) {

    console.log('array[index]',array[index])

    sum +=  array[index]

  }

  return sum

}

let asr = [1,2,3,4]

alert(sum(...asr))

 

// 3.5 函数重载

function done(number:number):number;

function done(string:string):string;

function done(params:any):any {

  if (typeof params === 'string') {

    return '我叫' + params;

  }else if(typeof params === 'number'){

    return '年龄' + params;

  }

}

alert(done('张三'))

  //  ES5中的类， 可以在构造函数/原型链中 添加属性/方法；

  function Person() {

    this.name = '张三';

    this.age = 20;

    this.run = function () {

      alert(this.name + '在运动')

    }

  }

  // 静态方法

  Person.getInfo = function(name){

    alert(name + '是静态方法')

  }

  Person.prototype.sex = '男';

  // 实例方法

  Person.prototype.work = function(){

    alert(this.name + '在工作');

  }

  var p = new Person()

  p.run();

  p.work();

  console.log('p',p.sex)

  Person.getInfo('小李子')

  // Dog类 继承Person类

  function Dog() {

    Person.call(this) // 对象冒充实现继承

  }

  var d = new Dog();

  // d.work()  //   对象冒充只能继承构造函数的属性和方法 ， 不能继承原型链方法和属性  Uncaught TypeError: d.work is not a function 

  console.log('d',d)

 

 // 对象冒充 + 原型链继承  可以继承原型链方法和属性， 还有构造函数的属性和方法

<script>
  //  ES5中的类， 可以在构造函数/原型链中 添加属性/方法；
  function Person(name,age) {
    this.name = name;
    this.age = age;
    this.run = function () {
      alert(this.name + '在运动')
    }
  }
  // 静态方法
  Person.getInfo = function(name){
    alert(name + '是静态方法')
  }

  Person.prototype.sex = '男';
  // 实例方法
  Person.prototype.work = function(){
    alert(this.name + '在工作');
  }

  // Dog类 继承Person类

  function Dog(name,age) {
    Person.call(this,name,age) // 对象冒充实现继承 实例化子类可以给父类传参
  }
  //原型链继承
  Dog.prototype = new Person();
  var d = new Dog('花花',1);
  // d.work()  //   对象冒充不能继承原型链方法和属性  Uncaught TypeError: d.work is not a function 
d.run();
d.work()
</script>

// 类

var Animal = /** @class */ (function () {
    function Animal(t) {
        this.type = t;
    }
    Animal.prototype.run = function () {
        alert(this.type + '动物');
    };
    return Animal;
}());
var a = new Animal('哺乳');
a.run();