欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

TypeScript快速入门(二)

程序员文章站 2022-07-12 15:52:19
...

上一章:TypeScript快速入门(一)(陆续更新知识点)

6.TypeScript中数组类型的定义

一般数组类型定义(类型推断):

/**
 * 一般数组类型定义(类型推断)
 */
const numberArr = [1,2,3]; //此时类型推断出numberArr 为 number[];

一般数组类型定义(类型注解):

/**
 * 一般数组类型定义(类型注解)
 */

const numberArr : number[] = [ 1,2,3];

同理我们可以定义字符串数组:

/**
 * 同理我们可以定义字符串数组
 */
const strArr : string[] = ["one","two","three"]

综上所述,可以发现,我们是可以任意类型的数组都是可以定义的

/**
 * 综上所述,可以发现,我们是可以任意类型的数组都是可以定义的
 */
const undefinedArr : undefined[] = [undefined,undefined];

多重类型数组 举个例子:包含有字符串以及数字类型的数组:

/**
 * 多重类型数组 举个例子:包含有字符串以及数字类型的数组
 */
const strAndNumberArr :(string | number)[] = ["1","2",3];

定义一个包含对象的数组(不使用类型别名)

/**
 * 定义一个包含对象的数组(没有使用类型别名)
 */
const objArr: {
    name: string,
    age: number
}[] = [
    {name: "houwenyao",age: 24}, 
    {name: "liuyipeng",age: 25}
]

定义一个包含对象的数组(使用类型别名)

类型别名:类型别名用来给一个类型起个新名字

/**
 * 定义一个包含对象的数组(使用类型别名)
 */
type people = {
    name:string,
    age:number
}
const objArr :people[] = [
    {name:"houwenyao",age:24},
    {name:"liuyipeng",age:25}
]

定义一个包含类的数组 ,(类中的属性以分号分割)

/**
 * 定义一个包含类的数组 ,(类中的属性以分号分割)
 */
class Person {
    name:string;
    age:number;
}
const classArr : Person[] = [
    {name:"liuyipeng",age:25},
    {name:"houwenyao",age:24}
]

07.TypeScript中interface接口的使用(注意接口非必选值的定义)


/**
 * 接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现
 */
//定义接口IPerson
interface IPerson {
    name: string,
    age: number,
    sex: string,
    hobby?:string //定义可选值 注意在:号前面加 ?
}
/**
 * 定义对象Boy实现接口IPerson
 */
const Boy : IPerson = {
    name:"liuyipeng",
    age:25,
    sex:"男",
    hobby:"basketball"
}
const Girl : IPerson = {
    name:"houwenyao",
    age:24,
    sex:"女",
}
/**
 * 定义方法实现接口
 */
const getBoy = (Boy:IPerson):void => {
    console.log(Boy.name)
    console.log(Boy.age)
    console.log(Boy.sex)
    console.log(Boy.hobby)
}
getBoy(Boy);
getBoy(Girl);

输出结果:(undefined与null不一样,前者是有属性无值,后者为无属性)
TypeScript快速入门(二)
定义一个允许加入任意值的接口(如果删除[propname:string] :any,程序会报错)

/**
 * 定义一个允许加入任意值的接口
 */

interface IBoy {
    name:string,
    age:number,
    sex:string,
    [propname:string] :any //属性的名字是字符串类型,属性的值可以是任何类型any
}
const boy:IBoy = {
    name:"liuyipeng",
    age:25,
    sex:"男",
    hobby:"basketball" //只要符合在接口定义的规范,都可以作为属性添加
}
const getPeople = (boy:IBoy)=>{
    console.log(boy.name)
    console.log(boy.age)
    console.log(boy.sex)
    console.log(boy.hobby) 
}
getPeople(boy)