易用的做网站软件,新密网站,宿州网站建设费用,薇晓朵 WordPress 国内项目计划【视频链接】尚硅谷TypeScript教程#xff08;李立超老师TS新课#xff09; TypeScript 1. 类型1.1 | 联合类型1.2 字面量类型1.3 any 任意类型1.4 unkown 类型1.5 as 类型断言1.6 object 对象类型1.7 { } 对象类型1.8 #xff1f; 对象中的可选属性1.9 对象中的任意属性1.1…【视频链接】尚硅谷TypeScript教程李立超老师TS新课 TypeScript 1. 类型1.1 | 联合类型1.2 字面量类型1.3 any 任意类型1.4 unkown 类型1.5 as 类型断言1.6 object 对象类型1.7 { } 对象类型1.8 对象中的可选属性1.9 对象中的任意属性1.10 同时满足条件1.11 function 函数的类型限制1.12 void 空值1.13 nerver 没有返回值1.14 Array 数组1.15 emun 枚举1.16 type 类型别名 2. 类2.1 类的属性和方法2.2 构造函数2.3 继承和super2.4 abstract 抽象类2.5 interface 抽象类2.6 属性的访问权限2.7 泛型 通过命令行编译ts文件尚硅谷官方资料第一章 快速入门0、TypeScript简介1、TypeScript 开发环境搭建2、基本类型 第二章面向对象1、类class2、面向对象的特点3、接口Interface4、泛型Generic 1. 类型
typescript对类型进行强制的管理
这里只记录typescript特有的
1.1 | 联合类型
let a : number | string //变量a可以是number也可以是string// 数组元素可以是联合类型中的任意一种
let arr: (number|string|boolean)[] [1,2,3]arr[0] 1
arr[2] true1.2 字面量类型
可以限制变量的取值范围
// c的类型只能是10不是number
let c : 10c 11 // 报错Type 11 is not assignable to type 10 应用d的值被限定在两个字符串
let d : man | womand man
d woman1.3 any 任意类型
any类型的变量给以赋值给任意变量又增加了变量类型的不确定性不建议使用
let b : any
b 10
b 字符串1.4 unkown 类型
未知类型使用前需要typeof做类型判断
错误示例
let e : number 10
let f : unknown 10e f //报错Type unknown is not assignable to type number 正确用法
let e : number 10
let f : unknown 10if (typeof f number){e f
}1.5 as 类型断言
假如又一个变量a解析器不知道是什么类型但我们确定a的类型为某个类型
下面代码不会报错但用法是错的如果要断言a是数字那程序员一定要确保a一定会是number
let a : unknown abcd
let b : number b a as number
// 另一种断言的写法
b numbera编译后的js文件内容 很明显因为断言b的类型成为了string会导致未知的错误
let a abcd;
let b;
b a;1.6 object 对象类型
示例中object属性并没有对变量做很好的限制一般不使用
object的范围太广泛示例中a可以是对象也可以是函数
let a : objecta {name:jack,age:18}a function (a:number,b:number) : number{return a b
}1.7 { } 对象类型
很明显{}和object对类型无法限制
let a : {}a {name:jack,age:18}a function (a:number,b:number) : number{return a b{} 正确用法
let a : {name: string, age: number}a {name: jack, age: 18}1.8 对象中的可选属性
带有?的属性可有可无
let a : {name: string, age?: number}a {name: jack, age: 18}a {name: jack}1.9 对象中的任意属性
[b:string]:any 表示属性名是字符串值是任意类型[b:string]:string 表示属性名是字符串值也是字符串
// a对象中只要有namestring属性其他都无所谓
let a : {name: string, [b:string]:any}a {name: jack, age: 18, sex: true}a {name: jack}// 报错因为id属性的值是number类型所以b属性必须要包含number属性
let e : {id: number, [b:string]: string }// 修改为
let e : {id: number, [b:string]: string | number}1.10 同时满足条件
let a : {id: number} {name:string }a {id: 1, name: a}不能用于 []
1.11 function 函数的类型限制
对函数的类型限制就是限制参数的类型和返回值的类型
let b : (a: number, b: string) booleanb function (a: number, b: string):boolean{return true
}function c (a: number, b: string) : boolean{return true
}1.12 void 空值
void用于函数的返回值类型没有return语句或者返回undefined
function fun(): void{return undefined
}1.13 nerver 没有返回值
不能return一般用于抛出异常
function fun(): never{throw new Error(报错)
}1.14 Array 数组
第一种方式
let a : string[]a [a, b]
第二种方式
let b : ArrayStringb [a, b]数组元素是对象
let c : Array{[a:string]:number}c [{a:1}, {b:2}]元素是对象并且对象中属性的值不是同一种类型
let d : Array{id: number, [b:string]:string | number}d [{id:1,name:jack}]1.15 emun 枚举
属性的值在确定的范围以内建议使用emun类型
enum Gender{MALE 1,FEMALE 2,OTHER 3
}
let a : {id:number,name:string,gender:Gender}a {id:1,name:zhangsan,gender:Gender.FEMALE
}if(a.gender Gender.FEMALE){console.log(女)
}1.16 type 类型别名
a就是string类型的别名在后续的代码中用a可以代替string使用
type a string;let b : ab hello和字面量类型配合使用可以用于限制变量的值感觉和枚举有相似的地方
type c 1 | 2 | 3let d : c // d的类型就是 1 | 2 | 3d 12. 类
2.1 类的属性和方法
class Person{// 自动推断类型name jack// 指定类型age:number 18// 只读类型readonly gender 男// 静态属性static nationality China// 静态只读属性static readonly eye: boolean true// 方法sayHello(){console.log(hello);}// 静态方法static sayNationality(){console.log(Person.nationality);}
}// Person类的实例对象
const person new Person()
// 通过实例对象访问类中的属性
console.log(person.name)
// 修改实例对象的属性
person.name tom
console.log(person.name)
// 静态属性只能通过类名直接访问实例对象无法访问
console.log(Person.nationality);
// 通过实例对象调用类中的方法
person.sayHello()
// 静态方法需要类直接调用
Person.sayNationality()2.2 构造函数
类中的this指向实例对象
class dog{name; age// 构造函数constructor( name: string, age: number) {this.name namethis.age age}eat(){console.log(this.name在吃饭);}
}
// 实例化dog类myDog是实例对象
const myDog new dog(小黑,3)
const yourDog new dog(小白,4)myDog.eat()
console.log(yourDog.name yourDog.age岁了);// 小黑在吃饭
// 小白4岁了构造函数没有传值的属性必须有初始值 class StringLength{len:number -1constructor() {}}2.3 继承和super
super调用父类中的方法或者构造函数
class Animal{nameconstructor(name:string) {this.name name}say(){console.log(动物在叫);}
}
// extends:继承的关键字
class Dog extends Animal{ageconstructor(name:string,age: number) {// 调用父类的构造函数,将属性值传入父类super(name);// 子类新增的属性this.age age}// 重写父类中的方法say(){super.say()console.log(汪汪汪);}// 子类新增的方法run(){console.log(this.name 在奔跑);}}const myDog new Dog(小黑,3);myDog.run()
myDog.say()// 小黑在奔跑
// 动物在叫
// 汪汪汪2.4 abstract 抽象类
抽象类中可以有自己的属性和方法抽象类不能被实例化抽象类中定义的抽象方法子类必须实现 // abstract:定义抽象类和抽象类中的抽象方法abstract class Animal{nameconstructor(name: string) {this.name name}// 抽象方法必须定义在抽象类中并且没有方法体子类必须实现父类中的抽象方法abstract say():voiddogOld(age:number){console.log(this.nameage岁了);}}class Dog extends Animal{ageconstructor(name:string,age:number) {super(name);this.age age}say(){console.log(this.name汪汪汪的叫);super.dogOld(this.age)}}const dog new Dog(小黑,3)dog.say()2.5 interface 抽象类
用于类型限制
interface myInterData{name: stringage: numbergender?: boolean
}const myData : myInterData {name : 小黑,age : 3
}用于类
interface classInterface{name : stringsay():void
}
// 接口的实现类必须实现接口中的所有属性和方法
class Dog implements classInterface{name: string;constructor(name: string) {this.name name}say(): void {console.log(this.name汪汪汪的叫);}
}2.6 属性的访问权限
在不写访问权限时默认访问权限时public
// 属性默认访问权限是public 可以在任意的地方修改访问
class A {public name:stringconstructor(name:string) {this.name name}
}const a new A(小黑)
a.name 小白;privata私有的只能在类的内部访问 要使用get和set的语法糖属性名前面加_
// 属性的访问权限修改为privata只有在当前类的内部才能访问class B{private _name:stringconstructor(name:string) {this._name name}// 在类的内部写一个获取name属性的方法getName():string{return this._name}// 下面的写法是上面写法的语法糖get name():string{return this._name}set name(value:string){this._name value}}const b new B(小白)console.log(b.getName()); // 调用的是 getName()b.name 小黑 // 调用的是 set nameconsole.log(b.name); // 调用的是 get name()构造函数的语法糖不能使用set和get的语法糖 只能自己定义getter和setter方法 class C{constructor(private name:string) {}getName():string{return this.name}setName(value:string){this.name value} }2.7 泛型
在定义函数或者类时遇到类型不明确的可以使用泛型泛型写在函数名或者类名的后面使用尖括号T,K
类型推断指定泛型的类型 function fun1T(a:T):T{return a}fun1string(abc) // 指定泛型的类型fun1(10) // 不指定泛型时什么类型TS从参数推断类型 继承的泛型 此例中特殊的是length这个属性正好字符串有这个属性一般传入的就是子类 interface GetLength {length : number}// 泛型K继承了接口 GetLengtha参数只能传入 GetLength 的子类 或者有length属性的类型function funK extends GetLength(a: K):number{return a.length}console.log(fun(hello));Ts中特有的 interface GetLength {length : number}// 泛型K继承了接口 GetLengtha参数只能传入 GetLength 的子类 或者有length属性的类型function funK extends GetLength(a: K):number{return a.length}// 在TS中特有的接口可以作为类型限制使用const b: GetLength { length:10 }console.log(fun(b)); // 10通过命令行编译ts文件
tsc 文件名.ts设置tsconfig.json文件后只需要执行tsc命令就可以编译ts文件tsc -w命令可以在ts文件修改后自动编译ts文件
{compilerOptions: {module: es2015,target: es2015,// 使用严格的ts语法检查strict: true,// 编译后的js文件存放目录outDir: ./dist},// tsc命令执行时要编译的文件include: [./src/**/*],
}将编译后的.js文件引入到.html文件的script标签中
script src文件路径/文件名.js/script尚硅谷官方资料
第一章 快速入门
0、TypeScript简介
TypeScript是JavaScript的超集。它对JS进行了扩展向JS中引入了类型的概念并添加了许多新的特性。TS代码需要通过编译器编译为JS然后再交由JS解析器执行。TS完全兼容JS换言之任何的JS代码都可以直接当成JS使用。相较于JS而言TS拥有了静态类型更加严格的语法更强大的功能TS可以在代码执行前就完成代码的检查减小了运行时异常的出现的几率TS代码可以编译为任意版本的JS代码可有效解决不同JS运行环境的兼容问题同样的功能TS的代码量要大于JS但由于TS的代码结构更加清晰变量类型更加明确在后期代码的维护中TS却远远胜于JS。
1、TypeScript 开发环境搭建 下载Node.js 64位https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi32位https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi 安装Node.js 使用npm全局安装typescript 进入命令行输入npm i -g typescript 创建一个ts文件 使用tsc对ts文件进行编译 进入命令行 进入ts文件所在目录 执行命令tsc xxx.ts
2、基本类型 类型声明 类型声明是TS非常重要的一个特点 通过类型声明可以指定TS中变量参数、形参的类型 指定类型后当为变量赋值时TS编译器会自动检查值是否符合类型声明符合则赋值否则报错 简而言之类型声明给变量设置了类型使得变量只能存储某种类型的值 语法 let 变量: 类型;let 变量: 类型 值;function fn(参数: 类型, 参数: 类型): 类型{...}自动类型判断 TS拥有自动的类型判断机制当对变量的声明和赋值是同时进行的TS编译器会自动判断变量的类型所以如果你的变量的声明和赋值时同时进行的可以省略掉类型声明 类型 类型例子描述number1, -33, 2.5任意数字string‘hi’, “hi”, hi任意字符串booleantrue、false布尔值true或false字面量其本身限制变量的值就是该字面量的值any*任意类型unknown*类型安全的anyvoid空值undefined没有值或undefinednever没有值不能是任何值object{name:‘孙悟空’}任意的JS对象array[1,2,3]任意JS数组tuple[4,5]元素TS新增类型固定长度数组enumenum{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}.Ill be ${age 1} years old next month.;字面量 也可以使用字面量去指定变量的类型通过字面量可以确定变量的取值范围 let color: red | blue | black;
let num: 1 | 2 | 3 | 4 | 5;any let d: any 4;
d hello;
d true;unknown let notSure: unknown 4;
notSure hello;void let unusable: void undefined;never function error(message: string): never {throw new Error(message);
}object没啥用 let obj: object {};array let list: number[] [1, 2, 3];
let list: Arraynumber [1, 2, 3];tuple let x: [string, number];x [hello, 10]; enum enum Color {Red,Green,Blue,}let c: Color Color.Green;enum Color {Red 1,Green,Blue,}let c: Color Color.Green;enum Color {Red 1,Green 2,Blue 4,}let c: Color Color.Green;类型断言 有些情况下变量的类型对于我们来说是很明确但是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 (stringsomeValue).length;第二章面向对象
面向对象是程序中一个非常重要的思想它被很多同学理解成了一个比较难比较深奥的问题其实不然。面向对象很简单简而言之就是程序之中所有的操作都需要通过对象来完成。
举例来说 操作浏览器要使用window对象操作网页要使用document对象操作控制台要使用console对象
一切操作都要通过对象也就是所谓的面向对象那么对象到底是什么呢这就要先说到程序是什么计算机程序的本质就是对现实事物的抽象抽象的反义词是具体比如照片是对一个具体的人的抽象汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。
在程序中所有的对象都被分成了两个部分数据和功能以人为例人的姓名、性别、年龄、身高、体重等属于数据人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性而功能就被称为方法。所以简而言之在程序中一切皆是对象。
1、类class
要想面向对象操作对象首先便要拥有对象那么下一个问题就是如何创建对象。要创建对象必须要先定义类所谓的类可以理解为对象的模型程序中可以根据类创建指定类型的对象举例来说可以通过Person类来创建人的对象通过Dog类创建狗的对象通过Car类来创建汽车的对象不同的类可以用来创建不同的对象。 定义类 class 类名 {属性名: 类型;constructor(参数: 类型){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();2、面向对象的特点 封装 对象实质上就是属性和方法的容器它的主要作用就是存储属性和方法这就是所谓的封装 默认情况下对象的属性是可以任意的修改的为了确保数据的安全性在TS中可以对属性的权限进行设置 只读属性readonly 如果在声明属性时添加一个readonly则属性便成了只读属性无法修改 TS中属性具有三种修饰符 public默认值可以在类、子类和对象中修改protected 可以在类、子类中修改private 可以在类中修改 示例 public class Person{public name: string; // 写或什么都不写都是publicpublic 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将导致无法再通过对象修改其中的属性 我们可以在类中定义一组读取、设置属性的方法这种对属性读取或设置的属性被称为属性的存取器 读取属性的方法叫做setter方法设置属性的方法叫做getter方法 示例 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来完成对父类的引用 抽象类abstract class 抽象类是专门用来被其他类所继承的类它只能被其他类所继承不能用来创建实例 abstract class Animal{abstract run(): void;bark(){console.log(动物在叫~);}
}class Dog extends Animals{run(){console.log(狗在跑~);}
}使用abstract开头的方法叫做抽象方法抽象方法没有方法体只能定义在抽象类中继承抽象类时抽象方法必须要实现
3、接口Interface
接口的作用类似于抽象类不同点在于接口中的所有方法和属性都是没有实值的换句话说接口中的所有方法都是抽象方法。接口主要负责定义一个类的结构接口可以去限制一个对象的接口对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时可以让一个类去实现接口实现接口时类中要保护接口中的所有属性。 示例检查对象类型 interface Person{name: string;sayHello():void;
}function fn(per: Person){per.sayHello();
}fn({name:孙悟空, sayHello() {console.log(Hello, 我是 ${this.name})}}); 示例实现 interface Person{name: string;sayHello():void;
}class Student implements Person{constructor(public name: string) {}sayHello() {console.log(大家好我是this.name);}
}4、泛型Generic
定义一个函数或类时有些情况下无法确定其中要使用的具体类型返回值、参数、属性的类型不能确定此时泛型便能够发挥作用。 举个例子 function test(arg: any): any{return arg;
}上例中test函数有一个参数类型不确定但是能确定的时其返回值的类型和参数的类型是相同的由于类型不确定所以参数和返回值均使用了any但是很明显这样做是不合适的首先使用any会关闭TS的类型检查其次这样设置也不能体现出参数和返回值是相同的类型 使用泛型 function testT(arg: T): T{return arg;
}这里的T就是泛型T是我们给这个类型起的名字不一定非叫T设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解就表示某个类型。 那么如何使用上边的函数呢 方式一直接使用 test(10)使用时可以直接传递参数使用类型会由TS自动推断出来但有时编译器无法自动推断时还需要使用下面的方式 方式二指定类型 testnumber(10)也可以在函数后手动指定泛型 可以同时指定多个泛型泛型间使用逗号隔开 function testT, K(a: T, b: K): K{return b;
}testnumber, string(10, hello);使用泛型时完全可以将泛型当成是一个普通的类去使用 类中同样可以使用泛型 class MyClassT{prop: T;constructor(prop: T){this.prop prop;}
}除此之外也可以对泛型的范围进行约束 interface MyInter{length: number;
}function testT extends MyInter(arg: T): number{return arg.length;
}使用T extends MyInter表示泛型T必须是MyInter的子类不一定非要使用接口类和抽象类同样适用。
