ts语法(学习笔记)

前一阵子在vue3和elementPlus官网都看到大堆的ts语法,为了向vue3作迁移,还是把ts,pinia,vue3的组合式语法一起学了,以后做项目可以使用。
Ts看的尚硅谷的教程。
第2集:声明语法,let a:number后面是基本类型。(number,string,boolean,)或者let c:boolean=true//声明一个变量,同时指定它的类型为number,如果同时打开js和ts会报错,关掉一个就可以了。Let c=false后会自动把c变为bool类型,如果变量赋值和声明式同时进行的,ts会自动对变量进行检测。Ts更多的应用场景是针对函数。举个js的例子Function sum(a,b){return a+b}的调用sum(123, “456”),不要加a:和b:,那是webstorm的提示。解决办法:function sum(a:number,b:number){return a+b}。any能不用不用。
函数返回值的类型 function sum(a:number,b:number): number{return a}。
第3集:ts中类型(扩展了js的类型),可以使用字面量进行类型声明,let a:10,a=11会报错。字面量一般的使用方式:let b:”male”|”female”或者let c:boolean|string;
any(任何类型) ,一个变量设置类型为any后相当于对该变量关闭了ts类型检测。使用ts时不建议使用。如果不指定类型默认就是any。
Unknown(未知类型),let e:unknown,any类型的值赋值给别人也可以,let s:string;let d;s=d;d=2.
Unknown不同,let e:unknown;e=’hello’,let s:string;s=e(会报错),unknown就是一个类型安全的any,unknown类型的变量不能直接赋值给其它变量。解决办法:if(typeof e===”string”){
S=e;}。类型断言:s=e as string或者s=a
void 用于函数的类型返回(空值undefine)。
Never 表示永远不会返回结果。如function fn2():never{ throw new Error(‘报错了’)}
第4集:类型
Object, 如let b:{name:string},对象必须只包含name属性且值为string类型,可选参数let b:{name:string,age?:number}任意属性let c{name:string,[propName:string]:any}要求对象里有name属性,其它的属性是啥都行。定义函数属性let d:(a:number,b:number)=>number,d=function(n1:number,n2:number):number{return n1+n2}
Array:let e:number [];e是一个数值数组或者let g:Array,任意类型let g:Array
Turple:元组,固定长度的数组。Let h:[string,string],h=[‘hello’,’abc’]
Enum:枚举,enum Gender{Male=0,Female=1},let i:{name:string,gender:Gender};i={name:’swk’,gender:Gender.Male}console.log(i.gender===Gender.Male),
&运算符,let j:{name:string}&{age:number}
类型别名:let k:1|2|3|4|5;type myType=1|2|3|4|5;let m:myType;
第5集:使用vscode先执行tsc –init使其成为ts管理的包,就可以使用tsc指令了。Tsconfig.json是ts编译器的配置文件。Include,**任意目录,*任意文件,include被包括的文件,exclude被排除的文件。Extend继承配置文件。Files.限定被编译的文件。只有在编译的文件少时才使用。compilerOptions:编译器选项,target:”ES6”,”ESNext”最新的es版本。Module模块指定要使用的模块化的规范,默认采取ES6。Lib代表库,用来指定项目中要使用的库,当代码在nodejs中运行的时候使用dom,outDir,用来指定编译后js所在的目录。outFile将代码合并成一个文件。实际中用打包工具这个用的少。
第6集:allowJs:true是否编译目录中的js文件。checkJs:false是否检查js代码是否符合语法规范(是否符合ts语法规范)。这两个是一套。removeComments:false是否移除注释。noEmit:true不生成编译后的文件。noEmitOnError:当有错误的时候不生成编译文件。alwaysStrict:false.在js文件第一行加”use strict”开启严格模式。noImplicitAny:true不允许使用隐式any类。noImplicitThis:true,不允许不明确类型的this.strictNullChecks:true严格检查空字符串:”strict”:false所有严格检查的总开关。
用webpack打包我直接跳过了,到时候用vite打包我直接网上去查资料就行了。
第十三集:class Person{
readonly name:string=“孙悟空”
static age:number=18
sayHello(){
console.log(“hello”)
}
}
const per=new Person()
console.log(per)
console.log(Person.age)
类的基本用法和静态属性,只读属性。静态和只读可以一起用。
第十四集:类的构造函数的基本用法:
class Dog{
name:string
age:number
constructor(name:string,age:number){
this.name=name
this.age=age
}
bark(){
alert(‘汪汪汪’)
}
}
const dog=new Dog(‘小黑’,4)
const dog2=new Dog(‘小白’,8)
第十五集:继承:
(function(){
class Animal{
name:string
age:number
constructor(name:string,age:number){
this.name=name;
this.age=age;
}
sayHello(){
console.log(‘动物在叫’)
}
}
class Dog extends Animal{
sayHello(){
console.log(‘狗在叫’)
}
}
class Cat extends Animal{

}

})
第十六集:super关键字,用法跟python和java没啥差别,知道一下语法就行。继承语法默认使用父类的所有方法和变量,然后用子类的资源覆盖它,super代表父类或者父类实例,但无法打印,多用于super使用父类构造函数。
(function(){
class Animal{
name:string
constructor(name:string){
this.name=name;
}
sayHello(){
console.log(‘动物在叫’)
}
}
class Dog extends Animal{
age:number
constructor(name:string,age:number){
super(name)
this.age=age
}
sayHello(){
console.log(this.age+“岁的”+this.name+“在叫”)
}
}
const dog=new Dog(“狗”,18)
dog.sayHello()
})()
第17集:抽象类前面加abstract,只能用于继承不能用于创造实例。抽象类里面的方法名前面加abstract就是抽象方法,子类必须实现。
第18集:接口用来定义一个类的结构,声明应该包含的变量和方法。接口可以重复定义,会添加。接口基本使用。接口中的所有属性都不能有实际的值。接口有点类似抽象类,但不同的是接口中的方法都是抽象方法,而抽象类可以有实际方法。使用implements来调用。
这些概念只在ts中有。
第19集:属性的封装,通过在类中添加方法使得属性可以被外部访问。
class Person{
private _name:string
private _age:number
constructor(name:string,age:number){
this._name=name
this._age=age
}
//定义方法获取name属性
getName(){
return this._name
}
setName(value:string){
this._name=value
}
setAge(age:number){
if(age>=0){
this._age=age
}
}
}
const per=new Person(‘孙悟空’,18)
属性存取器
get name(){
return this._name
}
set name(name:string){
this._name=name
}
}
const per=new Person(‘孙悟空’,18)
console.log(per.name)
protected受保护属性只能在当前类及其子类中使用。
第20集:泛型,一些很麻烦的鬼写法,以后用到了再说吧。

猜你喜欢

转载自blog.csdn.net/returnadsss/article/details/130036677