TypeScript学习记录

vscode设置自动编译

首先使用tsc --init 生成tsconfig.json配置文件 (可以根据需要修改设置)

终端->运行任务->typescript->tsc:监视

此时就可以实时编译(保存后编译)

数据类型

// String
let str:string='爱你哟，ts'
console.log(str)
// number
let age:number=18
console.log(age)
// boolean
let istrue:boolean=true
console.log(istrue)
// array
let numlist:number[]=[1,2,3]
console.log(numlist)
let numlist2:Array<string>=['1','2','3']
console.log(numlist2)
// touple
let toup:[string,number]=['aaa',12]  // 元素与类型一一对应
console.log(toup)
// Enum  自定义枚举类型，然后给变量赋枚举类型
enum Flag{success,erro,a=5,b    // 默认从0开始，当有一个元素被赋值，后面的会以赋值往后排
}
let enum1:Flag=Flag.success
let enum2:Flag=Flag.b
console.log(enum1)
console.log(enum2)
// any 类型，相当于任意类型，可以赋值任意值
// 相当于js中的对象
let a:any=0
console.log(a)
a='哈哈哈'
console.log(a)
//let b:any=document.getElementById('box')
// 当变量赋值为dom元素对象时，只能编译(tsc)，如果要直接运行会报错
// 当变量接收到的是dom元素时，类型是any
// console.log(b)
// undifined    变量定义了未赋值
// 在ts中，当某个变量定义了未赋值会报错
let num22:number|undefined   // 这样就可以
console.log(num22)// null 空let null1:null
null1=null    // null类型的变量只能被赋值null
// 当不确定一个变量是否为空，是否未被赋值，是否为指定类型可以给变量指定多种类型let v1:string|number|undefined|null
// v1可以使字符串，可以是数字也可以不赋值也可以是null
console.log(v1)    // undifined
console.log(typeof(v1))   // undifined
v1='ha'
console.log(v1)
console.log(typeof(v1))    // string
v1=1
console.log(v1)
console.log(typeof(v1))    // number
v1=1
v1=null
console.log(v1)
console.log(typeof(v1))      // null        // void    当函数没有返回值时，定义返回值类型时使用
function run2(a:number):void{      // ES5中可以不定义返回值类型console.log(a)// return a+1                    // 当有返回值时，会报错
}
// never 其他类型(包括undifined和null)
let abc:never

类和函数

