Typescript(前端未来的语言)

1. 什么是Typescript：

Typed JavaScript at Any Scale

添加了类型系统的JavaScript，适用于任何规模的项目

2. Ts和Js

Ts特点：

1. JavaScript的超集，用于解决大型项目的代码复杂性

2. 强类型，支持静态和动态类型

3. 可以在编译期间发现并纠正错误

4. 不允许改变变量的数据类型

Js特点：

1. 一种脚本语言，用于创建动态网页

2. 动态弱类型语言

3. 只能在运行时发现错误

4. 变量可以被赋予不同类型的值

图表说明：

3. 为什么要学Ts

1. 就跟前几年，jQuery时代快结束时，你不会vue或者react一样，根本没有就业的机会

2. 如今别说react，连vue的默认版本都是vue3了 vue3和typescript是绑在一起的，再过两年，除了老项目，新项目就是清一色的Ts了

4. 创建Ts项目

1. npm create vite

1.1Project name 项目名称

1.2选择Vue

1.3选择自定义

1.4自定义选项

1.5安装所有的包

说明：需要axios可以用下列命令安装
npm i axios -S

1.6运行项目

npm run dev

5. Ts(vue3)组件中运行

1.数据类型

<script setup lang="ts">
let num:number = 456;
let msg:string = 'I love typescript'
let flag:boolean = true
let un:undefined = undefined
let nu:null = null
// 函数执行不返回数据 void
function say():void{
  alert("你好")
}
let count:any = "abc"//少用，不建议用
</script>

<template>
  <main>
    <h1>TypeScript学习</h1>
    <p>num:{{ num }}</p>
    <p>msg:{{ msg }}</p>
    <p>flag:{{ flag }}</p>
    <p>un:{{ un }}</p>
    <p>nu:{{ nu }}</p>
    <button @click="say()">say</button>
    <p>count:{{ count }}</p>
  </main>
</template>

2.数据类型与元祖

<script setup lang="ts">
// string类型的数组
let arr:string[]=["abc","def","lover"]
// let arrlist:number[]=[1,2,3]
// 定义一个数组期待值类型为number
let list:Array<number> = [123,789]
list.push(123)
arr.push("type")
// let strlist:Array<string> = ["文丁响","王志悦"]
// 定义一个元祖
let tup:[string,number] = ["lover",123,]
</script>

<template>
  <main>
    <h1>TypeScript学习</h1>
    <p>{{ arr }}</p>
    <p>{{ list }}</p>
    <p>{{ tup }}</p>
    <!-- <p>{{ strlist }}</p> -->
    <!-- <p>{{ arrlist }}</p> -->
  </main>
</template>

3.函数

<script setup lang="ts">
function add(x:number,y:number):number{
  alert(x+y);
  return x+y;
}
let add2 = (x:number,y:number):number =>{
  alert(x*2+y*2);
  return x+y;
}
</script>

<template>
  <main>
    <h1>TypeScript学习</h1>
    <button @click="add(5,9)">add</button>
    <br>
    <button @click="add2(3,4)">add2</button>
  </main>
</template>

4.1接口interface类型

<script setup lang="ts">
// 接口 定义对象 通常首字母大写
interface Person {
  name:string
  age:number|string
  readonly id:number //readonly只读
  job?:string //可有可无
}
interface Student extends Person {
  major:string
}
let p1:Person = {
  name:"wen",
  age:18,
  id:3
}
let p2:Person = {
  name:"小文",
  age:"28岁",
  id:4,
  job:"teacher"
}
let p3:Student = {
  name:"wzy",
  age:22,
  id:4,
  job:"student",
  major:"人工智能",
}
</script>

<template>
  <main>
    <h1>TypeScript学习</h1>
      <p>{{ p1 }}</p>
      <p>{{ p2 }}</p>
      <p>{{ p3  }}</p>
  </main>
</template>

4.2接口 interface类型

//描述函数类型
<script setup lang="ts">
// 定义函数
type Add1 = (n1:number,n2:number) =>number
// interface定义函数
interface Add2 {
  (n1:number,n2:number):number
}
const addtype:Add1 = (n1,n2) =>{
  console.log(n1,n2);
  return n1+n2;
}

addtype(4,5)
const addInter:Add2 = (n1,n2) =>n1*2+n2;
addInter(2,3);
</script>

<template>
  <main>
    <h1>TypeScript学习-type</h1>
  </main>
</template>

4.3接口interface类型

//定义不确定的属性
interface RandKey{
    [propName:string]:string
}
const obj:RandKey = {
    n:"nihi",
    b:"你好"
}

5.内置类型

<script setup lang="ts">
let d:Date = new Date();
let reg:RegExp = /^1\d{10}/
let err:Error = new Error('错误人类')
if(reg.test("1359885974")){
  throw(err)
}
// 对象
var obj:object = {
  name:"xiaohai",
  age:18
}
</script>

