TypeScript入门学习

TypeScript

一、TypeScript基础入门

类型检查

• ts对变量的声明增加了检查

  • 类型设置可以规范变量的类型，当赋值值的类型与预设不匹配时会报错

  • 在预设变量类型的同时对其进行赋值

  • 如果变量的声明与赋值时同时的，ts会自动为变量进行类型检测

  • 类型检验同样适用于方法参数与返回值（常规与箭头函数）

类型

• number：任意数字

• string：任意字符串

• boolean：布尔值true或false

• 字面量：限制变量的值就是该字面量的值

• any和unknown

  • any：任意类型(或者说是关闭ts的类型检查)--不安全

    • any类型变量可以赋值给任意类型的变量，但是这会破坏预设的原有类型

  • unknown：类型安全的任意类型

    • unknown类型的变量不能直接赋值给其他变量，如果需要赋值必须通过类型断言

• void：空(undefined)

  • 通常用在返回空的函数方法

• never：没有值，且不能是任何值

  • 通常用于抛出错误的函数方法

• object：一个js对象

  • js对象既包括传统意义上的对象也包括函数方法，但直接写object太过于抽象难以直述出需求，因此不推荐直接写：object

  • 推荐写法(对象)：

    • 属性：类型—(表示对象必须包含该属性，且该属性的类型是被预设的)

    • 属性？：类型—(表示对象可以选择是否包含该属性，且该属性的类型是被预设的)

    • [属性:类型] : 类型—(表示任意类型的属性)

  • 推荐写法(函数):

    • 箭头函数(形参：类型，形参：类型...)=>返回值：类型

• 数组

  • 语法：

    • 变量:类型[]

    • 变量:Array<类型>

• 元组【长度固定的数组】

  • 语法：

    • 变量:[类型，类型，类型...]

• enum：枚举

  • enum就是创建一个枚举类，该枚举类中含有所有可能的结果值

  • 语法：

    • 定义一个枚举： enum 枚举名{枚举值1，枚举值2，....}

    • 使用一个枚举值： i ：枚举名.枚举值

类型判断技巧

• 类型断言：适用于对赋值的判断、或者将unknown类型的值赋值给其他变量等场景

  • 语法：

    • 变量 as 类型

    • <类型> 变量

• 或语法：|

  • 作用：放宽一个变量的类型检测，当期符合预设中任一即可通过检测

  • 语法：

  • ：类型|类型|类型.... / 字面量|字面量|字面量.... / 类型|字面量|...

  • 例子：

• 类型起别名：

  • 作用：给自定义的类型起一个别名，便于复用

  • 语法：

    • type 别名 = 类型...

ts编译器配置文件—tsconfig.json

概念

• tsconfig.json是ts编译器的配置文件，ts编译器可以根据其中的配置信息对代码进行编译

使用方法

• 创建：在根目录下新建一个tsconfig.json文件，并按需对其进行配置的编写已达到目的效果

• 使用：在cmd中调用命令行’tsc‘即默认启用tsconfig.json

配置选项

• "include":用来指定哪些ts文件需要被编译

  • 路径：

    "./src/ ** / * "—表示src下的任意文件夹任意文件

    1. ** 表示任意目录

    2. *表示任意文件

• "exclude"：不需要被编译的文件目录

• 默认值：["node_modules","bower_components","jspm_packages"]

• "extends"：继承某个json文件中的配置

• "files"：指定需要被编译的文件(详细到文件名)，不常用，仅适用于小型项目

• "compilerOptions":编译器的选项

  编译选项是配置文件中非常重要且复杂的配置选项

  • target:用来指定ts被编译的es版本

  • module：指定要使用的模块化规范

  • lib：指定项目中要使用的库

    • 默认值：target 为 es5 时: ["dom", "es5", "scripthost"] 、target 为 es6 时: ["dom", "es6", "dom.iterable", "scripthost"]

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

  • outFile：将编译后的代码合并为一个文件

    • 注意：合并文件对module模块有要求

  • allowJs：是否对ts预设编译目录里的js文件进行编译，默认false

  • checkJs：是否对预编译目录里的js文件进行ts语法检查，默认false

  • removeComments：编译过程是否移除注释，默认false

  • noEmit：不生成编译后的文件。默认false

  • noEmitOnError：当有错误时不生成编译后的文件，比如当ts文件中出现检查错误时就不生成js文件。默认false

  • strict:所有严格检查的总开关

    设置为true，则下列所有属性为true{即启动所有严格检查}，反之为false

    • alwaysStrict：用来设置编译后的文件是否使用严格模式，默认fasle

    • noImplicitAny：是否不允许隐式的any类型，比如直接let a;这就声明了一个隐式any。默认false

    • noImplicitThis：是否不允许不明确类型的this。默认false

    • strictNullChecks：是否严格的检查空值。默认false

