TypeScript学习记录- 数据类型基础

TS 学习笔记记录

相关文档

原始数据类型

原始数据类型包括布尔值、数值、字符串、null、undefined、Symbol。

  • 定义一个布尔值
let isOk:boolean =false;
  • 定义一个数值
let literal:number=10;
  • 定义 字符串
let name:string="luo";
  • 空值
 function alertName(name:string):void{
    alert("my name is "+name);
}
  • null 和undefined
let u: undefined = undefined;
let n: null = null;

void 与null和undefined不同点在于,null和undefined是所有类型的子类型,null和undefined可赋值给他的父类型。

任意值

  • 任意值类型
 let name:any="1234";
 name = 111;

如果是 any 类型,则允许被赋值为任意类型。

  • 未声明类型的变量
    变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型:不管后来有没有被赋值,都会推断成any类型。
let st;
st="1111";
st=111;

类型推断

当定义变量时,未指定明确的类型时,TS会根据类型推论的规则推断出这个变量的类型

let myFav=“This is a string!";

等价于

let myFav:string="This is a string!";

联合类型

表示取值可以为多种类型中的一种。

  • let 变量名:变量类型|变量类型;使用 | 分隔数据类型。
let myFavoriteNumber:string|number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
  • 访问联合类型属性或方法。
    要注意只有当TypeScript不确定一个联合类型的变量到底是哪个类型时,只能访问联合属性中共有的属性或方法
function getLength(something: string | number): number {
    return something.length;
}

// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

报错原因是无法知道参数是string 还是number,number类型没有length属性,所以异常。

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错

// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

只有console.log(myFavoriteNumber.length); // 编译时报错,第二行中 myFavoriteNumber 被推断成 string,所以 访问length时无异常,第四行 其被推断成 number,访问length会异常。

对象的类型-接口

接口是一种规范,他定义了一个事物的基础属性,规则。

  • 定义接口
interface Person {
    readonly id:number;
    name: string;
    age?: number;
    [propName: string]:any;
}

id 前加 readonly 表示该字段为只读属性,只有第一次给对象 Person赋值时 id 必须有值,后面无法给此值赋值。
age后面加 ? 表示该属性为可选属性。定义变量时可为空,
[propName: string] 任意属性 ,定义属性值 为 string 类型的值。当定义任意属性后,确定的属性和可选属性必须为这个类型的子集

数组类型

  • 「类型 + 方括号」来表示数组
let fibonacci: number[] = [1, 1, 2, 3, 5];
let fibonacci: (number | string)[] = [1, '1', 2, 3, 5];
// any 表示数组中可出现任意类型,也可使用默认的类型推断。去掉类型 any[]
let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];
  • 数组泛型
Array<elemType> 来表示数组
let fibonacci: Array<number> = [1, 1, 2, 3, 5];
  • 使用接口实现数组
interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
  • 类数组
    内置对象 IArguments
function sum() {
    let args: IArguments = arguments;
}

函数的类型

  • 函数声明
function sum(x: number, y: number): number {
    return x + y;
}
  • 函数表达式
let mySum=function(x:number,y:number):number{
    return x+y;
}

mySum其实未指定类型,而是通过类型推断实现的,手动指定mySum的类型

let mySum:(x:number,y:number)=>number=function(x:number,y:number):number{
    return x+y;
}

在TyepScript中 => 表示函数的定义,左边是输入类型,右边是输出类型

ES6中的箭头函数相关介绍

  • 使用接口定义函数类型
interface searchFunc{
    (source:string,subString:string):boolean;
}
let mySearch:searchFunc;

mySearch=function(source:string,subString:string):boolean{
    return source.search(subString) !== -1;
}
  • 可选参数、参数默认值
    使用 表示可选择的参数,有默认值的参数为可选参数,但不受 「可选参数必须接在必需参数后面」的限制了
    可选参数必须接在必需参数后面。换句话说,可选参数后面不允许再出现必须参数了
function buildName(firstName: string='Tom', lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

类型断言

断言,不是类型转换,无法将一个联合类型转换成一个不存在的类型是不可以的。

//定义类型:<类型>值
let something: string | number="1234";
let str=<string>something;//这是正确的,可以将联合类型转换成一个更加具体的类型
let bol=<boolearn>something;//异常,Type 'string | number' cannot be converted to type 'boolean'
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容