一.什么是TypeScript
添加了类型系统的JavaScript,适用于任何规模的项目
二.TS与JS的区别
三.运行
运用 npm create vite 创建一个vue3项目， 选择ts安装
四.使用
<script lang="ts" setup> </script> ts的文件后缀名是 .ts
五.类型
值类型
number
string
boolean
null
undefined
void
any(不要轻易用)
数组
const list:Array<string>=["abc"]
const arr:number[] = [123]
const tuple:[string,number] = ["abc",123] 元组 一一对应
函数
function add （x:string,y:string):string{ return x+y}
const add = (x:number,y:number):number=>x+y
接口
interface定义对象类型的 首字母大写
interface Person {
name:string,
age:string | number,
readonly id:number
job?: string
}
| 或者
readonly只读
？可选
interface Student extends Person{
major:string
}
内置类型
var d:Date = new Date() 日期
var reg:RegExp = /\d10/ 正则
var obj :object = {}对象
var body:HTMLElement = document.body HTMLbody
var list:NodeList = document.querySelectorAll("div") 节点列表
document.addEventListener(“click”,(e:MouseEvent)=>{
conolse.log(e.target)
}) 内置类型的鼠标事件类型
联合类型
let num:number|string num:8; num="eight"
交叉类型
interface Person{
name:string
age:number
}
type Student = Person&{
grade:number}
类型别名type
可以参考如下代码
<script setup lang="ts">
type arrItem = string | number;
const arr : arrItem[] = [1, "a", 2, "b"];
type Person = {
name: string };
type Student = Person & {
major: string };
type Teacher = Person & {
teach: string };
type StudentAndTeach = [Student , Teacher];
type ST = Student | Teacher;
var list : ST[] = [
{
name: "hh", major: "前端" },
{
name: "zz", teach: "前端" },
{
name: "yy", major: "前端" },
];
var temp: StudentAndTeach = [
{
name: "hh", major: "前端" },
{
name: "zz", teach: "前端" },
];
</script>
<template>
<main>
<p>{
{
arr }}</p>
<p>{
{
list }}</p>
<p>{
{
temp }}</p>
</main>
</template>
type与interface区别
相同点：都定义一个对象或者函数，都可以继承,interface继承type ,type也可以interface
不同点：
- interface接口是Ts设计出来用定义对象类型的，
- type是类型别名，用于给各个类型定义别名，让TS更简洁，清晰
- type可以声明基本类型，联合类型与交叉类型，元祖，interface不行
- interface可以合并重复声明, type不行
- 平时开发时候，一般使用组合或者加载类型使用type一般用于extends 或implements的用interface
定义对象与函数看心情
字面量类型
type ButtonSize = 'mini' |'small' | 'normal' 只能是这几个类型
type Sex = '男'|'女'
泛型
传入什么类型，返回什么类型。
泛型是指在定义函数，接口，或类的时候，不预先指定具体的类型而是使用的时候再指定类型
泛型中的T就像一个占位符、或者说一个变量;
在使用的时候可以把定义的类型像参数一样传入，它可以原封不动地输出。
泛型在成员之间提供有意义的约束:成员（函数的参数，返回值,类的实例，成员，类的方法)
function print<T>(arg:T):T{
console.log(arg);return arg;
}
可以自动推断也可以手动指定
//定义print函数有泛型 传入参数是这个类型 返回的也是这个类型
//泛型一种类型的泛指
function print<T>(arg:T):T{
console.log(arg)
return arg
}
//自动推断
print(123)
//手动指定
print<string>("abc")
泛型处理多个参数
//定义一个交换函数有泛型T和U 参数是一个元祖有两个数据类型T和U
//返回的值是一个元祖类型[U,T]
function swap<T,U>(arg:[T,U]):[U,T]{
console.log("arg",arg);
return [arg[1],arg[0]]
}
var re=swap([1,"abc"])
console.log("re",re)
printIt("abc")
printIt([1,23])
约束泛型 不确定T是否有length
interface Ilen{
length:number
}
function printIt<T extends Ilen>(arg:T){
console.log(arg.length);
}
printIt({
name:"mumu",length:5})
约束泛型 类
//定义一个栈
class Stack<T>{
//似有数据
private data:T[]=[]
push(item:T){
return this.data.push(item)
}
pop():T|undefined{
return this.data.pop()
}
}
const s1=new Stack<string>()
s1.push('abc')
s1.push('def')
const s2=new Stack<number>()
s2.push(123)
s2.pop()
约束泛型 接口
//定义接口 IkeyValue 两个泛型 T与U
interface IkeyValue<T,U>{
key:T, //key的值必须是T类型
value:U //value的值必须是u类型
}
//定义对象obj1 是IkeyValue类型 T泛型指定为string Ul类型指定为number
var obj1:IkeyValue<string,number>={
key:"学习",
value:100
}
var obj2:IkeyValue<string,boolean>={
key:"啥",
value:false
}
总结 泛型的好处
1函数的类可以轻松支持多种类型增强程序的扩展性
2.不必写冗长的联合类型，增强代码的可读性
3.灵控制类型直接的约束