TypeScript
- Map 对象
-
- 创建Map对象及初始化
- Map 相关的函数与属性
- 联合类型
-
- 声明式 联合类型
- 函数参数使用 联合类型
- 联合类型数组
- 接口
-
- 示例
- 联合类型和接口
-
- 接口和数组
- 接口继承
Map 对象 创建Map对象及初始化 TypeScript 使用 Map 类型和 new 关键字来创建 Map：
let myMap = new Map();
初始化 Map，可以以数组的格式来传入键值对：
let myMap = new Map([
["key1", "value1"],
["key2", "value2"]
]);
Map 相关的函数与属性
map.clear() – 移除 Map 对象的所有键/值对 。
map.set() – 设置键值对，返回该 Map 对象。
map.get() – 返回键对应的值，如果不存在，则返回 undefined。
map.has() – 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
map.delete() – 删除 Map 中的元素，删除成功返回 true，失败返回 false。
map.size – 返回 Map 对象键/值对的数量。
map.keys() - 返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
map.values() – 返回一个新的Iterator对象，包含了Map对象中每个元素的值 。
上案例
// 创建 Map
let myMap = new Map();
// 设置 Map 对象
myMap.set('name','张三')
myMap.set('age',22)
myMap.set('sex','男')
console.log(myMap.get('name')) // 张三
console.log(myMap.has('sex')) // true
console.log(myMap.delete('age')) // true
console.log(myMap.size) // 2
console.log(myMap.keys()) // {"name", "sex"}
console.log(myMap.values()) // {"张三", "男"}
// 迭代 Map 中的 key
for (let key of myMap.keys()) {
console.log(key);
// namesex
}
// 迭代 Map 中的 value
for (let value of myMap.values()) {
console.log(value);
// 张三男
}
// 迭代 Map 中的 key => valueentries()方法ie11之前不可用
for (let entry of nameSiteMapping.entries()) {
console.log(entry[0], entry[1]);
// name 张三sex 男
}
myMap.clear();
//清除 Map
console.log(myMap);
// Map {}
联合类型 联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。
只能赋值指定的类型，如果赋值其它类型就会报错。
格式: Type1|Type2|Type3
声明式 联合类型
var data:string|number
data = https://www.it610.com/article/12
console.log("数字为 "+ data)// 12
data = "https://www.it610.com/article/Runoob"
console.log("字符串为 " + data) // Runoob
函数参数使用 联合类型
function myFun(name:string|string[]) {
if(typeof name == "string") {
console.log(name)
} else {
var i;
for(i = 0;
i联合类型数组
var arr:number[]|string[];
var i:number;
arr = [1,2,4]
console.log("**数字数组**")
for(i = 0;
i接口 接口定义如下：
interface 自定义接口名字 {
}
示例 【typescript|TypeScript--笔记二（Map对象、联合类型、接口）】我们定义了一个接口 IPerson，接着定义了一个变量 customer，它的类型是 IPerson。customer 实现了接口 IPerson 的属性和方法。
interface IPerson {
firstName:string,
lastName:string,
sayHi: ()=>string
}
var customer:IPerson = {
firstName:"Tom",
lastName:"Hanks",
sayHi: ():string =>{return "Hi there"}
}
console.log("Customer 对象 ")
console.log(customer.firstName)// Tom
console.log(customer.lastName)// Hanks
console.log(customer.sayHi())// Hi there
联合类型和接口
interface myOptions {
program:string;
commandline:string[]|string|(()=>string);
// 字符串型数组 | 字符串 | 函数表达式
}
// commandline 是字符串
var options:myOptions= {program:"test1",commandline:"Hello"};
console.log(options.commandline)
// commandline 是字符串数组
options = {program:"test1",commandline:["Hello","World"]};
console.log(options.commandline[0]);
console.log(options.commandline[1]);
// commandline 是一个函数表达式
options = {program:"test1",commandline:()=>{return "**Hello World**";
}};
var fn:any = options.commandline;
console.log(fn());
接口和数组 接口中我们可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串。
interface namelist {
[index:number]:string
}
var list2:namelist = ["John",1,"Bran"] // 错误元素 1 不是 string 类型
interface ages {
[index:string]:number
}
var agelist:ages;
agelist["John"] = 15// 正确
agelist[2] = "nine"// 错误
接口继承 接口继承就是说接口可以通过其他接口来扩展自己。
Typescript 允许接口继承多个接口。
继承使用关键字 extends
语法格式：
单个继承：子接口 extends 父接口
多个继承：子接口 extends 父接口1,父接口2,父接口3,......,父接口n
单个继承
interface Person {
age:number
}
interface Musician extends Person {
instrument:string
}
var drummer = {};
// 等价于 var drummer = {};
drummer.age = 27
drummer.instrument = "Drums"
console.log("年龄:"+drummer.age)// 年龄:27
console.log("喜欢的乐器:"+drummer.instrument)// 喜欢的乐器:Drums多个继承
interface IParent1 {
v1:number
}
interface IParent2 {
v2:number
}
interface Child extends IParent1, IParent2 { }
var Iobj:Child = { v1:12, v2:23}
console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)// value 1: 12 value 2: 23
推荐阅读
- ts|typescript 中函数参数为对象如何效验
- Typescript|Typescript额外的属性检查 和 对象拥有任意个属性
- json|如何将JSON对象转换为Typescript类
- 前端|typescript（四）ts中函数的参数和返回值的类型定义
- 前端|TypeScript函数参数和返回类型定义
- TypeScript|玩转TypeScript对象、对象作为参数进行函数传递、接口和内置对象[无敌态]
- typescript|【TypeScript】从零开始玩转TypeScript - TypeScript中的函数
- typescript|Vue.js 3 + Vite + TypeScript 实战项目开发
- vue.js|vue3+antd实现table中点击具体某一列展示弹窗