Typescript个人笔记
# 一、数据类型
any:表示任意类型的值
unkown:表示未知类型的值
any可以直接赋值给别的类型的值
unkown不能直接赋值给其他变量,如果要进行赋值,需要进行一次判断或者使用类型断言(as)
a as number //等同于 <number>a
void:表示为空,可以函数表示没有返回值。
never: 表示永远没有值,永远。
{}可以用来指定对象中可以包含哪些属性
let a:{name:string} //表示a对象中必须有name属性且为string类型,且不能出现其他属性
let b:{name?:string} //加入问号表示该属性可有可无
let c:{name:string,[Name:string]:any} //此时表示必须有name属性且类型为String,但可以设置其他任意属性。
2
3
()=>用来设置函数结构的类型声明
let d:(a:number,b:number)=>number //这表示d必须为一个函数且只能有两个参数,参数返回值都为数字类型
数组的类型声明有两种
let f:number[]
let f:Array<number> //以上两种声明方式相同,都为只包含数字类型的数组
2
tuple(元组):表示固定长度的数组
let g:[string,string] //表示g数组只能有两个string类型的值
enum(枚举):指定所有可能情况
enum Gender{
boy=0,
girl=1
}
let h:{gender:Gender}
h={
gender:Gender.girl
} //表示h中的gender只能为Gender中的boy或者girl
2
3
4
5
6
7
8
# 二、类型的别名
如果一个类型太长,可以使用一个别名,用type定义
type myType = 1|2|3|4|5
let i:myType //即表示 let i:1|2|3|4|5
let j:myType //即表示 let j:1|2|3|4|5
2
3
# 三、TS编译选项
tsc xxx -w 监视某个文件,发现ts文件改变立即重新编译js文件
如果需要监视多个文件直接使用tsc -w 监视当前文件夹所有文件(注意需要文件夹下创建tsconfig.json这个配置文件)
# tsconfig.json配置选项
# include,exclude,exends,files
{
//include指定哪些文件需要被编译
"include": [
"./src/**/*" //**表示任意目录*表示任意文件
],
//exclude表示不需要被编译的文件
//拥有默认值node_modules,bower_components,jspm_packages
"exclude": [],
//extends表示要继承的配置文件,放的是一个配置文件
"extends": "",
//files和include差不多,是设置要编译的文件名
"files": []
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# compilerOptions编译器的选项
{
"compilerOptions": {
"target": "ES3", //用来指定编译后的ES版本
"module": "ES6", //指定要使用模块化的规范
"lib": [], //用来指定项目的库,一般不使用
"outDir": "./dist", //指定编译后的文件目录
"allowJs": false, //是否对js文件进行编译,默认为false
"checkJs": false, //是否检查js代码,默认也为fales
"removeComments": false, //是否移除注释
"noEmitOnError": false, //当有错误时不生成编译文件
}
}
2
3
4
5
6
7
8
9
10
11
12
语法检查相关选项
{
"compilerOptions": {
"alwaysStrict": false, //是否使用严格模式,默认为false
"noImplicitAny": false, //不允许隐式的any类型,默认false允许
"noImplicitThis": false, //不允许不明确的this,默认false允许
"strictNullChecks": false, //不允许空值,默认为false允许
"strict": true, //开启所有的严格检查,如上全部开启
}
}
2
3
4
5
6
7
8
9
# 四、TS和webpack相结合
# 新建文件夹执行命令
npm -i -y
npm i -D webpack webpack-cli typescript ts-loader
# 创建webpack.config.js文件配置webpack
//引入一个包
const path = 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$/, //以ts结尾的文件
//要使用的loader
use:'ts-loader',
//要排除的文件
exclude:/node-modules/
}
]
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 创建tsconfig.json配置ts编译选项
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true,
}
}
2
3
4
5
6
7
# 配置webpack的插件
执行命令
npm i -D html-webpack-plugin
webpack.config.js中写入
//引入该插件
const HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//...上面写过的配置已省略
plugins:[
new HTMLWebpackPlugin()
]
}
2
3
4
5
6
7
8
9
# 安装webpack内置服务器
执行命令
npm i -D webpack-dev-server
执行命令开启内置服务器,也可以配置scripts
webpack serve --open chrome.exe
# 编译前清空dist文件夹
执行命令
npm i -D clean-webpack-plugin
配置文件,和html插件配置方法相同
# 设置模块化
webpack.config.js中写入
module.exports = {
//...上面写过的配置已省略
resolve:{
//凡是以ts,js结尾的文件都可以作为模块使用
extensions:['.ts','.js']
}
}
2
3
4
5
6
7
# 解决兼容性问题
执行命令
npm -i -D @babel/core @babel/preset-env babel-loader core-js
webpack.config.js中配置rules
rules: [
{
//规则生效的文件
test: /\.ts$/,
//要使用的loader
use: [
//配置babel
{
//指定加载器
loader: "babel-loder",
options: {
//设置预定义的环境
presets: [
[
//指定环境插件
"@babel/preset-env",
//配置信息
{
//要兼容的目标浏览器
targets: {
"chrome": "58", //chrme 58版本
"ie": "11"
},
"corejs": "3", //corejs的版本
"useBuiltIns": "usage" //corejs加载方式,按需加载
}
]
]
}
},
'ts-loader',
],
exclude: /node-modules/
}
]
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
设置webpack打包时不使用箭头函数
output:{
//...其他配置已省略
environment:{
arrowFunction:false //不使用箭头函数
}
}
2
3
4
5
6
# 五、类(class)
# 定义属性
//使用class定义一个类
class Person{
//定义实例属性(在前加入readonly表示只读,无法修改)
name:string = 'OneWord';
//定义静态属性
static age:number = 18;
}
const per = new Person()
console.log(per.name); //OneWord
console.log(Person.age); //18
2
3
4
5
6
7
8
9
10
11
实例属性必须通过实例访问,静态属性可直接通过类访问,不能通过实例
# 定义方法
class Person{
//和属性一样,以static开头则为定义静态方法,否则为实例
static sayHELLO(){
console.log('您好')
}
}
Person.sayHELLO() //您好
2
3
4
5
6
7
# 构造函数
class Dog{
//提前定义name
name:string
//构造函数,会在对象创建时调用
//this表示创建的那个对象
//可以通过this给新建对象添加属性
constructor(name:string){
this.name = name
}
const dog = new Dog('小黑')
console.log(dog) //Dog{name:"小黑"}
2
3
4
5
6
7
8
9
10
11
# 继承extends
class A extends B{}
//让A继承B A会拥B所有方法和属性
//可以在A上添加新的属性或方法,如果和方法属性名相同,则会覆盖
2
3
super
在这里super表示当前类的父类。
class A{
name:string
constructor(name:string){
this.name = name
}
sayHELLO(){
console.log("哈哈哈");
}
}
class B extends A{
sayHELLO(){
super.sayHELLO() //super就表示A的父类B
}
}
const bb =new B("哈哈")
bb.sayHELLO()
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
在子类定义了新的属性,写入构造函数时必须调用父类构造函数,否则报错。
class A{
name:string
constructor(name:string){
this.name = name
}
}
class B extends A{
age:number;
//如果在子类中写了构造函数,必须对父类构造函数进行调用
constructor(name:string,age:number){
super(name) //调用父类构造函数
this.age = age
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
抽象类
以 abstract开头创建的类,无法创建一个实例,只能通过继承使用
抽象方法
在抽象类中使用abstract开头定义方法就是抽象方法
子类必须对抽象方法进行重写,否则报错
# 接口interface
用来定义一个类的结构,规定其属性方法,同时接口可以当做类型声明去使用。
//定义一个接口。注意:接口中不能有实际的值
interface myInterface{
name:string;
sayHELLO():void
}
2
3
4
5
定义类可以使其实现接口,使用implements
//类中必须有接口所定义的属性和方法
class A implements myInterface{
name:string;
constructor(name:string){
this.name = name;
}
sayHello(){
console.log("哈哈哈")
}
}
2
3
4
5
6
7
8
9
10
# 属性的封装
TS可以在属性前添加修饰符
public ==>可以在任意位置访问与修改,是默认值
private ==>私有属性,只能在类内部访问与修改(也无法继承),可以在内部定义方法进行访问和修改
protected ==>只能在当前类和继承中类之间访问
TS中设置get方法
class C{
get name(){
return '哈哈'
}
}
const aa = new C()
console.log(aa.name); //哈哈
2
3
4
5
6
7
注意使用get 函数必须有返回值
set使用方法基本相同
# 六、泛型
在数或者类时,遇到类型不明确的情况就可以使用泛型.不使用any是因为使用后会跳过类型检查**
# 函数使用泛型
再定义函数或者类时,遇到类型不明确的情况就可以使用泛型.不使用any是因为使用后会跳过类型检查
//定义一个泛型T
function fun<T>(a:T):T{
return a;
}
//调用具有泛型的函数
fn(10) //不指定泛型,TS对其类型自动判断
fun<string>("hello") //指定泛型为string
2
3
4
5
6
7
# 泛型与接口相结合
使用extends
interface Inter{
lenth:number;
}
//要求a必须有length属性
function fn<T extends Inter>(a:T):number{
return a.length
}
fun('123') //字符串可以
fun(123) //数字没有,报错
2
3
4
5
6
7
8
9
# 类使用泛型
与函数基本相同