现在好多前端框架都开始支持typescript,ts本身支持es5和es6写法,但是ts本身对js语法进行了进一步封装,vue3.0开始全面支持,但是惭愧自己一直不了解ts,趁着这两天有时间,自己总结下,欢迎评论留言交流,如有不对的地方,会及时更正,还望见谅
1.全局安装typescript
npm install typescript -g
2,编译ts文件
1,新建文件 index.ts
内容随写上 console.log(‘你好’)
2,cmd在index目录下,执行tsc index.ts,会自动在统同级目录下生成index.js文件
3.如果每次都要自动编译就会非常的麻烦,所以编辑器中可以配置一下,就是在你写ts文件的时候,会自动生成js文件 ,另一种不需要手动配置,一般在一些支持ts语法的框架中可以直接使用,因为webpack打包时候已经进行配置进行编译
手动配置vscode实时编译ts文件生成js文件
1.首先在项目中命令生成 tsconfig.json配置文件--运行命令 tsc --init
2.进入配置文件中,将配置项 outDir: './' 放开注释
3.查看菜单栏--任务-监视任务
4.ts中的数据类型和js语法中的数据类型还是略有不同的,ts为了使代码更加的规范,增加了类型的校验,这点和其他语言比较相似
布尔类型(boolean)
数字类型number
字符串string
数组 array
元组类型(tuple)
枚举类型(enum)
任意类型(any)
null undefined void类型 never类型
代码示例:-字符串示例
var a:string = '123'
a= 113 // 由于上边指定了类型,下边就会报错
数组示例
var arr:number[] = [12,3,5] // 如果里边元素有一个是字符串的话就会error
var arr:Array<number> = [12,2,3] // 如果元素有一个是字符串的话也是error
元组类型属于数组的一种:就是里边的类型可以是多种数据类型-给数组中每一个位置指定一个类型
var arr:[number,string] = [1,'hello']
枚举类型
enum Name {a,b,c}
enum Name {a =1,b=2,c=3}
var aa:Name =Name.a // 如上如果已经赋值的话,就直接打印出值1,如果没有的话,就打印下标0
任意类型和js中没有指定类型有点相似
var name:any = 23
underfind类型
示例:
var num:number
console.log(num ) // 会报错,因为没有赋值,是undefined
var num:undefined
console.log(num) // 这样是正确的
也可以指定多类型
var num:number|undefined
null类型和上边同理
void类型:一般用于定义方法时候没有返回值,表示没有任何类型
function run():number{
return 123
}
run()
never表示从不会出现的值
5.ts中函数的定义-参数和返回值指定类型
匿名函数
var fun = function(name:string,age:number):number{
return 123
}
声明函数
function fun:string(name:string,age:number){
return 123
}
么有返回值的函数
function fun():void{
console.log(123)
}
fun()
6。方法中的可选参数-默认参数-剩余参数
方法中第二个参数可以传可以不传,参数后边加?号
function run (nameL:string,age?:number):string{
return 123
}
run('zpc') // 可以直接调用
run('zpc',28) // 也可以
默认参数示例:es5中是不能设置默认参数,但是es6中和ts中可以设置默认参数
function run (nameL:string,age:number=20):string{
return 123
}
三点运算符接受,传过来的参数
function sun (...result:number[]):number{
}
sum(1,2,3,4)
7.函数的重载--不会像es5中进行覆盖。会进行类型判断之后走哪个方法
8.typescript中的类
es5中的类的定义:代码示例
funtion Person(name){
this.name = name
this.run = function(){
console.log(this.name)
}
}
var p = new Person('zpc')
p.run //打印结果是zpc
ts语法定义类:代码示例
class Person{
name:string;
constructor(str:string){
this.name = str;
}
run():viod{
alert(this.name)
}
getName():string{
return this.name
}
setName(name:string):void{
thid.name = name
}
}
var p = new Person('zpc')
p.run()
p.getName()
p.setName('lisi')
9.ts中实现继承
实现继承主要是两个关键字 super extends
class Person{
name:string;
constructor(name:string){ // 命令构造函数
this.name = name;
}
run():string{
return `${this.name}在运动`
}
}
var p = new Person('zpc')
p.run() // 打印zpc在运动
class Web extends Person{ /// extends之后会自动继承父类的方法
constructor(name:string){
super(name) // 表示调用父类的构造函数:初始化父类的构造函数
}
}
var w = new Web('李四')
alert(w.run())
如果父类和子类中都有共同的方法的话,子类进行调用的话,会先执行子类的,如果子类中没有,找父类的
10.类里边的修饰符-定义属性的时候提供了三种修饰符
public:公有 :类里边,外边,子类都可以访问
protected:保护类型 类里边,子类中可以访问,在类外边没法访问
provite:私有: 类里边可以访问,,,但是在类外边和子类中都没法访问
不加修饰符的话默认是public
11.静态属性和静态方法
es5中的静态方法示例:
function Run (){
this.run1 = function(){}
}
Run.run = function(){} ---这个方法叫做静态方法
Run.run() -静态方法的调用
ts中静态方法一般比较少用,就是在类中使用关键字static,下边是代码示例:
class Person{
name:string;
age:number;
constructor(name:string){
this.name = name
}
static run(){ // 类名直接调用
console.log('hello')
}
}
Person.run()
12.抽象类:提供其他类继承的基类,不能直接被实例化,关键字abstract定义抽象类和抽象方法不包含具体实现,并且必须在派生类中实现
补一下ts中多态的概念:父类中定义的方法不去实现,让继承它的子类去实现,每一个子类都有不同的表现,就叫做多态
父类定义的抽象方法在子类中必须实现
abstract class Animal{
public name:string;
abstract eat():any;
construcor(name:string){
this.name = name
}
}
class Dog extends Animal{
construcor(name:string){
super(name)
}
eat(){
console.log(this.name + '吃肉')
}
}
var a = new Dog('wangcai')
a.eat()
今天没时间总结先到这里,完事继续补上