TypeScript教程
admin
2024-05-08 12:04:38
0

注:本文仅对ts中相对js不一样的地方做了笔记📒哟~想看js教程请挪步👉🏻

js基础教程

简介

   Typescript是以javascript为基础构建的语言(是JavaScript的超集),可以在任意支持Javascript的平台中执行,但是它不能直接被js解析器执行,需要通过编译成js语言才可以解析;

类型声明

   类型声明是TS最重要的一个特点,通过类型声明可以指定TS中变量(形参、实参)的类型,在指定类型之后,当为变量赋值时,ts编译器会自动检查值是否符合类型声明,符合才会进行赋值;

let 变量: 类型; // 声明
let 变量: 类型 = 值; // 声明并赋值
function fn(参数: 类型, 参数: 类型): 类型 {}
类型例子描述
number1 23 -23任意数字
string'hi' 'welcome'任意字符串
booleantrue false布尔值
字面量12 ‘string’ {} []限制变量的值就是该字面量的值
any*任意类型
unknown*任意类型
void空值(undefined)没有值(或undefined),一般用于声明函数返回值
never没有值不能是任何值
object{name: '小明'}任意的js对象
array[2, 3, 4]任意的js数组
tuple[4, 5]固定长度的数组,新增数据类型
enumenum{male, female}枚举,新增数据类型

    注意当声明类型为any时,相当于对该变量关闭了Ts类型检测,但是在将一个any类型的变量a赋值给一个非any变量b时,会将b也变成any类型(容易造成变量类型混乱,所以要慎用any);若变量声明时未定义类型时,默认是any类型(隐式的any);一般用unknown代替any使用,它相当于一个安全类型的any,它不可以随意赋值给其他类型变量;

never表示永远不会返回结果,可以用于函数抛错:

function fn(): never {throw new Error('抛错喽')
}

{}用于指定对象中可以包含哪些属性:

let person : {name: string,class: string,project?: string   
} // 声明person变量person = {name: '小明',class: '一年级'
} // 变量赋值let dog : {name: string,[propName: string]: any} // 声明dog变量dog = {name: '汪汪',gender: '男',age: 1
} // 增加了number类型的age与string类型的gender 

声明对象时,在属性名后面加上?表示该属性是可选的

声明对象时,加上[propName: string]: any 表示可定义任意类型的对象(propName为属性名,属性名为string类型)

声明数组时,可以在变量前加上类型,表示数组内都是什么类型的数据,或者通过Array<类型>表示;

 类型[];Array<类型>
let e: string[]; // 表示e是字符串数组
let f: number[]; // 表示f是数字数组
let g: Array // 表示g是字符串数组

元组是Ts新增的数据类型,元组就是固定长度的数组;元组中的元素不必保持类型一致

语法: [类型, 类型, 类型]
示例: 
let h :[string, number, string];
h = ['hi', 1, 'num']

枚举一般用于对已知的数据进行列举:如果枚举中的标识符没有赋值,则值一般为下标,如下例中Male即为0

enum Gender {Male,Female
} // 定义Gender为枚举类型let i: {name: string,gender: Gender
} // gender属性为Enum类型i = {name: '小明',gender: Gender.Male
}

可以使用 | 来连接多个类型(联合类型)

let c: 'hi' | 'hello' // c是hi或是hello

类型断言

类型断言有两种方式:使用as或者使用<>在变量前声明;类型断言用于告诉解析器变量的实际类型;

变量 as 类型
<类型>变量

接口

在面向对象的编程中,接口是一种规范的定义。规范一个类中应该包含哪些属性和方法,同时接口也可以当做类型声明去使用;

接口可以在定义类的时候去限制类的结构,接口中的所有属性都不能有实际的值,只能定义对象的结构;并且在接口中所有的方法都是抽象方法(在类中都要实现);

接口可以继承接口,实现接口的子类也可以同时实现多个接口;

interface myInterface {name: stringage: number
}const obj: myInterface = {name: '小明',age: 12,
} // 接口作为类型声明来使用
interface myInter {name: string;sayHello(): void
}
// 用类实现一个接口,即使类满足接口的要求
class MyClass implements myInter {name: string,constructor(name: string) {this.name = name}sayHello() {console.log('大声呼喊')}
}

泛型

泛型是解决类、接口、方法的复用性以及对不确定数据类型的支持;

// 泛型类
function fn(a: T): T {
//参数a和function返回值皆是泛型T
}function fn2(a: T, b: K): T{return a
}
// 参数a和function返回值皆是泛型T,参数b是泛型K

相关内容

热门资讯

“五角大楼继续增兵中东,美以或... 据央视新闻 俄罗斯方面14日披露的来自俄联邦安全会议消息,鉴于五角大楼继续增兵中东地区,美国和以色列...
特朗普:我对她感到震惊 特朗普:对意大利总理“不帮助美国”表示震惊 据意大利方面14日消息,美国总统特朗普对意大利总理梅洛尼...
国台办:赖清德当局不管编列多少... 【环球网报道】4月15日上午,国台办举行例行新闻发布会,发言人陈斌华就近期两岸热点问题回答记者提问。...
美军已迫使六艘离开霍尔木兹海峡... 参考消息网4月15日报道据美国《华盛顿邮报》网站4月14日报道,美国军方官员14日表示,在特朗普政府...
朝鲜外务省:日本《外交蓝皮书》... 当地时间4月14日,朝鲜外务省日本研究所政策室长发表谈话说,日本政府日前发布的2026年版《外交蓝皮...
“美国不再可靠,德国转向法国:... 【文/观察者网 王一】 美国总统特朗普退出北约的威胁,让欧洲盟友觉得美国愈发不可靠,正加快制定北约...
距中国台湾仅110公里!日本计... 据央视新闻,日本冲绳县与那国町町长13日表示,他同意日本防卫省此前提出的计划——在与那国町部署防空导...
四川首个微短剧审核服务点在青羊... 第十三届中国网络视听大会于4月14日-16日在成都举办,国内头部微短剧平台点众科技将亮相本次大会。在...
伊朗:战争赔偿是伊美谈判议题,... 新闻荐读 据伊朗伊斯兰共和国通讯社14日报道,伊朗政府发言人穆哈杰拉尼表示,战争赔偿问题是伊朗与美国...
大批“五一”航班突然取消?最新... 澎湃新闻记者 邵冰燕 五一假期临近,不少准备出境旅游的旅客遭遇航班变动。多位网友在社交平台上发文称,...