js：弱类型语言，动态类型，容易出错，维护成本较高
ts: 微软创建的，以js为基础构建的语言。
- js的超集，引入类型的概念，变量类型更明确
- 可以在任何支持js的平台中执行。
- ts不能被js解析器直接执行。ts需要编译成js
Typescript增加了什么？
- 类型
- 支持es的新特性
- es不具备的新特性
- 丰富的配置选项
- 强大的开发工具
TS开发环境搭建
- 下载安装node.js
- 可使用npm(包管理器)安装typescript
- 创建ts文件并使用tsc进行编译 (ts可以编译成任何一个版本的es.)
tsc 01_hello.ts -> 生成一个js文件
类型
- number
- string
- boolean
- any (any类型的变量可以赋给任意变量)
- unknown (unknown 未知类型变量，不可直接赋给其他变量)
- void
- never
function test(): never {
throw new Error('error)
}
- object
{} 用来指定对象中可以包含哪些属性
语法： {属性名： 属性值}
在属性名后面加上？， 表示属性是可选的
[propName: string]: any 表示任意类型的属性
- array
数组的类型声明： 类型[], array<类型>
- tuple
元组tuple： 长度固定的数组,
语法：[类型，类型]
let a: [string, string]
- enum
enum: enum Gender: {male = 0, femal= 1}
- 字面量（限制变量的值）
let a : 10
类型断言
可以用来告诉解析器变量的实际类型
变量 as 类型
<类型> 变量
设置函数结构的类型声明 （形参：类型，形参：类型）=> 返回值
类型别名： type myType = 1|2|3；let a : myType;
编译选项
ts不能被js解析器直接执行，因此需要编译成js文件，可以执行以下命令进行编译。
tsc xxx.ts //编译成js文件
tsc xxx.ts -w //热编译，文件发生改变，自动重新编译
若有多个ts文件需要编译，可以新建一个ts编译器配置文件tsconfig.json,ts编译器可以根据它的信息来对代码进行编译，然后执行tsc/tsc -w
tsconfig.json 配置参数
“include”： 指定哪些文件需要被编译
“exclude”: 不需要被编译的文件
"extends": 继承其他配置文件
"files": 编译文件列表
"compilerOptions": 编译选项
"compilerOptions": {
// target 用来指定被编译成的ts版本
"target": "es6",
// module 指定要使用的模块化的规范
"module": "system",
// lib 用来指定项目中要使用的库
"lib": ["DOM","ES6"],
// outDir: 用来指定编译后文件所在的目录
"outDir": "./dist",
// outFile: 将全局作用域的代码合并为一个文件
"outFile": "./dist/app.js"
// allowJs 是否对js进行编译
"allowJs": true,
// checkJs 是否检查js代码符合语法规范， 默认为false
"checkJs": true,
// removeComments 是否移除注释
"removeComments": true,
// noEmit 不生成编译后文件
"noEmit": false,
// noEmitOnError 当有错误时不生成编译后的文件
"noEmitOnError": true,
// alwaysStrict 设置编译后的文件是否使用严格模式
"alwaysStrict": true,
// noImplicitAny 不允许隐式any类型
"noImplicitAny": true,
// noImplicitThis 不允许不明确类型的this
"noImplicitThis": true,
// strictNullChecks 严格的检查空值
"strictNullChecks": false
}
webpack
- npm init -y //生成一个package.json
- npm i - D webpack webpack-cli typescript ts-loader
- 创建一个webpack.config.json文件
// webpack.config.json
// 引入一个包
const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { resolve } = require('path');
// webpack中所有的配置信息都应该写在module.exports中
module.exports = {
// 指定入口文件
entry: "./src/index.ts",
// 指定打包文件所在的目录
output: {
// 指定打包文件的目录
path: path.resolve(__dirname, 'dist'),
// 打包后文件名
filename: 'bundle.js'
},
// 指定webpack打包时要用的模块
module: {
// 指定要加载的规则
rules: [
{
// 指定规则生效的文件
test: /\.ts$/,
// 使用的loader
use: [
// 配置babel,可以解决不同版本兼容性问题
{
// 指定加载器
loader: 'babel-loader',
options: {
// 设置预定义的环境
presets: [
["@babel/preset-env",
{
// 要兼容的目标浏览器
targets: { "chrome": 58 },
"corejs": "3",
// 使用core.js的方式 “usage” 表示按需加载
"useBuiltIns": "usage"
}
]
]
}
},
'ts-loader'
],
// 要排除的文件
exclude: /node_modules/
}
]
},
// 配置webpack插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
title: 'hello'
})
],
//用来设置引用模块
resolve: {
extensions: ['.ts', '.js']
}
}
类
-
直接定义的属性是实例属性，需要通过对象的实例去访问
Class Person { name: string = 'hello'; } const per = new Person(); per.name -
使用static定义的属性是静态属性，可以直接通过类去访问
Class Person { static age: number = 18; } Person.age readonly 定义只读属性
构造函数会在对象创建时调用
在实例方法中，this表示当前实例。在构造函数中, 当前对象就是当前新建的那个对象
继承
- 使用继承后， 子类会拥有父类所有的方法和属性
- 通过继承可以将多个类中共有的代码写在一个父类中。
- 如果希望子类中添加一些父类中没有的属性或方法，添加在子类中即可
- 如果在子类中添加和父类相同的方法，则子类方法会覆盖父类方法， 称为重写
- super: 在子类的方法中使用super则表示使用当前父类， 如果在子类写了构造函数，必须调用父类构造函数 super()
抽象类
- 用abstract声明， 不能用来创建对象，专门用来被继承的类
- 抽象方法没有方法体，只能定义在抽象类
- 抽象类中可以有抽象方法，也可以有实际方法
接口
定义一个类结构,用来定义一个类中包含哪些属性和方法，同时接口也可以当成类型声明去使用
可以在定义类的时候去限制类的结构
接口中所有的方法都是抽象方法
接口中所有的属性都不能有实际的值
-
接口只定义对象的结构，不考虑实际的值
interface myInterface { name: string, age: number }
封装
- public 修饰的属性可以在任意位置访问并修改
private 修饰的属性只能在类内部进行访问并修改
- 通过在类中添加方法使得私有属性可以被外部访问
protected 只能在当前类和当前类的子类访问 - getter, setter称为属性的存取器
泛型
在定义函数或类时，如果遇到类型不明确的时候就使用泛型
function fn<T, K>(a:T, b:K): T{}
