[TypeScript语法测试] 包括安装、tsconfig配置及代码测试

简单搭建了ts编译环境，整理下ts的语法；如果有java或者c#基础的；直接上项目也没问题的。有基础的话建议看看理解一下。

1 安装过程

（1）新建目录，然后在根目录下打开终端 输入命令 npm install -g typescript;

（2）安装好ts 后输入tsc -V 如果可以查看到ts的版本则说明安装成功

（3）输入命令 tsc --init 会在根目录下生成一个tsconfig.json配置文件

（4）打开配置文件，修改 outDir（输出文件夹，即编译后生成的.js存放的目录） 和 rootDir（输入文件夹，即ts存放的目录）两项

（5）运行tsc -w 即开启了监视，只要rootDir配置文件路径下面的 ts文件一发生改变 则会自动编译成.js文件存放到outDir配置的文件的文件夹下面;

2 工程目录

通过上述过程后，整个目录就一个.tsconfig文件；然后可以新建一个.ts文件；这里我们将输出目录修改为 "outDir": "./built"；

    "outDir": "./built",

其次输入命令tsc -w;即可开启监视；将我们的ts代码转换为js；下面是测试目录

如图有10个ts文件，运行完监听命令后；修改其中任何一个ts文件，保存后都会重新转换成js

3 语法解释

将几种语法做了简单测试，主要有下面几个部分

3.1 变量定义

  let 变量名:变量类型=值；

let flag:boolean=true;
let num:number=123

3.2 函数定义

(1) 常规函数:所有参数必须传

function fn(参数1:参数类型,参数2:参数类型):函数返回值类型{

}

// 常规函数:必选参数
function getInfo(name:string,age:number):string{
    return `${name}---${age}`;
}
getInfo("xiaobai",5); // 正确

(2) 常规函数:可选参数

function fn(参数1:参数类型,参数2?:参数类型):函数返回值类型{

}

function getInfo1(name:string,age?:number):string{
    return `${name}---${age}`;
}
getInfo1("xiaobai",5); // 正确
getInfo1("xiaobai");// 正确

(3) 常规函数:默认参数

function fn(参数1:参数类型,参数2=值):函数返回值类型{

}

function getInfo2(name:string,age:number=33):string{
    return `${name}---${age}`;
}
getInfo2("xiaobai",5); // 正确

（4）常规函数:无返回值

function fn(参数1:参数类型,参数2:值):void{

}

function getInfo3(name:string,age:number):void{
    console.log(`${name}---${age}`);
}
getInfo3("xiaobai",5); // 正确

（5）剩余参数

function fn(...参数:数组元素类型[]):返回值类型{

}

function sum(...result: number[]): number {
    let sum = 0;
    for (let i = 0; i < result.length; i++) {
        sum += result[i];
    }
    return sum;
}
console.log(sum(1, 2, 3, 4, 5, 6));

还有一种带初始值的;如下 

function sum1(init:number,...result: number[]): number {
    let sum = 0;
    for (let i = 0; i < result.length; i++) {
        sum += result[i];
    }
    return sum;
}
console.log(sum(100,1, 2, 3, 4, 5, 6));

(6) 重载函数:

函数名称一样，参数个数不一样；调用哪一个取决于调用函数时传的参数个数

// 重载函数声明 
function czFn(name: string): string;
function czFn(name: string, age: number): string;

// 重载函数定义
function czFn(name: string, age?: string | number): string {
    if (age) {
        return "小白" + name + "，年龄：" + age;
    } else {

        return "小白" + name;
    }
}
czFn("zhangsan") // 正确
czFn("lisi", 20) // 正确

3.3 定义类

class 类名{

        访问修饰符 属性名:属性类型;

        constructor(参数名:参数类型){

                

        }

        访问修饰符 fn():返回值{

        }

}

// 定义类
class Person {
    public name: string;
    constructor(n: string) { 
        this.name = n;
    }
    public run(): void {
        console.log(this.name+ "在跑步");
    }
}

var p = new Person("xiaobai");
p.run();

3.4 类继承

子类继承父类:通过extends关键字和super方法实现；

