npm i -g typescript
tsc
.ts -> .js
javascript 的超集，js的升级版
1、类型声明
let 变量：类型A | 类型B（联合类型）
let c:boolean = true
function sum(a:number,b:number):number{
return a+b
}
2、ts中的类型
number,string,boolean
字面量 let a:10 | 11
any 声明变量如果不指定类型，ts解析器则会自动判断变量的类型为any(隐式的any)，一般不建议，可以赋值给任意变量
unknown 表示未知类型的值 unknown就是一个类型安全的any，不能直接赋值给其它变量
s = e as string 类型断言：可以用来告诉解析器变量的实际类型
s = <string>e
void,never 函数的返回值
void:用来表示空，表示没有返回值的函数
never:表示永远不会返回结果
function fn():never{
throw new Error('报错了！')
}
object 对象
a = {} a = function(){}
let c = {name:string,[propName:string]:any} 表示任意类型的属性
let d : (a:number,b:number) => number
array let f:number[] let g:Array<number>
tuple 元组 就是固定长度的数组 let h:[string,number]
enum 枚举 let i:{name:string,gender:Gender.male}
enum Genfer {
male:0,
female:1
}
let j:{name:string} & {age:number}
3、编译选项
tsc app.ts -w 监视模式 只对当前文件
tscconfig.json 是ts编译器的配置文件，对全局ts文件进行编译 tsc 或者 tsc -w
{
include:['./src/**/*'], 任意目录的任意文件 /** 任意目录 /* 任意文件
exclude:['./src/hello/**/*'], 不需要被编译的
extends:'', 定义被继承的配置文件
files:'',指定被编译文件的列表，只有被编译的文件少时才会用到
compilerOptions:{//编译选项
target:ES3, //默认转换成es3,指定被编译的ES版本
module:'commonjs',指定要使用的模块化的规范
lib:[],指定项目中要用到的库
outDir:'',//指定编译后的文件所在目录
outFile:'',//将代码合并成一个文件
allowJs:false,//是否对js文件进行编译
checkJs:false,//是否检查js代码是否符合规范
removeComments:false,//是否移除注释
noEmit:true,//不生成编译后的文件，只检查语法，不生成js文件
noEmitOnError:false,//当有错误时，不生成编译文件
alwaysStrict:false,//用来设置编译后的文件是否启用严格模式
noImplicitAny:true,//不允许隐式的any类型
noImplicitThis:false,//不允许不明类型的this
strictNullChecks:false,//严格检查空值
strict:false,//所有严格检查的总开关
}
}
4、webpack 打包 ts代码
cnpm i -D webpack webpack-cli typescript ts-loader
webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'./src/index.ts',//入口文件
output:{
path:path.resolve(__dirname,'dist'),//指定打包文件的目录
filename:'bundle.js',//打包后文件的文件
environment:{//告诉webpack不使用箭头函数
arrowFunction:false
}
}，
module:{//指定打包时使用模块
rules:[{
test:/\.ts$/,//指定的是规则生效的文件
use:[{
loader:'babel-loader',
options:{
presets:[
[
'@babel/preset-env',
{
targets:{
"chrome":'88',
ie:'11'
},
'corejs':'3',
useBuiltIns:'usage',//表示按需加载
}
]
]
}
},'ts-loader']，//要使用的loader
exclude:/node_modules/,要排除的文件
},]
},
plugins:[
new htmlWebpackPlugin({
title:'这是',
template:'./src/index.html'
})
],
resolve:{//用来设置引用模块
extensions:['.ts','.js']
}
}
cnpm i -D html-webpack-plugin //html
cnpm i -D webpack-dev-server //实时响应
cnpm i -D clean-webpack-plugin //清空dist
cnpm i -D @babel/core @babel/preset-env babel-loader core-js //babel
5、面向对象和类
OA，一切操作都要通过对象，就是所谓的面向对象
类包含两部分，属性和方法
class Person {
name:string='hello'
//加static是类方法，静态方法，不加就是就是对象方法
static sayHello(){
console.log('大家好')
}
}
const per = new Person()
Person.sayHello()
6、构造函数和this
constructor(){
console.log(this) //谁调用就指向谁
} 构造函数会在对象创建时调用
7、继承
extends
//在类的方法中super表示当前类的父类
//如果在子类中写了构造函数，在子类的构造函数中必须对父类的构造函数进行调用
construtor(name,age){
super(name)
}
super()
8、抽象类
abstract 不能用来创建对象
抽象类中可以定义抽象方法,子类必须重写抽象方法
abstract sayHello():void
9、属性的封装
在属性前加修饰符
public _name:string; //public可以在任意位置访问修改
private _age:number; //私有属性，只能在类里面访问
protected num:number; //受保护的属性，只能在当前类和当前类的子类中访问
//ts中设置getter方法的方式
get name(){}
set name(){}
10、泛型
定义函数或者类时，如果遇到类型不明确就可以使用泛型
function fn<T>(a:T):T{
return a
}
function fn<T,K>(g:T,b:K):T{
}
interface Inter{
length:number
}
function fn3<T extends Inter>(g:T):[]<number>{
return g.length
}
