目录
1.Typescript
1.1编程语言的类型
1.动态类型语言 在运行时间才知道代码的值 2.静态类型语言 定义代码的类型
1.2javascript
1.可扩展的javascript 2.静态类型风格的类型系统 3.从es6到es10甚至是esnext的语法支持 4.兼容各种浏览器、各种系统、服务器、开源 5.增强id和编辑功能
1.3为什么要使用Typescript
1.程序更容易理解 2.效率更高 3.可以在不同的代码块和定义中跳转 4.代码自动补全 5.编译期间能够发现大部分错误 6.杜绝一些比较常见的错误 7.增加学习成本 8.短期内增加一些开发成本
1.4安装Typescript
# 全局安装tsc 指定版本 npm install -g typescript@3.8.3 # 查看当前版本号 tsc -v
1.5创建test.ts文件
const hello =(name:string)=>{
return `hellow ${name}`
}
hello('bus')
1.6生成js文件
#在文件目录执行cmd 命令 tsc test.ts
1.7原始类型
let isDone: boolean =false; let age: number = 10; let firstName: string = "12"; let u:undefined = undefined; let n:null = null; let num: number = undefined; let userName:string = null; /*任意类型*/ let notSure: any = 4; notSure = "1231"; notSure = true;
1.8数组和元组
/*数组*/
let arrayOfNumbers: number[] = [1,2,3,4];
arrayOfNumbers.push(4)
function test(){
console.log(arguments)
}
/*元组*/
let user:[string,number] = ['busl',2]
/*指定push string number 两种类型*/
user.push(12)
1.9Interface接口
//对对象的形状（shape）进行描述
//Duck Typing （鸭子类型）
// 定义对象类型属性规则
/*
* ? 这个属性可选可不选
* readonly 只读不能赋值
*
* */
interface Person{
readonly id: number;
name:string;
age?:number;
}
let viking: Person = {
id:1,
name:"busl",
age:20
}
2.0Function函数
// 定义参数类型和返回类型 ?可选
const add=(x:number,y:number,z?:number): number=>{
if(typeof z == 'number'){
return x +y +z
}else{
return x+y
}
}
let result = add(1,2);
interface ISum{
(x:number,y:number,z?:number):number
}
let add1:ISum = add;
//: 后面声明类型
let add2:(x:number,y:number,z?:number)=>number=add;
2.1类型推论 联合类型和类型断言
//联合类型 union types ，可以给一个值定义两个类型
let numberOrString: number | string
numberOrString = 'adc'
numberOrString = 123
//但之后只能访问两个类型的共有方法 使用类型断言
function getLength(input:string | number): number{
const str = input as string
if(str.length){
return str.length
}else{
const number = input as number
return number.toString().length
}
}
// type guard 自动缩小类型范围，改写上面函数
function getLength2(input:string | number): number{
if(typeof input=="string"){
return input.length
}else{
return input.toString().length
}
}
2.2类Class
1.类：定义了一切事物的抽象特点
2.对象：类的实例
3.面向对象oop三大特性:封装、继承、多态
4.Public：修饰的属性或者方法是公有的
5.private：修饰的属性或方法是私有的
6.Protected：修饰的属性或方法是受保护的
class Animal {
name: string;
constructor(name) {
this.name = name;
}
public run() {
return `${this.name} is runing `
}
}
const snake = new Animal("busl")
console.log(snake.run())
//继承
class Dog extends Animal {
private bark() {
return `${this.name} is barking`
}
}
const xiaobao = new Dog("xiaobao");
console.log(xiaobao.run())
console.log(xiaobao.bark())
//多态
class Cat extends Animal{
static categories = ["mammal"]
constructor(name) {
super(name);
console.log(this.name)
}
run(){
return "meow:" +super.run()
}
}
const maomao = new Cat("maomao");
console.log(maomao.run())
//类上面直接访问的属性和方法
console.log(Cat.categories)
2.3.类和接口
//类可以使用implements 来实现接口
interface Radio{
sswitchRadio(trigger: boolean): void
}
interface Battery{
checkBatterStatus(): void
}
interface RadioWithBattery extends Radio{
checkBatterStatus(): void
}
class Car implements Radio{
sswitchRadio(trigger: boolean): void {
}
}
class Cellphone implements Radio,Battery{
sswitchRadio(trigger: boolean): void {
}
checkBatterStatus(): void {
}
}
class Cellphone2 implements RadioWithBattery{
sswitchRadio(trigger: boolean): void {
}
checkBatterStatus(): void {
}
}
3.4枚举
// 不会被改变
enum Direction{
Up="UP",
Down="DOWN",
Left="LEFT",
Right="RIGHT"
}
// UP
console.log(Direction.Down)
// UP
console.log(Direction[0])
3.5泛型
function echo<T>(arg:T):T {
return arg;
}
// 指定变量类型
const str: string = 'str'
const result = echo(str);
//也可以不指定
const result2 = echo("str2");
//多个
function swap<T,U>(tuple: [T,U]):[U,T]{
return [tuple[1],tuple[0]]
}
const result3 = swap(['string',123]);
console.log(result3)
3.6约束泛型
function echo<T>(arg:T):T {
return arg;
}
// 指定变量类型
const str: string = 'str'
const result = echo(str);
//也可以不指定
const result2 = echo("str2");
//多个
function swap<T,U>(tuple: [T,U]):[U,T]{
return [tuple[1],tuple[0]]
}
const result3 = swap(['string',123]);
console.log(result3)
//约束泛型，允许传入指定值的类型
function echoWithArr<T>(arg:T[]): T[]{
console.log(arg.length)
return arg;
}
const arrs = echoWithArr([1,2,3]);
interface IWithLength{
length: number
}
function echoWithArrLength<T extends IWithLength>(arg: T):T{
console.log(arg.length)
return arg;
}
console.log(echoWithArrLength(["123",1,2,4]))
console.log(echoWithArrLength({length:10,width:10}))
console.log(echoWithArrLength([1,2,3]))
//错误
//console.log(echoWithArrLength(13))
3.7泛型在类和接口中使用
const queue = new Queue<number>();
queue.push(1)
console.log(queue.pop().toFixed())
interface KeyPair<T,U> {
key:T
value:U
}
let kp1:KeyPair<number, string> = {key:1,value:"string"}
let kp2:KeyPair<string, number> = {key:"string",value:1}
let arr: number[] = [1,2,3]
let arrTwo: Array<number> = [12,123,1234]
3.8类型别名 字面量和交叉类型
//类型别名
let sum: (x: number,y: number) => number;
const result = sum(1,2);
type PlusType = (x: number,y: number) => number;
let sum2 : PlusType;
const result2 = sum2(2,3);
type StringOrNumber = string | number;
let result3 :StringOrNumber = "123";
result3 = 123;
//字面量
const str:'name' = 'name';
const number:1=1;
// 交叉类型
type Directions = 'Up' | 'Down' | 'Left' | 'Right';
let toWhere:Directions = 'Left';
//组合类型
interface IName{
name:String
}
type IPerson = IName & {age:number}
let person : IPerson = {name:"123",age:1}
3.9声明文件
//安装jquery
npm install --save @types/jquery
//安装源代码
npm install --save redux
jQuery("#foo");
//引入源代码
import {Action} from 'redux';
4.0内置类型
1.全局存在的对象，在每个项目中会自动加载
const a:Array<number> =[123,123,231];
const data = new Date();
data.getTime()
const reg = /abc/;
reg.test('abc');
Math.pow(2,2)
let body = document.body
let allLis = document.querySelectorAll("li");
allLis.length
document.addEventListener('check',(e)=>{
})
interface IPerson{
name:string
age:number
}
let viking :IPerson ={name:"busl",age:20}
type Ipartial = Partial<IPerson>;
//忽略属性
type IOmit=Omit<IPerson,"name">
let IOmit={age:12}
2.组件创建应用
2.1创建
<template>
<div class="validate-input-container pd-3">
<label class="form-label">邮箱地址</label>
<input type="email" class="form-control"
:class="{'is-invalid': inputRef.error}"
v-model="inputRef.val"
@blur="validateInput"
>
<span class="invalid-feedback" v-if="inputRef.error">
{{ inputRef.message }}
</span>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, PropType } from 'vue'
const emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
interface RuleProp {
type: 'required' | 'email' | 'length';
message: string;
}
export type RulesProp = RuleProp[]
export default defineComponent({
props: {
rules: Array as PropType<RulesProp>
},
setup (props) {
const inputRef = reactive({
val: '',
error: false,
message: ''
})
const validateInput = () => {
if (props.rules) {
const allPassed = props.rules.every(rule => {
let passed = true
inputRef.message = rule.message
switch (rule.type) {
case 'required':
passed = (inputRef.val.trim() !== '')
break
case 'email':
passed = emailReg.test(inputRef.val)
break
default:
break
}
return passed
})
inputRef.error = !allPassed
}
}
return {
inputRef,
validateInput
}
}
})
</script>
<style scoped>
</style>
2.2引用
<template>
<!--container: 居中容器 -->
<div class="container">
<global-header :user="currentUser"></global-header>
<form>
<div class="mb-3">
<validate-input :rules="emailRules"></validate-input>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import GlobalHeader, { UserProps } from '@/components/GlobalHeaderName.vue'
import ValidateInput, { RulesProp } from '@/components/ValidateInputName.vue'
const currentUser: UserProps = {
isLogin: true,
name: 'busl',
id: 1
}
export default defineComponent({
name: 'App',
components: {
ValidateInput,
GlobalHeader
},
setup () {
const emailRules: RulesProp = [
{
type: 'required',
message: '电子邮箱不能为空!'
},
{
type: 'email',
message: '请输入正确的电子邮箱格式!'
}
]
const emailRef = reactive({
val: '',
error: false,
message: ''
})
return {
currentUser,
emailRef,
emailRules
}
}
})
</script>
<style>
</style>
2.3在组件中使用v-modele实现双向绑定
// 组件改造 context.emit('update:modelValue', targetValue)
<input type="email" class="form-control"
:class="{'is-invalid': inputRef.error}"
@input="updateValue"
:value="inputRef.val"
@blur="validateInput"
>
export default defineComponent({
props: {
rules: Array as PropType<RulesProp>,
modelValue: String
},
setup (props, context) {
const inputRef = reactive({
val: props.modelValue || '',
error: false,
message: ''
})
const updateValue = (e: KeyboardEvent) => {
const targetValue = (e.target as HTMLInputElement).value
inputRef.val = targetValue
context.emit('update:modelValue', targetValue)
}
const validateInput = () => {
if (props.rules) {
const allPassed = props.rules.every(rule => {
let passed = true
inputRef.message = rule.message
switch (rule.type) {
case 'required':
passed = (inputRef.val.trim() !== '')
break
case 'email':
passed = emailReg.test(inputRef.val)
break
default:
break
}
return passed
})
inputRef.error = !allPassed
}
}
return {
inputRef,
validateInput,
updateValue
}
}
})
//引用改造
<div class="mb-3">
<validate-input :rules="emailRules" v-model="emailValue"></validate-input>
{{ emailValue }}
</div>
import { defineComponent, reactive, ref } from 'vue'
setup () {
const emailValue = ref('viking')
const emailRules: RulesProp = [
{
type: 'required',
message: '电子邮箱不能为空!'
},
{
type: 'email',
message: '请输入正确的电子邮箱格式!'
}
]
const emailRef = reactive({
val: '',
error: false,
message: ''
})
return {
currentUser,
emailRef,
emailRules,
emailValue
}
}
2.4非 Prop 的 Attribute
一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id attribute。可以通过 $attrs property 访问那些 attribute。
持续更新
2184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
