链接: 尚硅谷2021版TypeScript教程(李立超老师TS新课)
第一章 快速入门
0、TypeScript简介
- TypeScript是JavaScript的超集。
- 它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。
- TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。
- TS完全兼容JS,换言之,任何的JS代码都可以直接当成TS使用。
- 相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的功能,类型推断功能;
- TS是编译时报错,js是运行时报错,所以可以避免不必要的bug;
- TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;
- 同样的功能,TS的代码量要大于JS,但由于TS的代码结构更加清晰,变量类型更加明确,在后期代码的维护中TS却远远胜于JS。
安装运行TS
npm install -g typescript
或者 vscode 的TypeScript插件
- 编译ts文件
tsc test.ts ——> 会编译生成 js 文件——> node test.js 运行 js 文件
tsc -w test.ts 持续自动监听ts文件的变化进行编译 - 编译并运行ts代码:ts —— js —— 运行
npm i ts-node -g
ts-node test.ts
TS简介
- 类型
- 接口 interface
- 类 class
一、数据类型
- JS已有类型:number、string、boolean、null、undefined、symbol、object(对象、数组、函数)
- TS新增类型:联合类型、自定义类型、接口、元组tuple、字面量、枚举enum、void、any
六个基本类型
// TS可以**类型推论**,所以变量声明且直接赋值可以省略类型注解。还有可以省略函数返回值的类型
let decimal: number = 6; === let decimal = 6
let color: string = "blue";
let isDone: boolean = false;
let a: null = null;
let b: undefined = undefined;
let c: symbol = Symbol()
object(对象、数组、函数)类型
- 对象:可选属性、任意属性
- type : 类型的别名,可以为任意类型指定别名
- interface 接口定义对象和类的类型,接口可以继承
let obj: object = {}; // 没什么意义
- 可选属性 ? , 可选参数只能放在所有参数的最后
let obj: { name : string, age?:number } = { name:'张三'};
- 任意属性 []
- [ name: string] : number ,但是属性名是字符串类型,属性值是number类型
- 如果定义了任意属性,那么其余的属性就必须是任意属性的子属性
let obj: { name : string, [ name: string] : any } = { name:'张三' , age: 18 };
- 类型别名type
type myType = {a:number, b: string}
let obj1:myType = { a: 1 , b:'dd'}
let obj2:myType = { c: 11 , d:'催单'}
- 接口interface
interface Mytype{a:number, b: string}
let obj1:myType = { a: 1 , b:'dd'}
- 数组:联合类型
- 数组:类型[] 或者 Array<类型>
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
- 联合类型:number|string:
- 加了()代表数组里的元素可以是数值或字符串类型,不加()代表list是一个纯数值型的数组或纯字符串类型的数组
let list: (number|string)[] = [1,2,'zhang']
- 函数
- 函数(单独定义参数和返回值的类型)
let f = function(a:number): number{
return a + 1
}
- 函数(同时定义参数和返回值的类型)
let f: (a:number)=>number = (a){
return a + 1
}
元组、枚举
- 枚举可以定义或不定义初始值
- 如果初始值是数值类型,具有自增属性,可以只定义第一个
- 如果初始值是字符串类型,则不具有自增属性,只要定义一个就必须全部定义
- 枚举会编译为一段js代码,所以从性能上推荐使用字面量和组合类型替代枚举
- tuple 元组:固定长度的数组
let x: [string, number] = ["hello", 10];
- 枚举:列举所有可能的值,还可以手动指定值
enum Color {
Red,
Green,
Blue,
}
let c: Color = Color.Green;
- 枚举
enum Color {
Red = 1,
Green = 2,
Blue = 4,
}
let c: Color = Color.Green;
- 字面量
let c: 1|2|4 = 1
typeof类型检测
//js中
console.log(typeof 'aa') // string
//TS中 typeof a === {x:number,y:number}
let a = { x:1 , y:2}
function b(obj:typeof a){
console.log(obj.x)
}
- 类型:
类型 | 例子 | 描述 |
---|---|---|
number | 1, -33, 2.5 | 任意数字 |
string | ‘hi’, “hi”, hi | 任意字符串 |
boolean | true、false | 布尔值true或false |
字面量(相当于常量) | 其本身 | 限制变量的值就是该字面量的值 |
any | * | 任意类型 (相当于关闭TS类型检测) |
unknown | * | 类型安全的any |
void | 空值(undefined) | 函数没有返回值 |
never | 没有值 | 不能是任何值 |
object | {name:‘孙悟空’} | 任意的JS对象 |
array | [1,2,3] | 任意JS数组 |
tuple | [4,5] | 元组,TS新增类型,固定长度数组 |
enum | enum{A, B} | 枚举,TS中新增类型 |
- 直接声明变量并赋值可以省略类型(自动识别)
let color = "blue"
- 字面量:也可以使用字面量去指定变量的类型,通过字面量可以确定变量的取值范围
let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;
- any:任意类型。如果变量不声明类型,默认为any类型,不推荐大家使用
let d: any = 4;
- unknown:未知类型,可以赋任意值
- unknown 和 any 的区别:可以将any类型的变量赋给任意类型的变量,但unknown类型的变量不能赋值给其他类型的变量
- 但是可以判断类型再赋值或者使用类型断言
let notSure: unknown = 4;
let a:number;
a = notSure // 报错
if(typeof notSure === 'number'){
a = notSure // 正确
}
- 类型断言
a = notSure as number // 类型断言
a = <number>notSure // 或类型断言
- void 代表空,如果用来定义函数的返回值类型就代表没有返回值
function fn() :void { } // 函数没有返回值
let unusable: void = undefined;
- never 永远不会返回结果
function error(message: string): never {
throw new Error(message);
}
第二章:面向对象
面向对象就是程序之中所有的操作都需要通过对象来完成。
- 举例来说:
- 操作浏览器要使用window对象
- 操作网页要使用document对象
- 操作控制台要使用console对象
一切操作都要通过对象,也就是所谓的面向对象,那么对象到底是什么呢?这就要先说到程序是什么,计算机程序的本质就是对现实事物的抽象,抽象的反义词是具体,比如:照片是对一个具体的人的抽象,汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象,在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。
在程序中所有的对象都被分成了两个部分数据和功能,以人为例,人的姓名、性别、年龄、身高、体重等属于数据,人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性,而功能就被称为方法。所以简而言之,在程序中一切皆是对象。
1、类(class)
要想面向对象,操作对象,首先便要拥有对象,那么如何创建对象。
要创建对象,必须要先定义类,所谓的类可以理解为对象的模型,
程序中可以根据类创建指定类型的对象,
举例来说:可以通过Person类来创建人的对象,通过Dog类创建狗的对象,通过Car类来创建汽车的对象,不同的类可以用来创建不同的对象。
-
定义类:
class 类名 { 属性名: 类型; constructor(参数: 类型){ this.属性名 = 参数; } 方法名(){ .... } }
-
示例:
class Person{ name: string; // 实例属性:需要通过new 的实例对象去访问 new Person().name static sex: string; // 静态属性:实例无法访问,通过类直接访问 Person.sex readonly age: number; //只读属性:实例只能访问但不能修改 // 构造函数constructor:在对象创建时调用 // this代表当前创建的实例对象 constructor(name: string, age: number){ this.name = name; this.age = age; } // 方法:this代表调用该方法的实例对象 sayHello(){ console.log(`大家好,我是${this.name}`); } }
-
使用类:
const p = new Person('孙悟空', 18); p.sayHello();
2、面向对象的特点
封装
-
对象实质上就是属性和方法的容器,它的主要作用就是存储属性和方法,这就是所谓的封装
-
TS中属性具有三种修饰符:
- public(默认值),可以在类、子类和对象中修改
- protected ,可以在类、子类中修改
- private ,可以在类中修改
- static 类调用,实例不可调用 可修饰方法
- readonly 只读,不可修改
-
示例:
class Person{ public name: string; // 默认不写都是public ,在类、子类和对象中修改 protected age: number; // 在类、子类中修改 private sex: string; // 在类中修改 constructor(name: string, age: number, sex: string){ this.name = name; // 可以在类中修改 this.age = age; // 可以在类中修改 this.sex = sex; // 可以在类中修改 } } class Employee extends Person{ constructor(name: string, age: number, sex: string){ super(name, age); this.name = name; //子类中可以修改 this.age = age; // 子类中可以修改 this.sex = sex; // 不可修改 } } const p = new Person('孙悟空', 18, '男’); p.name = '猪八戒'; // 可以通过对象修改 p.age=12; // 不能修改 p.sex = '女'; // 不可修改
属性存取器
-
我们可以在类中定义一组读取、设置属性的方法,这种对属性读取或设置的属性被称为属性的存取器
-
读取属性的方法叫做getter方法,设置属性的方法叫做setter方法
-
示例:
class Person{ private _name: string; constructor(name: string){ this._name = name; } get name(){ return this._name; } set name(name: string){ if(name){ // 可以在读取和修改时添加逻辑 this._name = name; } } } const p1 = new Person('孙悟空'); console.log(p1.name); // 通过getter读取name属性 p1.name = '猪八戒'; // 通过setter修改name属性
继承
-
继承 (extends 关键字) 时面向对象中的又一个特性
-
通过继承子类可以拥有父类所有的属性和方法
-
子类中还可以定义自己的属性和方法
-
若子类和父类属性和方法重名,则覆盖父类,称为方法重写
-
super 关键字:代表父类,用于调用父类构造函数
class Animal{ name: string; constructor(name: string){ this.name = name; } run(){ console.log(`父类中的run方法!`); } } // 继承父类 class Dog extends Animal{ age: number, // 当子类定义自己独有的属性时,需要定义构造函数 constructor // 这时由于名字冲突导致构造函数重写,导致父类中 this.name = name 失效 // 这时使用 super 关键字 调用父类的构造函数 ,传入name属性 constructor(name: string, age: number){ super(name) // 调用父类的构造函数 this.age = age; } // 子类独有的方法 bark(){ console.log(`${this.name}在汪汪叫!`); } // 方法重写 run(){ console.log(`子类中的run方法,会重写父类中的run方法!`); } } const dog = new Dog('旺财', 4); dog.bark();
-
抽象类(abstract class)
- 抽象类只能被其他类所继承不能用来创建实例,俗称基类
- 抽象类中可以定义抽象方法,只定义方法名,不定义方法体,并且必须在子类中重写
abstract class Animal{ abstract run(): void; // 抽象方法 bark(){ console.log('动物在叫~'); } } class Dog extends Animals{ // 在子类中重写抽象方法 run(){ console.log('狗在跑~'); } }
3、接口(Interface)
-
接口可以定义并限制一个类的结构,可以让一个类去实现接口,实现接口时类中要保护接口中的所有属性
-
接口可以去限制一个对象,对象包含接口中定义的所有属性和方法。
-
首字母大写,实现类型的复用
-
定义对象类型
interface Person{ name: string; sayHello():void; } function fn(per: Person){ per.sayHello(); } fn({name:'孙悟空', sayHello() {console.log(`Hello, 我是 ${this.name}`)}});
-
定义一个类去实现接口(implements )
// 定义一个接口
interface Person{
name: string;
sayHello():void;
}
// 定义一个类,实现上述接口:要求类中具有接口中所有的属性和方法
class Student implements Person{
constructor(name: string) {
this.name = name
}
sayHello() {
console.log('大家好,我是'+this.name);
}
}
- 接口的继承
interface Person{
name : string
}
interface Animal extends Person{
age : number
}
4、泛型(Generic)
定义一个函数或类时,有些情况下无法确定其中要使用的具体类型(返回值、参数、属性的类型不能确定),此时泛型便能够发挥作用。
-
举个例子:
-
function test(arg: any): any{ return arg; }
-
上例中,test函数有一个参数类型不确定,但是能确定的时其返回值的类型和参数的类型是相同的,由于类型不确定所以参数和返回值均使用了any,但是很明显这样做是不合适的,首先使用any会关闭TS的类型检查,其次这样设置也不能体现出参数和返回值是相同的类型
-
使用泛型:
-
function test<T>(arg: T): T{ return arg; }
-
这里的
<T>
就是泛型,T是我们给这个类型起的名字(不一定非叫T),设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解,就表示某个类型。 -
方式一(直接使用):
test(10)
使用时可以直接传递参数使用,类型会由TS自动推断出来,但有时编译器无法自动推断时还需要使用下面的方式
-
方式二(指定类型):
-
test<number>(10)
-
也可以在函数后手动指定泛型
-
-
可以同时指定多个泛型,泛型间使用逗号隔开:
function test<T, K>(a: T, b: K): K{ return b; } test<number, string>(10, "hello");
- 使用泛型时,完全可以将泛型当成是一个普通的类去使用
-
类中同样可以使用泛型:
class MyClass<T>{ prop: T; constructor(prop: T){ this.prop = prop; } }
-
除此之外,也可以对泛型的范围进行约束
interface MyInter{ length: number; } function test<T extends MyInter>(arg: T): number{ return arg.length; }
- 使用T extends MyInter表示泛型T必须是MyInter的子类,不一定非要使用接口类和抽象类同样适用。
编译选项
- 自动编译文件:使用 -w 指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。
tsc xxx.ts -w
-
自动编译整个项目
-
如果直接使用tsc指令,则可以自动将当前项目下的所有ts文件编译为js文件。
-
但是要先在项目根目录下创建一个ts的配置文件 tsconfig.json
-
配置选项:
-
include: 定义希望被编译文件所在的目录。默认值:[“**/*”]
"include":["src/**/*", "tests/**/*"] - 上述示例中,所有src目录和tests目录下的文件都会被编译
-
exclude: 定义需要排除在外的目录
- 默认值:[“node_modules”, “bower_components”, “jspm_packages”]
"exclude": ["./src/hello/**/*"] - 上述示例中,src下hello目录下的文件都不会被编译
-
extends: 定义被继承的配置文件
"extends": "./configs/base" - 上述示例中,当前配置文件中会自动包含config目录下base.json中的所有配置信息
-
files
- 指定被编译文件的列表,只有需要编译的文件少时才会用到
"files": [ "core.ts", "sys.ts", "types.ts", "scanner.ts", "parser.ts", "utilities.ts", "binder.ts", "checker.ts", "tsc.ts" ] - 列表中的文件都会被TS编译器所编译
-
compilerOptions
-
编译选项是配置文件中非常重要也比较复杂的配置选项
-
在compilerOptions中包含多个子选项,用来完成对编译的配置
"compilerOptions": { "target": "ES6" - 设置ts代码编译的目标版本ES3(默认)、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext "lib": ["ES6", "DOM"], 指定代码运行时所包含的库(宿主环境) ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost "outDir": "dist", 编译后文件的所在目录 "outFile": "dist/aa.js" 将所有的文件编译为一个js文件 "module": "CommonJS" 设置编译后代码使用的模块化系统 CommonJS、UMD、AMD、System、ES2020、ESNext、None "rootDir": "./src" 指定代码的根目录,默认情况下编译后文件的目录结构会以最长的公共目录为根目录,通过rootDir可以手动指定根目录 "allowJs": true, 是否对js文件编译 "checkJs": true 是否对js文件进行检查 }
- removeComments - 是否删除注释 - 默认值:false - noEmit - 不对代码进行编译 - 默认值:false - sourceMap - 是否生成sourceMap - 默认值:false
-
严格检查
- strict
- 启用所有的严格检查,默认值为true,设置后相当于开启了所有的严格检查
- alwaysStrict
- 总是以严格模式对代码进行编译
- noImplicitAny
- 禁止隐式的any类型
- noImplicitThis
- 禁止类型不明确的this
- strictBindCallApply
- 严格检查bind、call和apply的参数列表
- strictFunctionTypes
- 严格检查函数的类型
- strictNullChecks
- 严格的空值检查
- strictPropertyInitialization
- 严格检查属性是否初始化
- strict
-
额外检查
- noFallthroughCasesInSwitch
- 检查switch语句包含正确的break
- noImplicitReturns
- 检查函数没有隐式的返回值
- noUnusedLocals
- 检查未使用的局部变量
- noUnusedParameters
- 检查未使用的参数
- noFallthroughCasesInSwitch
-
高级
- allowUnreachableCode
- 检查不可达代码
- 可选值:
- true,忽略不可达代码
- false,不可达代码将引起错误
- noEmitOnError
- 有错误的情况下不进行编译
- 默认值:false
- allowUnreachableCode
-
-
4、webpack
-
通常情况下,实际开发中我们都需要使用构建工具对代码进行打包,TS同样也可以结合构建工具一起使用,下边以webpack为例介绍一下如何结合构建工具使用TS。
-
步骤:
-
初始化项目
- 进入项目根目录,执行命令
npm init -y
- 主要作用:创建package.json文件
- 进入项目根目录,执行命令
-
下载构建工具
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
- 共安装了7个包
- webpack
- 构建工具webpack
- webpack-cli
- webpack的命令行工具
- webpack-dev-server
- webpack的开发服务器
- typescript
- ts编译器
- ts-loader
- ts加载器,用于在webpack中编译ts文件
- html-webpack-plugin
- webpack中html插件,用来自动创建html文件
- clean-webpack-plugin
- webpack中的清除插件,每次构建都会先清除目录
- webpack
- 共安装了7个包
-
根目录下创建webpack的配置文件webpack.config.js
-
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = { optimization:{ minimize: false // 关闭代码压缩,可选 }, entry: "./src/index.ts", devtool: "inline-source-map", devServer: { contentBase: './dist' }, output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", environment: { arrowFunction: false // 关闭webpack的箭头函数,可选 } }, resolve: { extensions: [".ts", ".js"] }, module: { rules: [ { test: /\.ts$/, use: { loader: "ts-loader" }, exclude: /node_modules/ } ] }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title:'TS测试' }), ] }
-
-
根目录下创建tsconfig.json,配置可以根据自己需要
-
{ "compilerOptions": { "target": "ES2015", "module": "ES2015", "strict": true } }
-
-
修改package.json添加如下配置
-
{ ...略... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "start": "webpack serve --open chrome.exe" }, ...略... }
-
-
在src下创建ts文件,并在并命令行执行
npm run build
对代码进行编译,或者执行npm start
来启动开发服务器
-
5、Babel
-
经过一系列的配置,使得TS和webpack已经结合到了一起,除了webpack,开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器,在上述步骤的基础上,通过以下步骤再将babel引入到项目中。
-
安装依赖包:
npm i -D @babel/core @babel/preset-env babel-loader core-js
- 共安装了4个包,分别是:
- @babel/core
- babel的核心工具
- @babel/preset-env
- babel的预定义环境
- @babel-loader
- babel在webpack中的加载器
- core-js
- core-js用来使老版本的浏览器支持新版ES语法
- @babel/core
-
修改webpack.config.js配置文件
-
...略... module: { rules: [ { test: /\.ts$/, use: [ { loader: "babel-loader", options:{ presets: [ [ "@babel/preset-env", { "targets":{ "chrome": "58", "ie": "11" }, "corejs":"3", "useBuiltIns": "usage" } ] ] } }, { loader: "ts-loader", } ], exclude: /node_modules/ } ] } ...略...
-
如此一来,使用ts编译后的文件将会再次被babel处理,使得代码可以在大部分浏览器中直接使用,可以在配置选项的targets中指定要兼容的浏览器版本。
-
-