<template>
  <main>
    <h1>TypeScript学习</h1>
    <p>{{ d }}</p>
    <p>{{ reg.test("13598859747") }}</p>
    <p> {{ obj }} </p>
  </main>
</template>

6.类型别名type

<script setup lang="ts">
// 定义arrItem类型 字符串或者数字
type arrItem = string | number;
// 定义arr数组 值类型为arrItem
const arr: arrItem[] = [1, "a", 2, "b"]
// 定义Person类型
type Person = { name: string }
// 定义学生类型 Person 与 major 联合
type Student = Person & { marjor: string }
// 定义老师类型 Person 与 teach联合
type Teacher = Person & { teach: string }
// 定义一个元祖类型，先学老师
type StudentAndTeach = [Student, Teacher]
// 定义ST类型 可以是学也可以是老师
type ST = Student | Teacher;
// 定义list数组 内容可以是学生 可以是老师
var list: ST[] = [
  { name: "悦悦", marjor: "生气大王" },
  { name: "文丁响", teach: "H5" },
  { name: "悦悦", marjor: "生气大王" }
]

var temp:StudentAndTeach=[
  { name: "悦悦", marjor: "生气大王" },
  { name: "悦悦", teach: "生气大王" },
]
</script>

<template>
  <main>
    <h1>TypeScript学习</h1>
    <p>{{ arr }}</p>
    <p>{{ list }}</p>
    <p>{{ temp }}</p>
  </main>
</template>

7.字面量

type ButtonSize = 'mini' |'small'|'normal'
type Sex = '男'|'女'

6.type与interfave区别

1.写法

interface Person{
    name:string
    age:number
}

type Person = {
    name:string
    age:number
}

2.相同：都定义一个对象或函数，都可以继承

type addType = (num1:number,num2:number)=>number

interface  addType{
    (num1:number,num2:number):number
}
const add:AddType = (num1,num2)=>num1+num2

3.不同

interface接口是Ts设计出来用定义对象类型的，
type 是类型别名，用于给各个类型定义别名，让TS更简洁，清晰
-type 可以声明基本类型，联合类型与交叉类型，元祖，interface不行
-interface 可以合并重复声明，type不行
平时开发时候，一般使用组合或者加载类型使用type
一般用于extends 或implements的用interface
定义对象与函数看心情

4.interface 继承type ，type也可以继承interface

interface Person {
    name:string
}
interface Student extends Person{
    grade:number
}

type Person  = {
    name:String
}
Type Student = Person&{grade:number}

7.泛型

1.泛型的概念

泛型是指在定义函数，接口，或类的时候，不预先指定具体的类型，而是使用的时候再指定类型
泛型中的T就像一个占位符号，或者一个变量，在使用的时候可以把定义类像参数一样传入，它可以原封不动的输出
泛型在成员之间提供有意义的约束：成员（函数的参数，返回值，类的实例，成员，类的方法）
泛型是一种类型的泛指

2.泛型的好处

1 函数的类可以轻松支持多种类型增强程序的扩展性
2. 不必写冗长的联合类型，增强代码的可读性
3. 灵控制类型直接的约束

3.传入什么类型，返回什么类型

function print(arg:string|num):string|number{
    console.log(arg);
    return arg;
}

4.泛型中的 T 就像一个占位符、或者说一个变量，在使用的时候可以把定义的类型像参数一样传入，它可以原封不动地输出。

function print<T>(arg:T):T{
  console.log(arg);
  return arg
}

5.处理多个参数

function swap<T,U>(arg:[T,U]):[U,T]{
  console.log('arg',arg);
  return [arg[1],arg[0]]
}

6.定义类型与推断

使用的时候、
print<string>("hello")
定义类型与推断
print("hello")

7.泛型与异步

interface UserInfo{
    name:strig
    age:number
}
fucntion request<T>(url:string):Promise<T>{
    return fetch(url).then(res=>res.json())
}
request<UserInfo>("user/info").then(res=>{
    console.log(res)
               
})

8.1约束泛型

function printLength<T>(arg:T):T{
    console.log(arg.length)
    return arg;
}
不确定T是否有Length

interface Ilength{
    length:number
}
function printLength<T extends Ilength>(arg:T):T{
    console.log(arg.length)
    return arg;
}

8.2约束泛型-类

class Stack<T>{
    private data:T[] = []
    push(item:T){
        return this.data.push(item)
    }
    pop():T|undefined{
        return this.data.pop()
    }
}

var s1 = new Stack<number>()
var s2 = new Stack<string>()

8.3约束泛型-接口

//使用泛型，可以对interface进行改造，让interface更灵活
interface Ikeyvalue<T,U>{
    key:T
    value:U
}
const k1:Ikeyvalue<number,string>={
    key:18,value:'line'
}
const k2:IKeyValue<string,number> = {key:'lin',value:18}

9.泛型定义数组

const arr:number[] = [1,2,3]
cosnt arr:Array<number> = [1,4,5]