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方法
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容