中国遵义门户网站,wordpress外网排版问题,外贸优化网站制作,网站建设写代码自己怎么创业TypeScript是什么#xff1f;
以JavaScript为基础构建的语言一个JavaScript的超集可以在任何支持JavaScript的平台上执行TypeScript扩展了JavaScript并添加了类型TS不能被JS解析器直接执行
TypeScript开发环境搭建
下载Node.js安装Node.js使用npm全局安装TypeScript#x…TypeScript是什么
以JavaScript为基础构建的语言一个JavaScript的超集可以在任何支持JavaScript的平台上执行TypeScript扩展了JavaScript并添加了类型TS不能被JS解析器直接执行
TypeScript开发环境搭建
下载Node.js安装Node.js使用npm全局安装TypeScript输入npm i -g typescript创建一个ts文件进入ts文件所在目录执行tsc xxx.ts
TypeScript类型声明
例如let a:number设置了变量类型之后使用过程中a只能是数字。如果变量的声明和赋值是同时进行的TS可以自动对变量进行类型检测let c false。ts的类型声明同样可以用在参数上面。
function add(a:number,b:number){console.log(ab)
}
add(1,1)变量类型 any如果给变量声明为any则相当于关闭了ts变量的声明检测就和js中一样。如果声明变量时不声明类型会自动检测为any类型隐式any。unknownany类型的变量可以赋值给任意变量所以会影响到这个变量但是unknown不会如果想要赋值需要对这个变量进行类型判断之后再进行赋值或是使用类型断言之后再赋值。void通常用于函数的返回值类型的定义表示没有返回值never通常用于函数的返回值类型的定义表示永远都不会返回结果
let s:string
let e:unknown
if(typeof e string ){s e;
}可以使用|来连接多个类型联合类型
let b:number|string
b 1
b 1类型断言可以用来告诉解析器变量的实际类型。
s e as string//方式一
sstringe//方式二返回值的类型定义 function fun():void{return
}对象类型用来指定时就是指定这个对象包含的属性以及属性的类型在属性名后面加一个代表是可选属性。但如果加上[propname:string]:any除了已经设置了类型的属性其他的都是可以是任意类型。另外枚举也是设置对象的类型 let f:{name:stringage?:number}
f{name:
}let f:{name:string,[propname:string]:any}
f{name:,age:10
}函数设置
let g:(a:number,b:number)number
g function(n1:number,n2:number):number{return 10
}数组类型定义还有一种方式是元组则是固定长度的数组
let h:number[]
h [1,2,3]
let d:Arraynumber
d [4,5,6]
let i:[string,string]
i [1,2]|表示或表示与的使用情景为let j :{name:string} {age:number}类型的别名
type myType 1 | 2 | 3 | 4
let m:myType 1
m 1ts文件配置
自动监视tsc app.ts -w监视整个文件夹的ts并进行编译需要新建一个配置文件tsconfig.jsoninclude指定哪些文件需要被监听执行./src/****表示任意目录*表示任意文件exclude指定哪些文件不包含写法与include一致compilerOptions编译器的选项他有很多子选项 target用来ts被编译的es版本module指定要使用的模块化的规范lib用来指定项目中要使用的库outDir用来指定文件编译后所在的目录outFile将代码合成为一个文件allowJs是否对js文件进行编译默认是falsecheckJs是否检查js代码removeComments是否移除注释默认falsenoEmit不生成编译后的文件默认falsenoEmitOnError存在错误时不生成编译后的文件alwaysStrict设置编译后的文件是否使用严格模式默认为falsenoImplicitAny不允许隐式的any类型noImplicitThis不允许不明确类型的thisstrictNullChecks严格的检查空值strict严格检查的总开关设置为true时所有严格检查都打开
类的介绍
要想面向对象操作对象首先便要拥有对象那么下一个问题就是如何创建对象。要创建对象必须要先定义类所谓的类可以理解为对象的模型程序中可以根据类创建指定类型的对象举例来说:可以通过Person类来创建人的对象通过Dog类创建狗的对象通过Car类来创建汽车的对象不同的类可以用来创建不同的对象。
定义类
class 类名 {属性名类型constructor(参数类型){this.属性名 参数}方法名(){....}
}class Person{// 定义实例属性需要创建对象实例进行访问name:string 孙悟空// 在属性前使用static关键字可以定义属性静态属性即不用创建对象实例能访问static age:number 12// 定义只读属性readonly sex:string 男// 定义只读静态属性static readonly love:string 篮球// 定义方法sayHello(){console.log(Hello!!!)}}
const per new Person()console.log(per.name)
console.log(Person.age)
per.sayHello()构造函数
在构造函数中通过传参并用this对类的属性进行赋值才可以获得不同的实例对象。
class Dog{name:stringage:number// 构造函数会在对象创建时调用时constructor(name:string,age:number) {// 在实例方法中的this代表的是当前的实例所以可以通过this给当前实例对象添加属性this.name namethis.age age}
}const dog new Dog(旺财,1)
console.log(dog)继承
// 使Dog继承Animal的类Animal被称为父类Dog被称为子类继承后子类会继承所有的父类
// 如果需要在子类中添加一些父类中没有的属性或方法直接加就行
// 如果在子类中添加了和父类中相同的方法子类的方法会覆盖父类的方法这个称为方法的重写
// 父类还有一个名字那就是超类在类的方法中super就是当前类的父类
abstract class Animal{name:stringage:number// 构造函数会在对象创建时调用时constructor(name:string,age:number) {// 在实例方法中的this代表的是当前的实例所以可以通过this给当前实例对象添加属性this.name namethis.age age}sayHello(){console.log(叫)}
}
class Dog extends Animal{run(){console.log(this.name在跑)}sayHello() {console.log(汪汪汪)}
}class Cat extends Animal{sayHello() {super.sayHello();}age:numberconstructor(name:string,age:number) {// 如果在子类中写了构造函数在子类的构造函数中必须对父类的构造函数进行调用super(name,age);this.age age}
}const dog new Dog(旺财,1)
console.log(dog)
dog.sayHello()
dog.run()
const cat new Cat(喵喵,2)
console.log(cat)
cat.sayHello()抽象类
以abstract开头的类是抽象类抽象类与其他类区别不大只是不能用来创建对象抽象类就是专门用来被继承的类抽象类中可以添加抽象方法抽象方法用abstract开头没有方法体抽象方法只能定义在抽象类中子类必须对抽象方法进行重写。
abstract class Animal{name:stringage:number// 构造函数会在对象创建时调用时constructor(name:string,age:number) {// 在实例方法中的this代表的是当前的实例所以可以通过this给当前实例对象添加属性this.name namethis.age age}// 抽象方法用abstract开头没有方法体抽象方法只能定义在抽象类中子类必须对抽象方法进行重写abstract sayHello():void
}接口
接口就是用来定义一个类的结构接口是可以重复声明的接口中的所有方法都是抽象方法定义类是可以使类去实现一个接口实现接口就是满足接口的要求即是对类的限制。
// 接口用来定义一个类结构用来顶一个类中应该包含哪些属性和方法同时接口也可以当成类型声明去使用
// 接口是可以重复声明的
interface myInterface{name:stringage:number
}
interface myInterface{sex:string
}
const obj:myInterface {name:sss,age:11,sex:男
}//接口可以在定义类的适合去限制类的结构接口中的属性都不能有实际的值接口只定义对象的结构而不考虑实际值
interface myInter{name:stringsayHello():void
}class Myclass implements myInter{name:stringconstructor(name:string) {this.name nameconsole.log(name)}sayHello() {console.log(this.name在喵喵喵)}
}class Dog2 extends Myclass{}
const dog3 new Dog2(旺财)
dog3.sayHello()属性的封装
普通情况下类的属性可以被任意修改会导致对象中的数据变得非常不安全。 TS可以再属性前添加属性的修饰符
public 修饰的属性可以再任意位置访问修改 是默认值private 私有属性私有属性只能在类的内部访问可以通过在类中添加方法使这个私有属性被外部访问TS中可以设置getter方法的方式protected 受包含的属性只能在自己和自己子类中访问 注意可以直接将属性定义在构造函数中
class Friend{private _name:stringprivate _age:numberprotected _sex:stringconstructor(name:string,age:number) {this._name 孙悟空this._age 12}// 获取getName(){return this._name}// 修改setAge(value:number){if(value 0){this._age value}}get name(){return this._name}set name(value:string){this._name value}
}
const fri new Friend(竹巴吉,11)
console.log(fri.getName())
fri.setAge(-11)
fri.name 旺财
console.log(fri)class C{constructor(public name:string,public age:number) {}}
const c new C(SUNWU,1)泛型
在定义函数或类时如果遇到不明确类型的属性就可以使用泛型可以直接调用具有泛型的函数。
function fnT(a:T):T{return a
}
fn(10)//不指定泛型TS可以自动对类进行推断
fnstring(hello)//指定泛型
function fn2T,K(a:T,b:K):T{return a
}
fn2number,string(1,1)
function fn3T extends myInter(a:T):string{return a.name
}
class MyClassT{name:Tconstructor(name:T) {this.name name}
}
const mc new MyClassstring(孙悟空)
