TypeScript入门

TypeScript简介

typescript是由微软发明，是javascript的类型的超集，可以编译成javascript，运行在浏览器中的开源语言。它试图取代javascript，然而现在并没有实现，但是，现在很多的库和组件已经开始接受typescript，因此typescript的学习也变得很有必要。

为什么typescript会出来，可能就是因为javascript实在是缺乏太多的东西。js连一个类型的都不支持，以及js连面向对象的基本特性比如抽象比如接口都不支持。当然了，微软也是一个爱发明编程语言的公司。

typescript的优势肯定是由很多的，比如它开始支持类型，抽象和接口等js所没有的特性。typescript更加的严谨，更适合大型项目的开发，比如java，就是一门超级严谨的语言，不允许你犯任何低级的错误。

如何开始使用typescript

1. 全局安装typescript  npm install -g typescript
2. 编译typescript  tsc XX.ts   ->  XX.js  
3. 运行编译后的js  node XX.js

TypeScript基本语法

类型

这里的类型包括参数类型，变量类型和返回值类型。我们可以给一个变量，参数或者是返回值定义一个类型，这样我们就不能随便更改类型。

指明类型：

1. 显示声明  let a:string;
2. 隐式声明 let a='abc'  (专业术语叫类型推断)

// 常用的变量类型
let num:number = 12;
let num:boolean = true;
let num:string = 'abc';
let num:any;
// 参数类型
function add (a:number, b:number) {
    return a+b;
}
// 返回值的类型
function add (a:number, b:number): number {
    return a+b;
}
// 数组类型
let c: number[] = [1,2,3];
let c: Array<number> = [1,2,3]
// 在数组中加入别的类型(使用any或者联合类型用在数组中)
let c: any = [1,2, 'abc'];
let c: (number|boolean) = 12;
let c: (number|boolean) = true;
let c: (number|string)[] = [12, 23, 'abc'];
c.push(true)   //error!!!
// 枚举类型
enum Gender { Male, Female };
let gender: Gender = Gender.Male ;
// 元祖类型
let e: [number, boolean] = [12, true]
let e: [number, boolean] = [true, 12]  //error   
// 一般不给一个变量声明void
let a: void ;
let a: void = 12;  error! 我们不能给void变量赋值
// 一般给没有返回值的函数声明一个void，虽然它默认式void
function show(name: string): void {
    console.log(`${name}`);
}
// null 和 undefined 类型只能装null 和 undefined 
let a: undefined = undefined;
let a: null = null;

// never 从不，绝不
let param: never = 12;  error!!
// 如果你声明一个函数的返回值为never， 则这个函数不应该让它执行结束
function show(): never {
    let a:string = 'abc'
    throw new Error('error!')  //这个时候，函数运行到半路报错，所以不会运行到头
}
// 关于json的类型
let json: {a: number, b: number} = { a: 1, b: 1}

类

ES6中的类

es6中的类存在的问题： 属性都是动态的加载到构造函数中， 而我们想要一开始就规定有哪些属性。

class Person {
    constructor(name, age) {
        this.name = name;  
        this.age = age;
    }
    show () {
        console.log(`my name is ${this.name}, and my age is ${this.age}`)
    }
}
let person = new Person('Lili', 12);
person.show();

TypeScript中的类

typescript中类的问题： 我们可以在类的外部访问或者是修改类的成员。

class People {
    name: string;
    age: number;
    constructor (name: string, age:number) {
        this.name = name;
        this.age = age;
    }
    show (): void {
        console.log(`my name is ${this.name}, and my age is ${this.age}`);
    }
}

let people: People = new People('Lili', 13);
people.show();

// 外部还可以访问和修改name，age
people.name="Mike",
people.age = 33;
people.show(); //my name is Mike, and my age is 33

因此我们给类添加修饰符，修饰符有访问修饰符和其它修饰符。

• 访问修饰符

1. public： 公共的，带有这个修饰符的成员可以在任何地方被访问。
2. private： 私有的， 带有这个修饰符的成员只能在自己的类中的得到访问。
3. protected： 保护的， 带有这个修饰符的成员可以在自己的类和子类中得到访问。

class A {
    protected name: string;
    private age: number;
    constructor (name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    show () {
        console.log(`my name is ${this.name}, and my age is ${this.age}`)
    }
}

class B extends A {
    public job: string;
    constructor (name: string, age: number, job: string) {
        super(name, age);
        this.job = job;
    }
    public show () {
        super.show();
        console.log(this.name); //name是protected， 是允许在子类中使用的
        // console.log(this.age); //error age is private
        console.log(`我的岗位是 ${this.job}`)
    }
}

let b = new B('Mike', 12, 'doctor');
b.show();

• 其它修饰符

1. static：静态成员，类无需实例化即可调用。
2. const：只读成员

 
class D {
    public static age: number = 12 ;
    // public static name: string = 'Lili'; // error 
    // public const static age:number = 13; //error 不能对静态成员使用const
    constructor( age: number, private name: string) {
        // this.age = age;  //error age is not exist  因为有static，age属性不在这个类的实例里面，而this就是指向类的实例，而age此时是属于整个类
    }

}
let d = new D(12, 'Lili')
console.log(D.age)

D.age = 33;
console.log(D.age) //可以被改变

typescript中简写的类

class C {
    constructor ( private name: string, protected age: number){
        // 省略了三步
        // 1.声明一个属性
        // 2.声明一个参数
        // 3.将参数赋值给属性
    }
    public show (): void {
        console.log(`my name is ${this.name}, and my age is ${this.age}`)
    }
}

存取器

当我们想要使用私有成员，而不想在外暴露，那么这时候可以使用存取器  get /  set  来解决。

 
class F {
    private _name: string;
    constructor (_name: string) {
        this._name = _name;
    }
    get name (): string {
        return this._name;
    }
    set name (newName: string) {
        this._name = newName;
    }  //这里返回值设置为void，报错？？？
}

let f = new F('Kim');
f.name='Yu';
console.log(f.name)

抽象类

抽象类只能直接作为父级使用，不能直接被实例化。

抽象类中的抽象方法不应该有方法体，而且必须在继承抽象类中的子类中必须实现抽象方法。

抽象类的特点： 只提供一个模板，而不去自己实现，目的是去规范它的一个子类。

abstract class Shape {
    abstract area(): number;
    fun1 () {
        console.log('抽象类也可以实现某些非抽象方法')
    }
}

class Circle extends Shape {
    constructor(private r: number) {
        super ();
    }
    area () {
        return Math.PI*this.r*this.r
    }
}

 

接口

接口使用implements来实现的，而不是使用extends来继承。

interface Shap {
    area (): number;
}

class React implements Shap{
    constructor(private width: number, private height: number){
        
    }
    area (): number{
        return this.width * this.height;
    }
}

let react = new React(12,23);
console.log(react.area())