// 父类
class Person1 {
    name: string;
    constructor(n: string) {
        this.name = n;
    }
    run(): void {
        console.log(this.name + "在跑步");
    }
}
// 子类
class Chinese extends Person1 {
    age: number;
    constructor(n: string, a: number) {
        super(n); // 使用super关键字调用父类中的构造方法
        this.age = a; 
    }
    speak(): void {
        super.run(); // 使用super关键字调用父类中的方法
        console.log(this.name + "说中文");
    }
}

var c = new Chinese("xiaobai", 5);
c.speak();

3.5 访问修饰符

访问修饰符在类继承的时候，用来设置属性和函数的访问范围

// public：公有类型，在当前类里面、子类、类外面都可以访问

// protected：保护类型，在当前类里面、子类里面可以访问，在类外部没法访问

// private：私有类型，在当前类里面可以访问，子类、类外部都没法访问

class Person2 {
    public name: string;
    protected age: number;
    private sex: string;
    constructor(n: string,a:number,s:string) {
        this.name = n;
        this.age = a;
        this.sex = s;
    }
    run(): void {
        console.log(this.name + "在跑步");
    }
}

var p2:Person2=new Person2("xiaobai",5,"男");
console.log(p2.name);  // 可访问
console.log(p2.age);   // 不可访问
console.log(p2.sex);   // 不可访问

 3.6 静态修饰符

通过静态修饰符 修饰的属性或者方法，在类外面可以直接使用类名称调用

class Person3 {
    public name: string;
    static age:number=12;
   
    constructor(n: string) {
        this.name = n;
    }
    run(): void {
        console.log(this.name + "在跑步");
    }
    static getAge():void{
        console.log("年龄是",Person3.age);
    }
}
Person3.age // 12
Person3.getAge // 年龄是12
var p3:Person3=new Person3("xiaobai");
p3.run() // 小白在跑步

3.7  抽象类

 抽象类，只能被继承，不能被实例化(new)；用abstract声明

// 抽象类，只能被继承，不能被实例化(new)
abstract class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    run() {
        console.log(this.name + "会跑")
    }
}


class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }
}
var d: Dog = new Dog("巴哥");
d.run();



class Cat extends Animal {
    constructor(name: string) {
        super(name);
    }
}
var cat: Cat = new Cat("花猫");
cat.run();

作用：我们可以在抽象类中定义好属性和方法，供派生类中使用

抽象类的多态性:

特点：相同的方法名，可以定义不同的方法主体；
使用方式:在抽象类中声明方法名,不实现方法体；每个派生类中可以自己去实现方法体；

// 多态：抽象类中声明一个共用方法；在不同的子类中分别定义实现
// 抽象类
abstract class Animal1 {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    abstract eat(): any; 
    run() {
        console.log(this.name + "会跑")
    }
}

// Dog1类
class Dog1 extends Animal1 {
    constructor(name: string) {
        super(name);
    }
    eat(): any { 
        console.log(this.name + "吃骨头");
    }
}
var d1: Animal1 = new Dog1("狗");
d1.eat();

// Cat1类
class Cat1 extends Animal1 {
    constructor(name: string) {
        super(name);
    }
    eat(): any {
        console.log(this.name + "吃老鼠");
    }
}

var c1: Animal1 = new Cat1("猫");
c1.eat();

3.8 接口类

特点:只负责定义方法和属性，不实现；
跟抽象类区别：接口类定义的方法和属性必须在子类中全部给他实现喽；如果派生类中漏实现一个是会报错的；所以接口类他定义的是一套规范；比如一个人体接口类；定义了基本的四肢和七窍；如果你少实现一个是会出问题的；

// 接口类:接口定义的事规范和约束；就是接口类中定义的属性和方法，在继承类中必须全部实现；如果缺项会报错
interface Animal2 {
    name: string;
    eat(str: string): void;
}

class Dog2 implements Animal2 {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat() {
        console.log(this.name + "吃骨头");
    }
}

var d2 = new Dog2("狗");
d2.eat();

class Cat2 implements Animal2 {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat(food: string) {
        console.log(this.name + "吃" + food);
    }
}
var c2 = new Cat2("猫");
c2.eat("鼠");