Typescript学习
2025-11-09 10:52:08
Typescript学习
3131
第一章:介绍与安装
一、Typescript介绍
- TypeScript是由微软开发的一款开源的编程语言。
- TypeScript是 Javascript的超集，遵循最新的ES6、Es5规范。TypeScript扩展了JavaScript的语法。
- TypeScript更像后端java、C#这样的面向对象语言，可以让js开发大型企业项目。
- 谷歌也在大力支持Typescript的推广，谷歌的angular2.x+就是基于Typescript语法。
- 最新的vue 、 React 也可以集成TypeScript。
- Nodejs框架 Nestjs、midway 中用的就是 TypeScript语法。
二、Typescript的安装与编译
- npm install -g typescript
- cnpm install -g typescript
- yarn global add typescript
验证安装成功
tsc -v
三、自动编译
- 生成配置文件 tsc --init
- 修改outDir输出目录
- 在ide里面 终端 任务 选择监视.json文件
第二章:Typescript的数据类型
布尔类型（boolean)
数字类型（number）
字符串类型(string)
数组类型（array)
第一种定义方式： let arr:number[]=[1,2,3,4,5]; let arr:string[]=["1","2"]; 第二种定义方法 let arr:Array=[1,2,3,4];
元组类型(tuple)
let arr:[string,number,boolean]=["ts",3,18,true];
枚举类型(enum)
enum Flag
enum Flag{success=1,error=-1};
let f:Flag=Flag.success;
标识状态
如果不标识，则是索引值
如果有标识，则顺序
任意类型(any）
任意类型的用处：
和ES5类似
给obeject赋值时，可用any
null 和undefinedvoid类型
void一般用于方法没有返回值
never类型
never表示从不会出现的值
第三章、函数的定义
一、函数的申明
function run(){
return 'run';
}
二、匿名函数
var run2=function(){
retuen 'run2';
}
三、函数的传参
3.1有返回值
function getInfo(name:string,age:number):string{
return name+age;
}
3.2没有返回值
function getInfo(name:string,age:number):void{
alert(name+age);
}
3.3方法可选参数
function getInfo(name:string,age?:number):string{
return name+age;
}
3.4默认参数
function getInfo(name:string,age:number=30):string{
return name+age;
}
3.5剩余参数
function getInfo(...res:nmber[]):void{
alert(res.join(','));
}
3.6函数重载
function getInfo(name:string):string{}
function getInfo(age:number):string{}
function getInfo(str:string):any{
if(typeof str=='string'){
return '这是'+name;
}else{
return ‘年龄’+str}
}
第四章、Typescript的类
1、最简单的类
function Person(){
this.name='张三';
this.age=20;
}
var p=new Person();
alert(p.name);
2、构造函数和原型链里面增加方法
function Person(){
this.name='张三'; /*属性*/
this.age=20;
this.run=function(){
alert(this.name+'在运动');
}
}
//原型链上面的属性会被多个实例共享 构造函数不会
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
var p=new Person();
p.work();
3、类里面的静态方法
function Person(){
this.name='张三'; /*属性*/
this.age=20;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.getInfo=function(){
alert('我是静态方法');
}
//原型链上面的属性会被多个实例共享 构造函数不会
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
var p=new Person();
p.work();
//调用静态方法
Person.getInfo();
4、es5里面的继承 对象冒充实现继承
function Person(){
this.name='张三'; /*属性*/
this.age=20;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
//Web类 继承Person类 原型链+对象冒充的组合继承模式
function Web(){
Person.call(this); /*对象冒充实现继承*/
}
var w=new Web();
// w.run(); //对象冒充可以继承构造函数里面的属性和方法
w.work(); //对象冒充可以继承构造函数里面的属性和方法 但是没法继承原型链上面的属性和方法
5、es5里面的继承 原型链实现继承
function Person(){
this.name='张三'; /*属性*/
this.age=20;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
//Web类 继承Person类 原型链+对象冒充的组合继承模式
function Web(){
}
Web.prototype=new Person(); //原型链实现继承
var w=new Web();
//原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法
//w.run();
w.work();
6、原型链+对象冒充的组合继承模式
function Person(name,age){
this.name=name; /*属性*/
this.age=age;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
function Web(name,age){
Person.call(this,name,age); //对象冒充继承 实例化子类可以给父类传参
}
Web.prototype=new Person();
var w=new Web('赵四',20); //实例化子类的时候没法给父类传参
// w.run();
w.work();
// var w1=new Web('王五',22);
7、原型链+对象冒充继承的另一种方式
function Person(name,age){
this.name=name; /*属性*/
this.age=age;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
function Web(name,age){
Person.call(this,name,age); //对象冒充继承 可以继承构造函数里面的属性和方法、实例化子类可以给父类传参
}
Web.prototype=Person.prototype;
var w=new Web('赵四',20); //实例化子类的时候没法给父类传参
w.run();
// w.work();
// var w1=new Web('王五',22);
第五章、typeScript中的类
1、类的定义
class Person{
name:string;
constructor(name:string){ //构造函数 实例化类的时候触发的方法
this.name=name;
}
getName():string{
return this.name;
}
setName(name:string):void{
this.name=name;
}
}
var p=new Person('张三');
alert(p.getName());
p.setName('李四');
alert(p.getName());
2、继承 extends、 super
class Person{
name:string;
constructor(name:string){
this.name=name;
}
run():string{
return this.name+'在运动'
}
}
class Web extends Person{
constructor(name:string){
super(name); /*初始化父类的构造函数*/
}
run():string{
return this.name+'在运动-子类'
}
work(){
alert(this.name+'在工作')
}
}
var w=new Web('李四');
alert(w.run());//先在子类里面找，如果没有再去父类找
3、类里面的修饰符
public :公有 在当前类里面、 子类 、类外面都可以访问 protected：保护类型 在当前类里面、子类里面可以访问 ，在类外部没法访问 private ：私有 在当前类里面可以访问，子类、类外部都没法访问
4、静态属性与静态方法
ES5的静态方法
function Person(){
this.run1=function(){
}
}
Person.name='哈哈哈';
Person.run2=function(){ //静态方法
}
var p=new Person();
Person.run2(); //静态方法的调用不需要实例化
ts的静态方法
class Per{
public name:string;
public age:number=20;
static sex="男";//静态属性
constructor(name:string) {
this.name=name;
}
run(){ /*实例方法*/
alert(this.name+'在运动')
}
work(){
alert(this.name+'在工作')
}
static print(){ /*静态方法 里面没法直接调用类里面的属性*/
alert('print方法'+Per.sex);
}
}
// var p=new Per('张三');
// p.run();
Per.print();
alert(Per.sex);
多态:父类定义一个方法不去实现，让继承它的子类去实现 每一个子类有不同的表现
class Animal {
name:string;
constructor(name:string) {
this.name=name;
}
eat(){ //具体吃什么?继承它的子类去实现 ，每一个子类的表现不一样
console.log('吃的方法')
}
}
class Dog extends Animal{
constructor(name:string){
super(name)
}
eat(){
return this.name+'吃粮食'
}
}
class Cat extends Animal{
constructor(name:string){
super(name)
}
eat(){
return this.name+'吃老鼠'
}
}
ypescript中的抽象类：它是提供其他类继承的基类，不能直接被实例化。
用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。
abstract抽象方法只能放在抽象类里面
抽象类和抽象方法用来定义标准 。 标准：Animal 这个类要求它的子类必须包含eat方法
abstract class Animal{
public name:string;
constructor(name:string){
this.name=name;
}
abstract eat():any; //抽象方法不包含具体实现并且必须在派生类中实现。
run(){
console.log('其他方法可以不实现')
}
}
class Dog extends Animal{
//抽象类的子类必须实现抽象类里面的抽象方法
constructor(name:any){
super(name)
}
eat(){
console.log(this.name+'吃粮食')
}
}
var d=new Dog('小花花');
d.eat();
class Cat extends Animal{
//抽象类的子类必须实现抽象类里面的抽象方法
constructor(name:any){
super(name)
}
run(){}
eat(){
console.log(this.name+'吃老鼠')
}
}
var c=new Cat('小花猫');
c.eat();
第六章、typeScript的接口
1.属性接口
ts中定义方法传入参数
function printLabel(label:string):void {
console.log('printLabel');
}
printLabel('hahah');
ts中自定义方法传入参数,对json进行约束
function printLabel(labelInfo:{label:string}):void {
console.log('printLabel');
}
printLabel('hahah'); //错误写法
printLabel({name:'张三'}); //错误的写法
printLabel({label:'张三'}); //正确的写法
对批量方法传入参数进行约束
interface FullName{
firstName:string; //注意;结束
secondName:string;
}
function printName(name:FullName){
// 必须传入对象 firstName secondName
console.log(name.firstName+'--'+name.secondName);
}
// printName('1213'); //错误
var obj={ /*传入的参数必须包含 firstName secondName*/
age:20,
firstName:'张',
secondName:'三'
};
printName(obj);
可选属性
interface FullName{
firstName:string;
secondName?:string;
}
function getName(name:FullName){
console.log(name)
}
getName({
firstName:'firstName'
})
加密的函数类型接口
interface encrypt{
(key:string,value:string):string;
}
var md5:encrypt=function(key:string,value:string):string{
//模拟操作
return key+value;
}
console.log(md5('name','zhangsan'));
var sha1:encrypt=function(key:string,value:string):string{
//模拟操作
return key+'----'+value;
}
console.log(sha1('name','lisi'));
可索引接口：数组、对象的约束
interface UserArr{
[index:number]:string
}
var arr:UserArr=['aaa','bbb'];/*正确*/
console.log(arr[0]);
var arr:UserArr=[123,'bbb']; /*错误*/
console.log(arr[0]);
类类型接口:对类的约束
interface Animal {
name: string;
eat(str: string): void;
}
class Dog implements Animal {
name: string;
constructor(name: string) {
this.name = name;
}
eat() {
console.log(this.name + '吃粮食')
}
}
var d = new Dog('小黑');
d.eat();
class Cat implements Animal {
name: string;
constructor(name: string) {
this.name = name;
}
eat(food: string) {
console.log(this.name + '吃' + food);
}
}
var c = new Cat('小花');
c.eat('老鼠');
接口可以继承接口
interface Animal{
eat():void;
}
interface Person extends Animal{
work():void;
}
class Web implements Person{
public name:string;
constructor(name:string){
this.name=name;
}
eat(){
console.log(this.name+'喜欢吃馒头')
}
work(){
console.log(this.name+'写代码');
}
}
var w=new Web('小李');
w.eat();
类中的接口继承
interface Animal {
eat(): void;
}
interface Person extends Animal {
work(): void;
}
class Programmer {
public name: string;
constructor(name: string) {
this.name = name;
}
coding(code: string) {
console.log(this.name + code)
}
}
class Web extends Programmer implements Person {
constructor(name: string) {
super(name)
}
eat() {
console.log(this.name + '喜欢吃馒头')
}
work() {
console.log(this.name + '写代码');
}
}
var w = new Web('小李');
w.coding('写ts代码');
泛型：可以支持不特定的数据类型 要求：传入的参数和返回的参数一致
function getData<T>(value: T): T {
return value;
}
getData<number>(123);
getData<string>('1214231');
getData<number>('2112'); /*错误的写法*/
function getData<T>(value: T): any {
return '2145214214';
}
getData<number>(123); //参数必须是number
getData<string>('这是一个泛型');
泛型类
class MinClas<T>{
public list: T[] = [];
add(value: T): void {
this.list.push(value);
}
min(): T {
var minNum = this.list[0];
for (var i = 0; i < this.list.length; i++) {
if (minNum > this.list[i]) {
minNum = this.list[i];
}
}
return minNum;
}
}
var m1 = new MinClas<number>(); /*实例化类 并且制定了类的T代表的类型是number*/
m1.add(11);
m1.add(3);
m1.add(2);
alert(m1.min())
var m2 = new MinClas<string>(); /*实例化类 并且制定了类的T代表的类型是string*/
m2.add('c');
m2.add('a');
m2.add('v');
alert(m2.min())
