typescript
一、typescript
1.官网
https://www.tslang.cn/
2.简介
TypeScript是[微软](https://baike.baidu.com/item/微软/124767)开发的一个开源的[编程语言](https://baike.baidu.com/item/编程语言/9845131)，通过在[JavaScript](https://baike.baidu.com/item/JavaScript/321142)的基础上添加静态类型定义构建而成。TypeScript通过TypeScript[编译器](https://baike.baidu.com/item/编译器/8853067)或Babel转译为JavaScript代码，可运行在任何[浏览器](https://baike.baidu.com/item/浏览器/213911)，任何[操作系统](https://baike.baidu.com/item/操作系统/192)。
3.安装
npm i typescript -g
测试是否安装成功
tsc -v
4.编译
(1)手动编译
在指定目录下创建一个index.ts文件，在命令行中进入到这个目录下，执行命令
tsc index.ts
执行完成后会在当前目录下自动的生成一个同名.js文件
(2)自动编译-vscode
①创建一个名称为ts-demo的文件夹，并且在改文件夹下创建一个index.ts文件
②在命令行中，进入到ts-demo目录下，执行初始化命令
tsc --init
生成tsconfig配置文件
修改其中的outDir选项，把注释解开，改为./js
③在vscode的任务栏中找到 终端>运行生成任务>监视tsconfig.json
这样在ts文件中编写代码，就会自动在js目录下生成index.js文件了。
5.基本使用
(1)声明变量和变量的数据类型
ts的最大的特点是进行严谨的数据类型验证，要求我们在声明一个变量时，就定义该变量的数据类型，并且赋值的内容必须与指定的类型一致。
var 变量名 : 数据类型名称 var 变量名 : 数据类型名称 = 内容
(2)常见数据类型
string字符串、number数字、boolean布尔值、function函数、object对象、array数组...
(3)在ts声明数组
var 变量名称 : Array<数组元素的数据类型>;
示例代码：
var users : Array<string>; // users = ['小王',true]//此时数组的成员数据类型如果不是字符串的话，就会出现警告 users = ['张飞','李四']
(4)ts新增的数据类型
①元组
元组是特殊的数组，元组的元素个数和数据类型都必须要预先设置好才能使用
var 变量名 : [ 第一个成员的数据类型，第N成员的数据类型 ]
示例代码：
var arr1 : [ string,number ]; // arr1 = [100,200]//第一个成员的数据类型不匹配 // arr1 = ['100',200,true]//目标只有两个成员，但是现在给了三个成员 arr1 = ['小飞',50]
②枚举
enum 变量名称 { 值1,值N }
示例代码：
enum weeks { '星期一' = 1,'星期二','星期三' }
console.log(weeks.星期三)
枚举中成员的默认下标是0
③any
任意类型
示例代码：
var info : any; info = 10 info = '小张' var arr2 : Array<any> arr2 = ['张飞',100,true]
④void
void表示函数没有返回值
⑤never
表示那些永远不存在的数据类型
6.函数
ts中的函数和es6中有很多相同之处
(1)函数的声明
function 函数名称() : 函数的返回值类型{ ... }
示例代码：
function say() : void{
console.log('func say...')
}
say();
(2)函数的参数
①默认参数
function add(num1 :number,num2:number = 100 ) : number{
return num1 + num2;
}
// console.log(add(100,50));
console.log(add(60))//此时只传递了一个参数，第二个参数的默认值是100
console.log(add(60,60))//传递了两个参数，第二个参数的值是60
②可选参数
function dologin(username:string,password?:string) :void {
console.log(username)
console.log(password)
}
dologin('user01','1111')
// dologin('user01')//此时第二个参数是可选的，如果没有传递则是undefine
③剩余参数
function getStr(str1 : string,...str2:Array<any>) : void{
console.log(str1)
console.log(str2)
}
getStr('abc','def','ghj',100,true,{username:'小飞'})
第一个参数会被一个形参接收到，剩下所有的参数都会被第二个参数接收到，并把每一个实参作为数组的成员。
7.接口
interface，起约束作用，可以把声明好的接口当成数据类型使用。
示例代码：
//声明接口
interface Person{
name : string,
phone : number
}
//使用接口
var user1 : Person;
user1 = {
name : '小王',
phone : 15511112222
}
8.装饰器
装饰器是一种特殊的类型声明，它可以附加到类、属性、方法、参数上，用来修饰它们默认属性、行为。
装饰器可以说一个特殊的函数。
类装饰器、属性装饰器、方法装饰器、参数装饰器
装饰器它也是es7的标准特性之一
要使用装饰器的话，需要把tsconfig.json中的"experimentalDecorators": true启用
(1)类装饰器
在类的外部，改变类的行为（属性和方法）
①普通装饰器
声明装饰器
function logClass(target : any):void{
target.prototype.name = '千里马'
}
声明一个类，并调用装饰器
@logClass
class Animal{}
var d1 = new Animal()
console.log(d1)
在声明类之前，通过@符号和装饰器名称来调用装饰器
②装饰器工厂
如果需要在调用装饰器时，传递额外的参数来影响类的行为
function logClass(params:any){
return function(target:any){
target.prototype.name = params;
}
}
//使用装饰器（注入）
@logClass('汗血宝马')
class Animal{}
var d1 = new Animal();
console.log(d1)
(2)属性装饰器
声明属性装饰器
function logProperty(target:any,propertyName:any){
console.log(target,1111)
console.log(propertyName,2222)
}
使用装饰器
class Animal{
@logProperty
type:string = ''
}
属性装饰器的第一个参数是类的构造函数，第二个参数是属性名称
(3)方法装饰器
声明方法装饰器
function logAction(target:any,methodName:any,desc:any){
console.log(target,1111)
console.log(methodName,2222)
console.log(desc,3333)
}
调用方法装饰器
class Animal{
@logAction
eat():void{
console.log('eating...')
}
}
方法装饰器可以接收三个参数：
- 第一个参数是方法所在的类的构造函数
- 第二个参数是方法名称
- 第三个参数是方法权限的描述
(4)参数装饰器
声明装饰器
function logParams(target:any,methodName:any,paramsIndex:number){
console.log(target,1111)
console.log(methodName,2222)
console.log(paramsIndex,3333)
}
调用装饰器
class Animal{
eat(num:number,@logParams type:string):void{
console.log('eating...')
}
}
参数装饰器可以接收三个参数：
- 第一个参数是所在的类的构造函数
- 第二个参数是所在的函数名称
- 第三个参数是参数的索引位置
二、ts结合vue
1.初始化新版脚手架项目
? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, TS, Router ? Choose a version of Vue.js that you want to start the project with 2.x ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json ? Save this as a preset for future projects? (y/N) n
2.新语法
(1)定义组件（class）
<script lang="ts">
import { Vue,Component } from 'vue-property-decorator'
@Component({})
export default class Home extends Vue{
}
</script>
(2)定义初始数据
在类中，以属性的方式来定义初始数据
msg : string = ''
(3)定义方法
<script lang="ts">
import { Vue,Component } from 'vue-property-decorator'
// 调用类装饰器
@Component({})
export default class Home extends Vue{
//定义初始数据
msg : string = ''
mounted() {
console.log('挂载完成...')
this.changeMsg();
}
// 定义函数
changeMsg():void{
this.msg = '你迈不过去的坎'
}
}
</script>
生命周期钩子函数想要起作用的话，需要在声明类之前使用Component装饰器
(4)计算属性
通过get关键词来定义计算属性
//计算属性
get newnum():number{
return this.num + 50;
}
(5)组件通信
①父子组件
第一步：创建子组件，和父组件方式相同，都使用ts
<template>
<div>
<h1>child组件</h1>
</div>
</template>
<script lang="ts">
import { Vue,Component } from 'vue-property-decorator'
@Component({})
export default class Child extends Vue{
}
</script>
<style>
</style>
第二步：在父组件中引入子组件，并注册
<script lang="ts">
import vChild from './child.vue'
import { Vue,Component } from 'vue-property-decorator'
// 调用类装饰器==很重要，不使用装饰器的话，生命周期等无效
@Component({
components:{ vChild }//注册子组件
})
第三步：在父组件使用子组件时，传递参数
<v-child :homemsg="msg"></v-child>
第四步：在子组件中接收数据
通过Prop装饰器来接收数据
<template>
<div>
<h1>child组件</h1>
<p>父组件传递的数据：{{ homemsg }}</p>
</div>
</template>
<script lang="ts">
import { Vue,Component,Prop } from 'vue-property-decorator'
@Component({})//使用类装饰器
export default class Child extends Vue{
@Prop({})//使用属性装饰器
homemsg : string | undefined
}
</script>
②子父组件
第一步：在父组件中声明函数，用来接收子组件传递的数据并改变自身的数据
receiveMsg(str:string):void{
this.childmsg = str;
}
第二步：在父组件使用子组件时，通过自定义事件传递定义好的函数
<v-child :homemsg="msg" @homemethod="receiveMsg"></v-child>
第三步：在子组件中通过Emit装饰器来触发父组件传递的自定义事件，并传递参数
<script lang="ts">
import { Vue,Component,Prop,Emit } from 'vue-property-decorator'
@Component({})//使用类装饰器
export default class Child extends Vue{
@Prop({})//使用属性装饰器
homemsg : string | undefined
@Emit('homemethod')
send():string{
return '都是因为你腿太短了'
}
}
浙公网安备 33010602011771号