TypeScript总结

链接

安装及使用

安装

npm install typescript -g

或

yarn global add typescript

使用

新建demo.ts：

function test() {
    let web: string="hello world"
    console.log(web);
}
test();

编译：

tsc temo.ts
node temo.js

或

npm install -g ts-node

安装成功后：

ts-node Demo1.ts

静态类型

被定义后就不可改变该亦是的类型了。

js是弱类型语言，可以被改变。

基本使用

// 定义count是number类型
const count : number = 1; 
count = 'hello'; // 此时改变类型为string就会报错编译不通过

自定义静态类型

interface XisoJieJie {
    uname: string,
    age: number
}
const xh : XisoJieJie = {
    uname: '小红',
    age: 15
}
console.log(xh);

基础静态类型和对象类型

静态类型

null,undefinde,symbol,boolean，void等。

对象类型

• 对象类型
• 数组类型
• 类类型
• 函数类型

对象类型

const xiaoJieJie: {
    name: string,
    age: number
} = {
    name: '小明',
    age: 14
}
console.log(xiaoJieJie.name)

数组类型

const arr : number [] = [1,2,3];
const xiaoJieJies : String [] = ['小明','小红','小黄'];
console.log(xiaoJieJies)

类类型

class Person{}
const xm : Person = new Person();
console.log(xm);

函数类型

const j : () => string = ()=> {return '小明'};
console.log(j);

类型注释和类型推断

类型注释

let count : number; 
count = 123

类型推断

let countInference = 123

这时编辑器和编译器都会推断出是number类型。

函数参数和返回类型定义

类型定义

无定义时：

function getTotal(one : number, two :number){
    return one + two
}
const total = getTotal(1,2)

虽然能推断出是返回number，但这样不规范。

定义时：

function getTotal(one : number, two :number) : number{
    return one + two
}

const total = getTotal(1,2)

无需return时：void

