typeScript小记

一、安装编译

安装ts
npm install -g typescript

将ts文件编译为js文件
tsc hello.ts

运行
node hello.js

安装ts-node 
npm install -g ts-node 

直接编译运行ts文件
 ts-node hello.ts

二、实时编译

1、运行命令生成，tsconfig文件

tsc --init

2、打开生成的tsconfig.json文件，修改

"outDir": "./js",

3、运行命令，进入监视状态，可自动编译运行ts文件

tsc -watch

三、数据类型，声明定义

布尔类型
在 TypeScript 中，boolean 是 JavaScript 中的基本类型，而 Boolean 是 JavaScript 中的构造函数

let a:bolean = true;

let createdByNewBoolean: boolean = new Boolean(1); x
let createdByNewBoolean: Boolean = new Boolean(1); √
let createdByNewBoolean: boolean = Boolean(1);	   √

数字类型

let a:number = 2;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;

// 编译结果
var hexLiteral = 0xf00d;
var binaryLiteral = 10;
var octalLiteral = 484;

字符串类型

let a:string = '这是一个字符串string类型';

null 和undefined(与 void 的区别是，它们是所有类型的子类型)

let a:null | number = 2444;
let a: string | undefined = undefined;
a = 'fbrgure';

// 严格模式下会报错，非严格模式则不会
let num: number = undefined;

let u: null;
let num: number = u;

//一定报错
let u: void;
let num: number = u;

void(一般用于定义没有返回值的函数)

function add():void {
	console.log('this is lucy');
}
//声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null：
let a: void = undefined;

never(其他类型，代表从不会出现的值)

let a:never;
a= (()=>{
	throw new Error('错误');
})()

任意类型

let a:any = 23; 
a=true;

let box:any = document.getElementById('box');
box.style.color = 'blue';

函数类型

function fun(){}
let fun = function(){}
function fun(name:string, age?:number):string{
	return `${name}--${age}`;
}
//多个参数，且非必须值？

数组类型

let a:number[] = [2,34,666,0];
// 范型
let b:Array<string>=["js","php"];

//数组对象

元组类型（tuple，数组的一种）

let a:[string,number,boolean]=["string",34,false];

联合类型（使用 | 分隔每个类型）

let aa: string | number;
aa = 'seven';
aa = 7;

function getLength(something: string | number): number {
    return something.length;
}

枚举类型(enum)

enum Flag {
	'red' = 11,
	'green' = 22,
	'yellow' = 33
}
const a:Flag = Flag.red;		// a=11
如果Flag.（number类型）呢？
默认值为0，1，2...
enum Flag {'red','green','yellow'}		// 0,1,2
给部分赋值
enum Flag {'red','green'=5,'yellow'}	//0,5,6

四、接口

一般类型

interface Person{ // 名称大写
	name:string;
	age?:number;	// 可有可无的参数
}

定义函数参数及返回值类型

interface FunType {
    (name:string,age:number):string
}
let people:FunType = function (name,age) {
   return name + 'is' + age;
};

类

interface Info{
    name:string,
    getName(name:string):string,
}
class Animal{
    age:number;
    constructor(age:number) {
        this.age = age;
    }
    getAge(): void {
        console.log('She is ' + this.age + ' years old');
    }
}
// Dog继承Animal，实现Info接口；Dog中一定得包含接口中定义的属性和方法，且类型需一致
class Dog extends Animal implements Info{
    name:string;
    constructor(name:string,age:number) {
        super(age);
        this.name = name;
    }
    getName():string{
        return 'This is ' + this.name + ' , She is ' + this.age + ' years old';
    }
}
// new Dog需传递的参数与Dog constructor中一致
let dog = new Dog('Lucy',2);
console.log(dog.getName());
dog.getAge();

接口继承

interface Animal{
    name:string,
}
interface Dog extends Animal{
    age:number;
}
let uouo:Dog = {
    name:'uouo',
    age:12,
};

五、泛型

// 简单的例子
function getData<T>(value:T):T{
    return value;
}

六、类

es5定义类与方法

// 构造函数
function Person(){
	this.name = 'YOYO';
	this.age = 23;
	this.run = function(){  // 实例方法
		console.error(this.name + 'is' +this.age+ 'years old');
	}
}
// 原型链：原型链上的属性会被多个实例共享，构造函数不会。
Person.prototype.color = 'yellow';
Person.prototype.study = function(){
	console.error(this.name + 'is studying');
}
var p = new Person();
p.run(); // 实例方法，被new之后才能调用

// 静态方法，可直接调用
Person.static = function(){
	console.error('这是一个静态方法');
}
Person.static();

es继承

function People(){
	// 第一种：该方法可继承构造函数内的属性及方法，不可继承原型链中新增的，如study方法
	Person.call(this);
}
// 第二种：构造函数与原型链中的皆可继承，但实例化子类时没法传参
People.prototype=new Person();
var p = new People();
p.run();

// 需传参方法
function Person(name,age){
	this.name = name;
	this.age = age;
	this.run = function(){
		console.error(this.name + 'is' +this.age+ 'years old');
	}
}
// 第三种：组合继承
function People(name,age){
    Person.call(this,name,age);
}
People.prototype=new Person(); 或者 People.prototype=Person.prototype；
var p = new People('liil',18);
p.run();

ts定义

class Person{
    protected name:string;
    static age=243;
    constructor(name:string) {
        this.name = name;
    }
    run():void{	   // 实例方法
        console.error(this.name+' is a girl');
    }
    static print(){	  // 静态方法
		console.error(this.name);  // 错误，静态方法中没法直接调用类里的属性，需要将属性定义为静态属性
		console.error(this.age);   // 正确
		console.error(Person.age);   // 正确
	}
}
let p = new Person('lili');
p.run();

// 静态属性与方法的调用
Person.age;
Person.print();

ts继承

class Child extends Person{
 	constructor(name:string) {
        super(name);
    }
}
let c = new Child('lucy');
c.run();

类的修饰符（默认public）

1、public		类里、子类、类外可访问
2、protected	类里、子类可访问
3、private		类里可访问

let p = new Person('lili');
// 类外调用
console.error(p.name);	// ts会报错，但编译js后仍可以运行出结果