学习typescript的笔记

TS的编译选项

自动监视ts文件的修改的命令(仅限于当前文件)

tsc <ts文件名> -w

自动编译完成所有文件的命令

tsc （需要在文件下创建一个名字为tsconfig.json的配置文件，在tsc后面加上-w可以自动监视ts文件的修改）

 

写路径的时候*代表任意文件，**代表任意目录

 

  "include":[]用来指定哪些需要被执行编译的ts文件目录

  "exclude":[]用来指定不需要被编译的ts文件目录，默认值为["node_modules", "bower_components", "jspm_packages"]

  "extends": ""用来指定继承，类似于外部引用，

  "file":[]类似于index，但是比它更麻烦

 

    compilerOptions 编译器的选项（json）语法

   target 用来指定ts被编译为的ES版本,ESNext是ES的最新版本

    module 指定要使用的模块化规范es2015是ES6版本

    /lib 用来指定项目中要使用的库,一般不用(类似于用document.getElementById)

    outDir 用来指定编译后文件所在的目录

    outFile 将代码合并为一个文件

    设置后outFile，所有的全局作用域中的代码会合并到同一个文件中

     allowJs是否对js文件进行编译，默认是false

    checkJs 是否检查js代码是否符合语法规范

    removeComments是否移除注释

    noEmit是否不生成编译后的文件,不想去进行代码编译，只是检查语法时使用

   noEmitOnError是否在有错误时不会生成编译后文件

 

 

 

webpack打包

首先用npm init -y来初始化项目（主要是为了在项目下生成package.json文件）；然后就安装依赖（webpack、webpack-cli、typescript、ts-loader）；接着创建webpack.config.js文件，在文件中用require引入path包，用module.exports导出对象，在对象中写配置信息;

html-webpack-plugin插件作用是自动给我们生成HTML文件，但是如果添加了mode时不会自动引入生成的bundle.js文件；在plugins里用options对象来自定义配置，可以用template来指定模板

用webpack-dev-server插件时，在package.json配置start命令时，如果打开浏览器后报错找不到chrome.exe，就可以不用写--open后面的chrome.exe，按照老师配置webpack.config.js后，会运行出错，需要在webpack.config.js中增加mode配置mode: "development"，package.json需要增加"dev": "webpack --mode development"和"build": "webpack --mode production"；

clean-webpack-plugin插件是为了清理dist目录，插件的使用都是先引入插件，然后在plugins里面new就可以了；

在webpack.config.js文件里用resolve配置可以作为模块引入和使用的文件

用babel来提高兼容性，先安装@babel/core工具、@babel/preset-env（预制各种环境）、babel-loader、core-js（模拟js的运行环境，让我们老版本的浏览器可以使用新的语法）；module中rules的use配置是写在后面的先执行；

 

面向对象

一切皆是对象，程序就是对现实事物的抽象。类相当于对象的模型。直接在实例上定义的属性是实例属性，需要通过对象的实例去访问；使用static开头的属性是静态属性（类属性），可以直接通过类去访问；定义实例属性,本身是存放在实例上的，只有通过new之后可以看到；在属性前使用static关键字可以定义类属性（静态属性）。

使用继承后，子类将会拥有父类所以的方法和属性；通过继承可以将多个类中共有的代码写在一个父类中； 这样只需要写一次即可让所以的子类都同时拥有父类中的属性和方法； 如果希望在子类中添加父类中没有的属性和方法直接加就可以； 如果在子类中添加了父类相同的方法，子类的方法会覆盖掉父类的方法；这种子类覆盖掉父类方法的形式，称为方法重写。

constructor被称为构造函数，构造函数会在对象创建时调用；在实例方法中，this就表示当前的实例；在构造函数中当前对象就是当前新建的那个对象；可以通过this想新建的对象中添加属性

在类的方法中 super就表示当前类的父类

在使用继承时，如果在子类中写了构造函数，在子类构造函数中必须对父类的构造函数进行调用，用super()来调用

可以在class类前面加上abstract就表示是抽象类；抽象类和其他类区别不大，只是不能用来创建对象；抽象类是专门用来被继承的类；抽象类中可以定义抽象方法

接口就是用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法；接口可以重复命名

接口可以在对于类的时候去限制类的结构，class实现接口用implements关键字

 

在类中使用private私有修饰符编译ts文件为js文件后还是可以修改私有类的属性时，可以在tsconfig.js文件里配置noEmitOnError为true

 

TS中设置getter方法的方式（get name(){

return this。——name;}）

 

 

TS创建项目时webpack没有对css进行处理的能力，需要自己配置，首先安装less、less-loader、css-loader、style-loader 然后在webpack.config.js中配置规则；在安装postcss、postcss-loader、postcss-preset-env（浏览器预制环境）