【ts】基础知识要点

参照blibli中【尚硅谷TypeScript教程】视频：链接

 结合另一个视频教程中的ts部分：链接

P02、TS环境搭建

1、下载并安装node.js

2、使用npm全局安装ts：【npm i -g typescript】

查看是否安装成功，可以用【tsc -V】查看它的版本。

3、手动编译ts文件：先进入ts文件所在的文件夹，然后执行命令：【tsc xxx.ts】编译过后会生成一个同名的js文件。

注：如果想每次修改过ts文件保存后自动编译，可以执行命令：【tsc xxx.ts -w】“-w”表示监听。

可以用【tsc --init】生成 tsconfig.json 文件。

P03-P05、类型声明

代码举例：

 

 

P06-P09、编译选项

如果想编译文件夹中所有的ts文件，需要先在文件夹中新建一个 tsconfig.json 文件，然后命令行执行【tsc】即可。【tsc -w】监视所有ts文件。

tsconfig.json 文件配置选项：

P10-P12、使用webpack打包ts

1、在命令行输入【npm init -y】即可在项目中生成 package.json 文件。

2、在命令行输入【npm i -D webpack webpack-cli typescript ts-loader】

3、新建 webpack.config.js 文件：

const path = require('path');

module.exports = {
    entry: "./src/index.ts",//指定入口文件
    // 指定打包文件的目录
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-load',
                exclude: /node_modules/
            }
        ]
    }
}

4、新建 tsconfig.json 文件：

{
    "compilerOptions": {
        "target": "ES6",
        // "module": "es2015",
        "strict": true, //所有严格检查的总开关
    }
}

5、修改 package.json文件：（添加build那一行）

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
},

6、在命令行输入【npm run build】即可实现打包。

P14-P18、类的介绍

构造函数 constructor
继承 extends
抽象类 abstract

(function () {
    //父类
    //添加abstract，表示抽象类，只是不能用来创建实例对象，它专门用来被继承
    //抽象类中可以添加抽象方法
    abstract class Animal {
        name: string;

        //构造函数
        constructor(name: string) {
            console.log("Animal--构造函数---");
            this.name = name;
        }

        //  sayHello() {
        //     console.log("Animal,hello---");
        // }

        // 抽象方法,该方法没有方法体，子类必须对抽象方法进行重写
        abstract sayHello(): void
    }

    // const animal=new Animal()//报错
    //子类
    class Dog extends Animal {
        age: number;

        constructor(name: string, age: number) {
            super(name)
            this.age = age;
        }

        sayHello() {
            console.log("dog,hello---");
        }
    }

    const dog = new Dog('旺财', 2);
    dog.sayHello()

})()

P19、接口 interface

(function () {
    //描述一个对象的类型
    type myType = {
        name: string,
        age: number,
    };
    // type myType = {}//同名会报错

    const obj: myType = {
        name: 'qing',
        age: 2,
    }

    //定义接口,定义一个类结构，接口也可以当做类型声明
    interface myInterface {
        name: string;
        age: number;
    }
    interface myInterface {//同名接口不会报错,相当于合并接口
        gender: string
    }
    const obj2: myInterface = {
        name: 'qing',
        age: 2,
        gender: '男'
    }

    //在接口中，所有方法都是抽象方法
    interface myInter {
        name: string;
        sayHello(): void
    }

    class MyClass implements myInter {
        name: string;

        constructor(name: string) {
            this.name = name;
        }
        sayHello() {
            console.log("hello---");
        }
    }
})()

P20、属性的封装

属性的修饰符 public、private、protected

(function () {
    class Person {
        public name: string;//默认是 public
        private age: number;//private表示私有属性，可以在类中添加方法使私有属性被外部访问

        constructor(name: string, age: number) {
            this.name = name;
            this.age = age;
        }

        sayHello() {
            console.log("hello---");
        }

        //getter\setter他们被称为属性的存取器
        getAge() {
            return this.age
        }
        setAge(value) {
            if (value > 0) {
                this.age = value
            }
        }

    }

    const per = new Person('qing', 18)
    per.name = 'qingqing';
    // per.age = 20;//会报错
    // per.setAge(-20)
    per.setAge(20)
    console.log("per---", per, per.getAge());


    class A {
        // protected num: number;//protected 只能在当前类和当前类的子类中访问
        // constructor(num: number) { this.num = num; }

        constructor(protected num: number) { }//这一行等价于上面的两行
    }
    class B extends A {
        test() {
            console.log('b中的num-------', this.num)
        }
    }
    const b = new B(18)
    // b.num = 20;//会报错
    b.test()
    console.log("b---", b);

})()