// 函数
function run(){      // ES5return '返回值'
}
/*
var a = function(){   // 匿名函数return
}
*/// ts函数  可以指定返回值类型
function func1():number{return 1      // 返回值的类型必须和指定类型一致
}console.log(func1())// 当函数有参数时，需要给参数指定类型
function func2(num1:number,str1:string):string{return `${num1} -----${str1}`
}console.log(func2(10,'aaaaa'))// ts中如果给形参指定了类型，就必须传
// 方法的可选参数
// 如果实参可传可不传 类型为   ?:类型function func3(num1:number,str?:string):string{   // str可传可不传if(str){return `${str}----${num1}`}else{return `${num1}`}
}console.log(func3(10))
console.log(func3(10,'hahahaha'))// 默认参数    默认参数和可选参数的区别在于，默认参数需要指定默认值，当不传值时取默认参数
// 可选参数是可传可不传   不传时获取不到该参数值function func4(a:number,b:number=10):number{return a+b
}console.log(func4(1))
console.log(func4(10,1))// 其他参数
function func5(a:number,b:number,...rst:number[]):number{console.log(a)console.log(b)console.log(rst)let sum:number=a+bfor(let i=0;i<rst.length;i++){sum+=rst[i] }return sum
}console.log(func5(1,2,3,4,5,6,7))   // 此时的rst就是除了1，2之外的全部参数// 函数重载  同名函数中形参类型不同，当传入不同的值执行不同的函数
// es5中同名函数之后生效最后一个
// ts中定义多个同名函数都会生效，根据传参的不同生效的函数也不一样
function func(s:string):string;
function func(s:number):number;
function func(s:any):any{return s
}
console.log(func('a'))
console.log(typeof func('a'))console.log(func(1))
console.log(typeof func(1))var intera:number=0
var nnn:any =setInterval(()=>{intera+=1console.log(intera)if (intera>=10) {clearInterval(nnn)}
},1000)/*
// es5中没有类，只能通过构造函数实现
function Person(name,age){this.name=name;           // 属性this.age=age;this.getInfo=function(){           console.log(this.name)};
}
Person.prototype.work=function(){console.log(this.name+'working')
}var p = new Person('张三',19);alert(p.age);function Web(name,age){Person.call(this,name,age)
}
Web.prototype=Person.prototype;var w = new Web('lisi',20)alert(w.name)
*/
// ts中的类
class Person{name:string                 // 定义属性constructor(name:string){    // 实例化，相当于python中的initthis.name=name}run():void{                 // 实例方法console.log(this.name)}
}
var p=new Person('wangwu')
p.run()console.log(p.name)// 继承需要两步，先是extends声明，在初始化时调用super
class Web extends Person{             // extendsconstructor(name:string){super(name)}lll():string{return `${this.name}在玩玩玩`   // 模板语法}}
var w = new Web('hhh')
console.log(w.lll())// 修饰符
// public 公有  默认就是公有的  实例和类内部以及子类中都可以使用
// protected  保护 类里面和子类可以访问   实例不能调用，子类中可以调用
// private  私有   只有当前类可以使用console.log('----------------------------------------------')
enum Sex{'男','女'
}// 静态方法   静态属性
// static 关键字
class Perple{name:string              // 默认时pubilcpublic age:number        // 公有属性，类内部，子类，对象都可以访问protected work:string    // 保护属性  类内部和子类可以访问private sport:string     // 私有属性 类内部可以访问static sex:Sex=Sex.男           // 静态属性 ，类，对象可以访问constructor(name:string,age:number,work:string,sport:string){this.name=namethis.age=agethis.work=workthis.sport=sport}public play():void{        // 公有方法console.log(`${this.name}正在玩${this.sport}`)this.xxoo()           // 私有属性和方法只有类内部的方法可以访问this.say()            // 保护属性和方法在类内部和子类中可以访问}protected say():void{      // 类和子类可以访问console.log(`我的名字是${this.name}`)}private xxoo():void{       // 只有类内部可以访问console.log('xxoo')}static hhh():void{          // 只有类可以直接访问console.log(Perple.sex)}
}var pp = new Perple('张三',20,'程序员','篮球')console.log(pp.name,pp.age)
pp.play()console.log(Perple.sex)
Perple.hhh()class PPerson extends Perple{constructor(name:string,age:number,work:string,sport:string){super(name,age,work,sport)}public pplay():void{this.say()                 // 父类的protected方法在子类中可以访问this.play()                // 父类中的公有方法子类也可以用}
}var ppp = new PPerson('张思',22,'数据分析','羽毛球')ppp.pplay()
ppp.play()
console.log(ppp.name)// 抽象基类     不能直接实例化
// 抽象方法     只能出现在抽象类中，子类必须实现抽象方法
abstract class Animal{abstract name:stringabstract age:numberabstract play():any
}class Cat extends Animal{name:stringage:numberconstructor(name:string,age:number){super()this.name=namethis.age=age}play():void{console.log(`${this.name}`)}
}var cat=new Cat('咪咪',1)
cat.play()

接口

// 属性接口 interface
interface fullname{firstname:string;    // 属性接口中每个参数必须以;结束secondname:string;
}function prinffullname(name:fullname){console.log(`${name.firstname}----${name.secondname}`)
}var obj={age:18,firstname:"first",secondname:'second'
}prinffullname(obj)      // 如果传入的是外面定义的对象，可以包含其他属性
prinffullname({firstname:"first1",secondname:'second1'})  // 如果是直接这样传，只能包含定义接口时的参数// 批量约束
// 同一个约束可以用于多个函数// 接口可选属性
interface ffullname{firstname:string; secondname?:string;    // 可选参数，可传可不传
}// 封装ajax
/*
interface Config{type:string;url:string;data?:string;datatype:string
}
function ajax(config:Config):void{var rhr = new XMLHttpRequest();rhr.open(config.type,config.url,true)rhr.send(config.data)rhr.onreadystatechange=function(){if (rhr.readyState==4 && rhr.status==200){console.log('success')if (config.datatype=='json'){console.log(JSON.parse(rhr.responseText))}else{console.log(rhr.responseText)}}else{console.log('error')}}
}var obj1={type:'get',url:'http://127.0.0.1:8000',datatype:'json'
}ajax(obj1)error TS2304: Cannot find name 'XMLHttpRequest'.
*/
// 函数接口
interface funcInterFace{(name:string,age:number):string;    // 限制参数类型和返回值类型
}var funcIF:funcInterFace=function(name:string,age:number):string{return `${name} ---- ${age}`
}alert(funcIF('张三',19))// 可索引约束   对数组的约束    貌似意义不大
interface UserArr{[index:number]:string;
}var arr:UserArr=['111','222']
console.log(arr)// 对象    意义不大interface UserArr1{[index:string]:any
}var obj2:UserArr1={'b':200};    // 索引值是字符串
obj2['a']='100';          console.log(obj2)// 类约束
interface Animal1{name:string;               // 必须有的属性eat(str:string):void;      // 必须有的方法
}class Dog implements Animal1{   // implements关键字name:string;constructor(name:string){this.name=name};eat(str:string):void{console.log(`${this.name} ---${str}-- 吃狗粮`)}
}var dog1 = new Dog('花花')
dog1.eat('a')// 接口的扩展    接口的继承
interface PPPerson extends Animal1{    // 继承了Animail1work():void;
}class WWeb implements PPPerson{name:stringconstructor(name:string){this.name=name}eat(){                       // 需要实现所有继承关系中的方法}work(){}
}

泛型

// 泛型  传入的类型和输出的类型一致
function getData<T>(name:T):T{    // 类型是通过吊桶方法时<>中定义的return name
} console.log(getData<number>(10));console.log(getData<string>('10'));console.log(getData<Array<number>>([10,2]));console.log(getData<string[]>(['1','2']));// 泛型类
class Minclass<T>{      // 类型由实例化时定义的类型决定list:T[]=[];add(n:T):void{       // 也可以只指定参数的泛型，也可以只指定返回值的泛型this.list.push(n)}min():T{let minnum=this.list[0]for(let i=0;i<this.list.length;i++){if (minnum>this.list[i]){minnum=this.list[i]}}return minnum}
}var m = new Minclass<number>()  // 参数类型和返回值类型由实例化时定义的类型决定
m.add(1)
m.add(10)
m.add(9)
m.add(0)console.log(m.min())var s = new Minclass<string>()   // 参数类型和返回的类型由实例化时定义
s.add('a')
s.add('A')
s.add('B')
s.add('b')console.log(s.min())// 泛型接口
// 方法一
interface InterFunc<T>{(name:T):T
}
// 方法二
interface InterFunc2{<T>(name:T):T
}
// 方法一实现
function InterFuncA<T>(name:T):T{return name
}var InterFunca:InterFunc<string> = InterFuncA;
console.log(InterFunca('bbbb'));// 方法二实现
var interfuncB:InterFunc2 = function<T>(name:T):T{return name
}
console.log(interfuncB<string>('aaa'));// 把类作为参数的泛型类
// 一般的泛型都是ts的数据类型，我们也可以把类作为数据类型校验传入的对象的校验依据class User{name:string|undefined;   // 如果没，没有初始化值，一定要指定 undifined类型age:number|undefined;constructor(parms:{name:string,age:number}){this.name=parms.name;this.age=parms.age}
}class MysqlDB<T>{add(info:T):boolean{return true}
}var db = new MysqlDB<User>();    // 此User就是泛型校验
db.add(new User({name:'hahahaha',age:10}))

案例

// 主要还是封装的思想和避免代码冗余
class UserInfo{name:string|undefined;age:number|undefined
}class Article{title:string|undefined;desc:string|undefined;isShow?:boolean|undefined;constructor(title:string,desc:string,isShow?:boolean){this.title=title;this.desc=desc;this.isShow=isShow || true}
}
// 类接口
interface DBI<T>{add(info:T):boolean;delete(id:number):boolean;update(info:T,id:number):boolean;get(id?:number):T[];
}class MysqlDBI<T> implements DBI<T>{       // 类接口 + 类泛型list:T[]=[];add(info: T): boolean {try{this.list.push(info);return true}catch{return false}}delete(id: number): boolean {throw new Error("Method not implemented.");}update(info: T, id: number): boolean {throw new Error("Method not implemented.");}get(id?: number): T[] {if(id){return [this.list[id]]}else{return this.list}}
}
// 实例化类
var mysqldb = new MysqlDBI<UserInfo>();var u = new UserInfo();
u.name='aaaa'
u.age=20mysqldb.add(u)console.log(mysqldb.list)
console.log(mysqldb.get())
// 实例化类
var aaa = new Article('title','desc')var mysqldb2 = new MysqlDBI<Article>();
mysqldb2.add(aaa);
console.log(mysqldb2.get())
console.log(mysqldb2.list)

TypeScript学习记录相关推荐

typescript学习记录-安装
ide:WebStorm 2022.3.2 安装安装Node.js 下载安装参考文章:https://www.bilibili.com/video/BV1Xy4y1v7S2?p=2 首先,下载No ...
typescript学习记录-练习项目-贪食蛇
参考文章:https://www.bilibili.com/video/BV1Xy4y1v7S2?p=22 项目搭建将之前的package.json,tsconfig.json,webpack.co ...
TypeScript学习总结
TypeScript学习总结前言一.TypeScript是什么? 二.JavaScript 与 TypeScript 的区别三.TypeScript基础 3.3.TypeScript 基础语法 ...
TypeScript学习文档-基础篇（完结）
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
JavaScript学习记录01快速入门、基本语法、严格检查模式
文章目录 JavaScript学习记录01快速入门.基本语法.严格检查模式 1.1什么是JavaScript 1.2认识JavaScript框架 1.3快速入门 1.4基本语法入门 1.5数据类型简介 ...
Pytorch学习记录-torchtext和Pytorch的实例（使用神经网络训练Seq2Seq代码）
Pytorch学习记录-torchtext和Pytorch的实例1 0. PyTorch Seq2Seq项目介绍 1. 使用神经网络训练Seq2Seq 1.1 简介,对论文中公式的解读 1.2 数据预 ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
springboot @cacheable不起作用_Springboot学习记录13 使用缓存：整合redis
本学习记录的代码,部分参考自gitee码云的如下工程.这个工程有详尽的Spingboot1.x教程.鸣谢! https://gitee.com/didispace/SpringBoot-Learnin ...
【Cmake】Cmake学习记录
Cmake学习记录 1.1 常例 add_library(gen_reference_infogen_reference_info/gen_reference_info.hgen_reference_ ...

TypeScript学习记录

TypeScript学习记录

vscode设置自动编译

数据类型

类和函数

接口

泛型

TypeScript学习记录相关推荐

最新文章

热门文章