function sayHello(){
    console.log('hello world!);
}

异常或死循环：never返回值类型

异常：

 function errorFuntion() : never{ 
    throw new Error()
    console.log('Hello World')
 }

死循环：

 function forNever() : never{
     while(true){}
     console.log('Hello JSPang')
 }

函数参数为对象（解构）时

TS函数参数解构：

function add ({one, two} : {one: number, two: number}) {
    return one + two;
}
const three = add({one:1,two:3});

console.log(three); // 4

ES6函数参数解构：

function add({x,y} = {}){
    return x+y;
}
var sum = add({x:3,y:5});
console.log(sum); // 8

数组

各种类型

const numberArr : number [] = [1,2,3];

const stringArr : string [] = ['a','b','c'];

const undefinedArr : undefined [] = [undefined, undefined];

const emptyArr : null [] = [null,null];

const arr : (number | string) [] = [1,'a',1,2,'b'];

// 类型别名
type Lady = {name: string, age: number};
const xiaoJieJies: Lady[] = [{
    name: '小明',age:14
},{
    name: '小红', age: 35
}]

class Lady1  {name: string;age: number};
const xiaoJieJies1: Lady1[] = [{
    name: '小明',age:14
},{
    name: '小红', age: 35
}]

type和class的区别是class会编译出来，type会忽略。

元组

// 无约束
const arr1 : (number | string) [] = [1,'a',1,2,'b'];

// 有约束
const arr2 : [string,string,number] = ['a','b',3];

接口

定义接口

interface Girl {
    name: string;
    age: number;
    bust: number
}

const getResume = (girl: Girl) => {
    console.log(girl.name);
}

const xh = {
    name: '小红',
    age: 19,
    bust:38
}

getResume(xh);

接口(interface)和类型别名(type)的区别

• 类型别名可以直接给类型，比如string，但接口必须给对象。

接口定义非必填值?:

语法：?:

interface Girl {
    name: string;
    age: number;
    bust ?: number
}

接口允许加入任意值[anyname:string]:any;

语法：[anyname:string]:any;

string的意思是对象名是string类型，any的意思是对象值是任意类型。

interface Girl1 {
    name: string;
    age: number;
    bust ?: number;
    [anyname:string]: any;
}
const xh = {
    name: '小红',
    age: 19,
    sex:'女',
    hobby:'兴趣',
    year:22
}

接口里定义方法

语法：fun(): type

比如：say(): string;代表say方法返回string类型的值。

interface Girl1 {
    name: string;
    age: number;
    bust ?: number;
    [anyname:string]: any;
    say(): string;
}
const xh = {
    name: '小红',
    age: 19,
    sex:'女',
    hobby:'兴趣',
    year:22,
    say(){
        return 'hello World!';
    }
}

类实现接口

类实现接口时必须把所有要必填的属性和方法实现，否则就会报错。

错误的：

class XiaoJieJie implements Girl{
}

正确的：

class XiaoJieJie implements Girl{
    name = '小红';
    age = 12;
    bust= 90;
    say(){
        return '你好'
    }
}
console.log(XiaoJieJie)

接口继承接口

重点：

• interface...extends；
• function里面的约束定型改为新接口名；
• 新的对象里面除了原接口约束的属性，也要把新的属性加上。

interface Teacher extends Girl {
    teach():string;
}

const getResume2 = (girl: Teacher) => {
    ...
    girl.teach();
}

const girl2 = {
    ... // girl的所有属性
    teach(){
        return 'hello';
    }
}

getResume2(girl2);

自我总结

接口更像是一种约束，约束用户的对象的属性类型。

类

继承与重写

class Lady {
    content = 'hello world!';
    sayHello () {
        return this.content
    };
}

class XiaoJieJie extends Lady {
    sayLove () {
        return 'I love you.'
    };
    sayHello () {
        return super.sayHello() + ' 你好！';
    }
}

JAVA中类的继承

class Animal{
    public void move(){
        System.out.println("动物可以移动");
    }
}
  
class Dog extends Animal{
    @Override // 表示方法重写
    public void move(){
        super.move(); // 引用父类的方法
        System.out.println("狗可以跑和走");
    }
}

区别：

• java中要用到@Override标签

@Override标签的作用与好处

• 它是伪代码，表示方法重写
• 作为注释，帮助检查是否正确复写了父类中已有的方法
• 编译器可以验证该方法是否在父类中已有
• 非必填。如果没写@Override，方法名与父类一模一样，如果返回类型相同，视为重写，反之，视为新方法

访问类型

public

默认就是它

private

私有，只有自己能用。

class Lady {
    private content = 'hello world!';
    private privateFn () {
        return 'private' + this.content; // 能用
    };
}
class XiaoJieJie extends Lady {
    privateFn() { // 编译不通过
        return 'e';
    };
}
console.log(new Lady().privateFn()); // 编译不通过

protected

受保护，只能在自己及子类用。

class Lady {
    protected protectedFn () {
        return 'protected';
    };
}

class XiaoJieJie extends Lady {
    protectedFn () {
        return 'xj';
    }
}

console.log(new Lady().protectedFn()); // 编译不通过

对比表

类型	public	protected	private
自己（父类）	✓	✓	✓
继承（子类）	✓	×	×
外部（new Class().fun()）	✓	✓	×

附：JAVA异同表

类型	public	protected	private
自己（父类）	✓	✓	✓
继承（子类）	✓	✓	×
外部（new Class().fun()）	✓	×	×

构造函数

构造函数及继承

class People {
    constructor (public name: string,public sex:string) {
        this.name = name;
        this.sex = sex;
    }
}

class Teacher extends People {
    constructor (public age:number){
        super('小明','女');
    }
}

var people = new People('小红','女');
console.log(people.name)

var teacher = new Teacher(19);
console.log(teacher,teacher.age);

ES6实现对比：

class People {
    constructor (name,sex) {
        this.name = name;
        this.sex = sex;
    }
}

class Teacher extends People {
    constructor (name,sex,age){
        super(name,sex);
        this.age = age;
    }
}

var people = new People('小红','女');
console.log(people.name)

var teacher = new Teacher('小明','女',19);
console.log(teacher,teacher.age);

JAVA实现对比：

class People {
    public String name;
    public int sex;
    public People (String name){System.out.println(name)};
    public People (int sex ){};
    public People (Stirng name, int sex){}
    public People (){}
}

public class Teacher extends People {
...
}

get和set

class XiaoJieJie {
    constructor(private _age:number,private _name: string){
    }
    get age(){
        return this._age-2;
    };
    set age(age:number){
        this._age = age;
    }
    get name(){
        return this._name+'人';
    };
    set name(name:string){
        this._name = name;
    }
}

const xj =  new XiaoJieJie(18,'小明');
console.log(xj,xj.age); // XiaoJieJie { _age: 18, _name: '小明' } 16

编译如果无法通过需要加上es5：

tsc demo.ts -t es5
node demo.js

java中

class Stutent1{
    private String name;
    private int age;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
    public void showStu1(){
        System.out.println("学生叫做"+name+",年龄"+age);
    }
}

static装饰符

不用new新建就可以创建

class Girl {
    static sayLove(){
        return '你好';
    }
}

console.log(Girl.sayLove());

不用new Girl()就可以调用方法了。

只读属性readonly

class XiaoJieJie {
    constructor(private readonly _age:number,private _name: string){
    }
    get age(){
        return this._age-2;
    }
    set age(age:number){ // 报错
        this._age = age;
    }
    get name(){
        return this._name+'人';
    };
    set name(name:string){
        this._name = name;
    }
}

const xj =  new XiaoJieJie(18,'小明');
xj.name = '小红';
xj.age = 33; // 报错
console.log(xj,xj.age);

抽象类

不加abstract时

特点：

• 普通的类继承
• 普通的重写
• 可以调用父类

class Girl {
    skill(){
        conso.log('skill)
    }
}

class Girl1 extends Girl {
    skill(){
        console.log('cooking');
    }
}

class Girl2 extends Girl {
    skill(){
        console.log('make cloths')
    }
}

class Girl3 extends Girl {
    skill(){
        console.log('do gardening')
    }
}

console.log(new Girl1().skill())
console.log(new Girl2().skill())
console.log(new Girl3().skill())
console.log(new Girl().skill())

加abstract关键字时

特点：

• 不能调用父类
• abstract方法不能有具体实现内容

abstract class Girl {
    abstract skill()
}

class Girl1 extends Girl {
    skill(){
        console.log('cooking');
    }
}

class Girl2 extends Girl {
    skill(){
        console.log('make cloths')
    }
}

class Girl3 extends Girl {
    skill(){
        console.log('do gardening')
    }
}

console.log(new Girl1().skill())
console.log(new Girl2().skill())
console.log(new Girl3().skill())

区别：写了abstract关键字就是抽象类，如果不加，就是重写（Override），也视为多态。

多态

多态是同一个行为具有多个不同表现形式或形态的能力。
比如打印机有打印方法，彩色打印机类打印方法是彩色，黑色打印机类打印方法是黑色。

java中多态的实现方式

• 方式一：重写
• 方式二：接口
• 方式三：抽象类和抽象方法

abstract class Animal {  
    abstract void eat();  
}  
  
class Cat extends Animal {  
    public void eat() {  
        System.out.println("吃鱼");  
    }  
    public void work() {  
        System.out.println("抓老鼠");  
    }  
}  
  
class Dog extends Animal {  
    public void eat() {  
        System.out.println("吃骨头");  
    }  
    public void work() {  
        System.out.println("看家");  
    }  
}

其它：写了abstract关键字就是抽象类，如果不加，就是重写（Override），也视为多态。

配置项

tsconfig.json配置文件

该配置文件通过tsc --init命令行来生成。

include、exclude、files

include属性是用来指定要编译的文件

{
  "include":["demo.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}