TypeScript随记

类型分为:静态类型和对象类型

// 基础类型
const count : number = 1;

// 基础对象类型
const obj : {
    name: string,
    age: number
} = {
    name: 'aaa',
    age: 11
};

// 数组类型
const arr: string [] = ['aaa', 'bbb', 'ccc'];

// 类类型
class Person{}
const xiaoming: Person = new Person();

// 函数类型
const funcTs : () => string = () => {return '111'} // 分两部分看,前半部分说的是,类型为一个函数,返回值为一个string类型的,后半部分是等于的一个实际函数


// 类型注解和类型推断
function getTotal (one: number, two: string) {
    return one + two;
}   

const total = getTotal(1, 'aa');
// 这里要表达的意思就是,当我们没有对变量进行类型注解,如果ts无法判断出它属于哪种类型的的时候,回显示类型为any,这个就需要我们添加类型注解,如果ts能够正常推断出来,我们就不用做注解。

数组类型的定义:

const stringArr : string [] = ['a', 'b', 'c']; // 定义数组参数类型为string
const numberArr : number [] = [1, 2, 3]; // 定义数组类型为number类型的

const objArr : {name: string, age: number} [] = [{name: 'aaa', age: 12}] // 定义数组类型为对象类型,并且定义了对象参数的类型

// 但是上面这种写法过于繁琐,一旦对象参数过多时,这里就会是一长串, 所以引入了类型别名这个概念

// 类型别名(type alias) type
type lady = {name: string, age: number};
const objArr1 : lady [] = [{name: 'aaa', age: 12}]

// 另外还可以定义成类的形式
class man {
    name: string;
    age: number
}
const objArr2 : man[] = [{name: 'xiaohong', age: 13}]

元组类型:

// 假设有数组是这种格式 ['aaa', 'bbb', 'ccc', 12, false]
const cvsArr = ['aaa', 'bbb', 'ccc', 12, false]; // 这时ts的类型推断给我们的是cvsArr: (string | number | boolean)[],意思就是,不管你们有好多数据,必须保证你的数据类型顺序是按照这个走的;
const cvsArr1 : (string | number | boolean) [] = ['aaa', 14, true];

// 以上的写法虽然可以判断出大体的数据类型顺序,但是无法定位到每一项上面,而且上面数据类型移动一下顺序,ts无法识别到错误,但是其实已经报错了

// 所以元组就对这样的数组进行了一个加强
const cvsArr2 : [string, number, boolean][] = [
    ['aaa', 12, false],
    ['aaa', 13, false],
    ['aaa', 14, true]
]

接口interface:

// 接口和类型别名的区别
type name =  string;
// type可以直接给单个类型定义,interface必须要是对象的形式

// 1.接口限制对象内属性和方法的类型
interface Person {
    name: string;
    age: number;
    height: number;
    sex ?: string;  // 可选类型,代表如果后面的势力没有这个属性也是可以的
    [propname: string] : any;       // 可以自定义属性,属性名必须是字符串形式,属性值可以是any类型
    say() : string;         // 添加一个方法,这个方法必须要返回一个string类型的数据
};

// 2.接口限制类的类型
class girl implements Person {
    name: 'xiaohong';
    age: 12;
    height: 165;
    say() {
        return 'hello,我是类的限制'
    }
}

// 3.接口也可以实现继承
interface Teacher extends Person {
    do() : string
}


const fillPerson = (person: Person) => {
    person.age > 20 && person.sex === '男' && console.log(person.name + '符合要求');
    (person.age <= 20 || person.sex !== '男') && console.log(person.name + '被pass了');
}

const getPerson = (person: Teacher) => {
    console.log(person.say());      // 注意: person.say 和person.say()是不同的,前面一个是直接作为方法属性调用,是不执行的,后面一个才是执行函数
    console.log(person.do());
}

let daqiang = {
    name: 'daqiang',
    age: 18,
    height: 170,
    // sex: 12   可选值
    weight: 56,
    say(){
        return 'hello';
    },
    do() {
        return 'Teacher继承了Person接口,还额外多加了一个do方法';
    }
}

fillPerson(daqiang);  // daqiang被pass了
getPerson(daqiang);     // hello    Teacher继承了Person接口,还额外多加了一个do方法
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容