1.TypeScript概念
(1)以JavaScript为基础构建的语言
(2)一个JavaScript的超集
(3)可以在任何支持JavaScript的平台中执行
(4)TypeScript扩展了JavaScript,并添加了类型
(5)TS不能被JS解析器直接执行,TS要先编译为JS
2.TypeScript新增
(1)类型
(2)支持ES的新特性
(3)添加ES不具备的新特性
(4)丰富的配置项
(5)强大的开发工具
3.基本类型
-
类型声明
-
类型声明是TS非常重要的一个特点
-
通过类型声明可以指定TS中变量(参数、形参)的类型
-
指定类型后,当变量赋值时,TS编译器会自动检测是否符合类型声明,符合则赋值,否则报错
-
指定类型后,类型声明给变量设置了类型,使得变量只能存储某种类型的值
-
语法:
-
let 变量:类型; let 变量:类型 = 值; funcation fn(参数:类型,参数:类型):类型{ ... }
-
-
-
自动类型判断
- TS拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的,TS编译器会自动判断变量的类型
- 所以如果变量的声明和赋值同时进行,可以省略类型的声明
-
类型:
类型 例子 描述 number 1,-33,2.5 任意数字 string ‘hi’,“hi”,hi 任意字符串 boolean true,false 布尔值true或false 字面量 其本身 限制变量的值就是该字面量的值 any * 任意类型 unkown * 类型安全的any void 空值(undefined) 没有值(或undefined) never 没有值 不能是任何值 object {name:‘孙悟空’} 任意的JS对象 array [1,2,3] 任意JS数组 tuple [4,5] 元素,TS新增类型,固定长度数组 enum enum(A,B) 枚举,TS中新增类型 -
number
-
let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; let big: bigint = 100n;
-
-
boolean
-
let isDone: boolean = false;
-
-
string
-
let color: string = "blue"; color = 'red'; let fullName: string = `Bob Bobbington`; let age: number = 37; let sentence: string = `Hello, my name is ${fullName}. I'll be ${age + 1} years old next month.`;
-
-
字面量
-
可以使用字面量去指定变量的类型,通过字面量可以确定变量的取值范围
-
let color: 'red' | 'blue' | 'black'; let num: 1 | 2 | 3 | 4 | 5;
-
-
any
-
变量设置类型为 any 后,相当于对该变量关闭了TS的类型检测
-
声明变量如果不指定类型,则TS解析器就会自动判断变量类型为any(隐式any)
-
使用TS时,不建议使用 any 类型
-
let d: any = 4; d = 'hello'; d = true;
-
-
unknown
-
unknow 表示未知类型 可以赋值给unkown任何类型的值
-
unkown 实际上是一个类型安全的any
-
unkown 类型的变量,不能直接赋值给其他变量
-
let notSure: unknown = 4; notSure = 'hello';
-
-
void
-
void 用来表示空(undefined),以函数为例,就表示没有返回值
-
let unusable: void = undefined;
-
-
never
-
never 表示永远不会有返回结果
-
function error(message: string): never { throw new Error(message); }
-
-
object(没啥用)
-
{} 用来指定对象中可以包含哪些属性,语法:{属性名:属性值,属性名:属性值}
-
在属性后加?,表示属性是可选的
-
[propName:string]:any 表示任意类型和个数的属性
-
let obj: object = {}; let i:{name:string,age?:number}; i = {name:"孙悟空",age:18}; let j:{name:string,[propName:string]:any}; j = {name:"猪八戒",age:18,sex:"男",city:"北京"}
-
-
array
-
let list: number[] = [1, 2, 3]; let list: Array<number> = [1, 2, 3];
-
-
typle
-
元组就是固定长度的数组,语法:[类型,类型,类型] 长度为3,类型固定
-
let x: [string, number]; x = ["hello", 10];
-
-
enum
-
enum Gender{ Male = 0, Female = 1 } let o:{name:string,gender:Gender}; // 设置gender类型为定义的枚举 o = { name:"孙悟空", gender:Gender.Male // 把 0 赋值给 gender } console.log(o.gender === Gender.Male);
-
-
&
-
&表示同时,|表示或,&用在连接两个对象
-
let p:{name:string} & {age:number} p = {name:"孙悟空",age:18}
-
-
类型别名
-
语法:type 别名 = 类型 例:type num = number
-
type myType = 1 | 2 | 3 | 4 | 5; let q:myType let r:myType
-
-
类型断言
-
有些情况下,变量的类型对于我们来说是很明确,但是TS编译器却并不清楚,此时,可以通过类型断言来告诉编译器变量的类型,断言有两种形式:
-
第一种
-
let someValue: unknown = "this is a string"; let strLength: number = (someValue as string).length;
-
-
第二种
-
let someValue: unknown = "this is a string"; let strLength: number = (<string>someValue).length;
-
-
-
4.编译选项
-
自动编译文件
-
编译文件时,使用 -w 指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。
-
示例:
-
tsc xxx.ts -w
-
-
-
自动编译整个项目
-
如果直接使用tsc指令,则可以自动将当前项目下的所有ts文件编译为js文件
-
直接使用tsc -w指令,可以监视当前项目下所有TS文件
-
但是能直接使用tsc命令的前提时,要先在项目根目录下创建一个ts的配置文件 tsconfig.json(指令:tsc --init)
-
tsconfig.json是一个JSON文件,添加配置文件后,只需只需 tsc 命令即可完成对整个项目的编译
-
配置选项:
-
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
-
指定被编译文件的列表,只有需要编译的文件少时才会用到
-
和 include 类似,但 files 是每次指定单个文件,在文件少的小项目中使用
-
示例:
-
"files": [ "core.ts", "sys.ts", "types.ts", "scanner.ts", "parser.ts", "utilities.ts", "binder.ts", "checker.ts", "tsc.ts" ]
-
-
-
compilerOptions
-
编译选项是配置文件中非常重要也比较复杂的配置选项
-
在compilerOptions中包含多个子选项,用来完成对编译的配置
-
项目选择
-
target
-
设置ts代码编译的目标版本
-
可选值
- ES3(默认)、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
-
示例:
-
"compilerOptions": { "target": "ES6" }
-
如上设置,我们所编写的ts代码将会被编译为ES6版本的js代码
-
-
-
lib
-
指定代码运行时所包含的库(宿主环境)
-
一般不改变这个项
-
可选值:
- ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost …
-
示例:
-
"compilerOptions": { "target": "ES6", "lib": ["ES6", "DOM"], "outDir": "dist", "outFile": "dist/aa.js" }
-
-
-
moudel
-
设置编译后代码使用的模块化系统
-
可选值:
- CommonJS、UMD、AMD、System、ES2020、ESNext、None
-
示例:
-
"compilerOptions": { "module": "CommonJS" }
-
-
-
outDir
-
编译后文件的所在目录
-
默认情况下,编译后的js文件会和ts文件位于相同的目录,设置outDir后可以改变编译后文件的位置
-
示例:
-
"compilerOptions": { "outDir": "dist" }
-
-
-
outFile
-
将所有的文件编译为一个js文件
-
默认会将所有的编写在全局作用域中的代码合并为一个js文件,如果module制定了None、System或AMD则会将模块一起合并到文件之中
-
示例:
-
"compilerOptions": { "outFile": "dist/app.js" }
-
-
-
allowJs
-
是否对js文件编译
-
默认值为false
-
示例:
-
"allowJs": true,
-
-
-
checkJs
-
是否检查js代码是否符合TS语法规范
-
默认值false
-
示例:
-
"compilerOptions": { "allowJs": true, "checkJs": true }
-
-
-
removeComments
-
TS 编译为 JS 时是否移除TS文件里的注释
-
默认值false
-
示例:
-
"removeComments": true,
-
-
-
noEmit
- 不对代码进行编译
- 默认值false
-
noEmitOnError
- 当TS代码有错误时不生成编译后的JS文件
- 默认值fasle
-
sourceMap
- 是否生成sourceMap
- 默认值false
-
-
严格检查
- strict
- 启用所有的严格检查,默认值为true,设置后相当于开启了所有的严格检查
- alwaysStrict
- 设置编译后的JS文件是否使用严格模式
- 默认值false
- noImplicitAny
- 禁止隐式的any类型
- 默认值false
- noImplicitThis
- 禁止类型不明确的this
- 默认值flase
- strictBindCallApply
- 严格检查bind、call和apply的参数列表
- strictFunctionTypes
- 严格检查函数的类型
- strictNullChecks
- 严格的空值检查
- strictPropertyInitialization
- 严格检查属性是否初始化
- strict
-
额外检查
- noFallthroughCasesInSwitch
- 检查switch语句包含正确的break
- noImplicitReturns
- 检查函数没有隐式的返回值
- noUnusedLocals
- 检查未使用的局部变量
- noUnusedParameters
- 检查未使用的参数
- noFallthroughCasesInSwitch
-
高级
- allowUnreachableCode
- 检查不可达代码
- 可选值:
- true,忽略不可达代码
- false,不可达代码将引起错误
- noEmitOnError
- 有错误的情况下不进行编译
- 默认值:false
- allowUnreachableCode
-
-
-
5.类
面向对象:简而言之就是程序中所有的操作都需要通过对象来完成
类:对象的模型,根据类创建指定类型的对象(属性和方法)
-
定义类
-
class 类名 { 属性名: 类型; constructor(参数: 类型){ this.属性名 = 参数; } 方法名(){ .... } }
-
-
构造函数 (constructor)
-
构造函数会在对象创建时调用
-
示例:
-
class Dog { name:string; age:number; // constructor 构造函数 // 构造函数会在对象创建时调用 constructor(name:string,age:number) { // 在实例方法中,this就表示当前的实例 // 在构造函数中,当前对象就是当前创建的那个对象 // 可以通过this向新建的对象中添加属性 this.name = name; this.age = age; } bark() { // alert('汪汪汪') // 在方法中可以通过this表示当前调用方法的对象 console.log(this); } }
-
-
-
示例:
-
class Person{ name: string; age: number; constructor(name: string, age: number){ this.name = name; this.age = age; } sayHello(){ console.log(`大家好,我是${this.name}`); } }
-
-
使用类:
-
const p = new Person('孙悟空', 18); p.sayHello();
-
6.面向对象的特点
-
封装
-
对象实质上就是属性和方法的容器,它的主要作用就是存储属性和方法,这就是所谓的封装
-
默认情况下,对象的属性是可以任意的修改的,为了确保数据的安全性,在TS中可以对属性的权限进行设置
-
只读属性(readonly):
- 如果在声明属性时添加一个readonly,则属性便成了只读属性无法修改
-
TS中属性具有三种修饰符:
- public(默认值),可以在类、子类和对象中修改
- protected ,可以在类、子类中修改
- private ,可以在类中修改
-
示例:
-
public
-
class Person{ public name: string; // 写或什么都不写都是public public age: number; constructor(name: string, age: number){ this.name = name; // 可以在类中修改 this.age = age; } sayHello(){ console.log(`大家好,我是${this.name}`); } } class Employee extends Person{ constructor(name: string, age: number){ super(name, age); this.name = name; //子类中可以修改 } } const p = new Person('孙悟空', 18); p.name = '猪八戒';// 可以通过对象修改
-
-
protected
-
class Person{ protected name: string; protected age: number; constructor(name: string, age: number){ this.name = name; // 可以修改 this.age = age; } sayHello(){ console.log(`大家好,我是${this.name}`); } } class Employee extends Person{ constructor(name: string, age: number){ super(name, age); this.name = name; //子类中可以修改 } } const p = new Person('孙悟空', 18); p.name = '猪八戒';// 不能修改
-
-
private
-
class Person{ private name: string; private age: number; constructor(name: string, age: number){ this.name = name; // 可以修改 this.age = age; } sayHello(){ console.log(`大家好,我是${this.name}`); } } class Employee extends Person{ constructor(name: string, age: number){ super(name, age); this.name = name; //子类中不能修改 } } const p = new Person('孙悟空', 18); p.name = '猪八戒';// 不能修改
-
-
-
属性存取器
-
对于一些不希望被任意修改的属性,可以将其设置为private
-
直接将其设置为private将导致无法再通过对象修改其中的属性
-
我们可以在类中定义一组读取、设置属性的方法,这种对属性读取或设置的属性被称为属性的存取器
-
读取属性的方法叫做getter方法,设置属性的方法叫做setter方法
-
示例:
-
class Person{ private _name: string; constructor(name: string){ this._name = name; } get name(){ return this._name; } set name(name: string){ this._name = name; } } const p1 = new Person('孙悟空'); console.log(p1.name); // 通过getter读取name属性 p1.name = '猪八戒'; // 通过setter修改name属性
-
-
-
静态属性
-
静态属性(方法),也称为类属性。使用静态属性无需创建实例,通过类即可直接使用
-
静态属性(方法)使用static开头
-
示例:
-
class Tools{ static PI = 3.1415926; static sum(num1: number, num2: number){ return num1 + num2 } } console.log(Tools.PI); console.log(Tools.sum(123, 456));
-
-
-
this
- 在类中,使用this表示当前对象
-
-
继承
-
继承是面向对象中的又一个特性
-
通过继承可以将其他类中的属性和方法引入到当前类中
-
示例:
-
class Animal{ name: string; age: number; constructor(name: string, age: number){ this.name = name; this.age = age; } } class Dog extends Animal{ bark(){ console.log(`${this.name}在汪汪叫!`); } } const dog = new Dog('旺财', 4); dog.bark();
-
-
-
通过继承可以在不修改的情况下完成对类的扩展
-
重写
-
发生继承时,子类中的方法会替换掉父类中的同名方法,这就称为方法的重写
-
示例:
-
class Animal{ name: string; age: number; constructor(name: string, age: number){ this.name = name; this.age = age; } run(){ console.log(`父类中的run方法!`); } } class Dog extends Animal{ bark(){ console.log(`${this.name}在汪汪叫!`); } run(){ console.log(`子类中的run方法,会重写父类中的run方法!`); } } const dog = new Dog('旺财', 4); dog.bark();
-
-
-
super关键字
-
如果在子类中写了构造函数,则必须在子类构造函数中用suoper调用父类构造函数
-
在类的方法中,super就表示当前类的父类
-
示例:
-
class Animal { name:string; constructor(name:string){ this.name = name } sayHello() { console.log('动物在叫'); } } class Dog extends Animal { age:number; constructor(name:string,age:number) { // 如果在子类中写了构造函数,则必须在子类构造函数中用suoper调用父类构造函数 super(name); // 调用父类构造函数 this.age = age; } sayHello() { // 在类的方法中,super就表示当前类的父类 // super.sayHello(); console.log('汪汪汪'); } } const dog = new Dog('旺财',4); dog.sayHello();
-
-
-
抽象类(abstract class)
-
抽象类是专门用来被其他类所继承的类,它只能被其他类所继承不能用来创建实例
-
抽象类中可以添加抽象方法,使用abstract开头的方法叫做抽象方法,抽象方法没有方法体只能定义在抽象类中,继承抽象类时抽象方法必须要实现
-
abstract class Animal { name:string; constructor(name:string){ this.name = name } /** * 定义一个抽象方法 * -抽象方法使用abstract开头,没有方法体 * -抽象方法只能定义在抽象类中,且子类必须对抽象方法进行重写 * */ abstract sayHello() :void // void 表示方法体为空 } class Dog extends Animal { sayHello() { console.log('汪汪汪'); } } class Cat extends Animal{ sayHello() { console.log('喵喵喵'); } }
-
-
7.接口(Interface)
接口的作用类似于抽象类,不同点在于接口中的所有方法和属性都是没有实值的,换句话说接口中的所有方法都是抽象方法。接口主要负责定义一个类的结构,接口可以去限制一个对象的接口,对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时,可以让一个类去实现接口,实现接口时类中要保护接口中的所有属性。
-
接口为TS新增
-
接口用来定义一个类结构,用来定义一个类中应该包含哪些属性和方法
-
同时接口也可以当成类型声明去使用
-
同一个接口可以多次声明,接口的结构为多次的和
-
接口中的所有的属性都不能有实际的值
-
在接口中所有的方法都是抽象方法
-
示例:
-
// 描述一个对象的类型 type myType = { name:string; age:number }; // 两次声明同一个接口 interface myInterface { name:string; age:number } interface myInterface { gender:string } const obj:myInterface = { name:'sss', age:18, gender:'男' } /** * 接口可以在定义类的时候去限制类的结构 * 接口中的所有的属性都不能有实际的值 * 接口只定义对象的结构,而不考虑实际值 * 在接口中所有的方法都是抽象方法 */ interface myInter { name:string; sayhello():void; } /** * 定义类时,可以使类去实现一个接口 * 实现接口就是使类满足接口的要求 * 使用 implements :class MyClass implements myInterface */ class MyClass implements myInter { name: string; constructor(name:string) { this.name = name } sayhello() { console.log('你好'); } }
-
8.泛型(Generic)
定义一个函数或类时,有些情况下无法确定其中要使用的具体类型(返回值、参数、属性的类型不能确定),此时泛型便能够发挥作用。
-
举个例子:
-
function test(arg: any): any{ return arg; }
-
上例中,test函数有一个参数类型不确定,但是能确定的是其返回值的类型和参数的类型是相同的,由于类型不确定所以参数和返回值均使用了any,但是很明显这样做是不合适的,首先使用any会关闭TS的类型检查,其次这样设置也不能体现出参数和返回值是相同的类型
-
-
使用泛型:
-
function test<T>(arg: T): T{ return arg; }
-
这里的
<T>
就是泛型,T是我们给这个类型起的名字(不一定非叫T),设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解,就表示某个类型。 -
那么如何使用上边的函数呢?
-
方式一:直接使用
-
// 不指定泛型,TS 自动判断 T 类型为 number 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 Inter{ length:number; } // T extends Inter 表示泛型T必须是Inter时实现类(子类) function fn3<T extends Inter>(a:T):number{ return a.length }
-
使用T extends Inter表示泛型T必须是Inter的子类,不一定非要使用接口类和抽象类同样适用。
-