二、webpack打包ts

关于webpack基础配置可以看webpack的文档，这里只针对ts展开

配置处理ts资源

自动生成应用webpack导出js文件的html页面

• 安装html-webpack-plugin插件

• 在webpack.config.json中引入

• 在plugin中使用该插件

• 运行webpack打包命令就会自动生成相应页面

• 关于new HtmlWebPackPlugin()

  • 调用该方法是其有一个可选参数，是一个配置对象option。这个参数有title--生成页面的title 、template--指定相应页面为模板等属性

使用内置服务器，保持热刷新功能———webpack-dev-server

• 如果希望一边编写ts文件，浏览器的预览一边热刷新的话可以使用webpack-dev-server插件

  1. 安装对应插件webpack-dev-server

  2. package.json中配置对应语句

执行前清空原有dist内文件，保证文件最新 ——— clean-webpack-plugin

• 为防止出错，每次进行webpack打包最好是清空dist中之前打包的文件。

  1. 安装插件clean-webpack-plugin

  2. 引入{CleanWebpackPlugin}

  3. webpack.config.json中plugins配置相关信息

配置引用模块resolve

适配不同版本浏览器--babel

1. 安装 @babel/core @babel/preset-env babel-loader core-js

1. 在webpack.config.js中配置rules，让以.ts结尾的文件经过babel的处理(注意执行顺序，.ts文件应该要先经过ts-loader编译为js文件再经过babel适配到不同浏览器)

三、面向对象

类-class

• 定义一个类：

  • 语法： class XXX{ 属性、方法... }

• 属性与方法(静态属性与实例属性)

  • 属性：

    • 语法：[static] 属性名[:类型] = [属性值]

    • 属性分为实例属性与静态属性，访问实例属性需要通过具体实例对象，而访问类方法只能通过类

  • 方法：

    • 语法：方法名(){方法体}

    • 方法分为实例方法与静态方法，调用实例方法需要通过具体实例对象，而调用类方法(静态)则只能通过类

• 关键字：readonly

  • 在属性或方法的声明之前(如果是静态则在static之后)写readonly能让类的属性或方法变得只读，无法被修改

• 构造函数：constructor()

  • 类似java中的构造函数

• 继承：extends

  • 语法：class B extends A{ .... }

  • 子类有父类的属性与函数方法(包括构造方法)，同时子类还可以重写父类中的方法。类似于java

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

  • 当子类重写构造函数时，必须保证在子类的构造函数中调用父类的构造函数，目的是确定继承的完整性

• 抽象类 abstract

  • 语法：abstract class A{....}

  • 作用：抽象类只能用于被继承，无法被实例化

• 抽象方法：abstract xxxx()

  • 抽象方法用abstract开头，没有方法体

  • 当子类继承抽象类后，必须对其中的抽象方法进行重写

• 接口：interface

  • 语法：interface xxx{ ... }

  • 实现接口：class A implements xxx{....}

  • 接口只定义对象的结构，而不考虑其实际值。在接口中的所有属性和方法都是抽象的，不能有实际值

• 封装属性

  • 定义：在TS中，为了保证类的安全，我们在声明类中属性时可以在前追加修饰符---public、protected、private

    • public：默认。公开，所有环境都可以直接访问与修改该属性值

    • protected：仅有父类以及其子类可以直接访问与修改该属性值

    • private：仅有类本身可以访问，修改通常需要通过getter/setter方法

  • 在TS中我们可以给属性定义getter/setter方法来完善对其属性值的修改，比如修改年龄age，我们可以通过setter方法来判定修改的值是否大于0才允许修改

• 泛型：代指不确定的类型或多个类型

  • 在定义类或函数时，如果遇到类型不明确的就可以使用泛型

  • 语法： function 方法名<T>(参数：T)：T{...}

  • 调用：

    • 自动检测类型

    • 主动设置类型

  • 多个泛型方法

  • 泛型还可以继承 ,比如说 function fn4<T extends myClass>(a:T):T{ .... }

    • 其中myClass是我自定的类，这里的泛型需要是myClass的实现类、子类....