TS(一)数据类型与高级类型相关

本文目录:

  • 1.TS中常见的数据类型
    • 1.1.数字类型
    • 1.2.字符串
    • 1.3.布尔类型
    • 1.4.Null和Undefined
    • 1.5.void类型
    • 1.6.enum枚举类型
    • 1.7.数组
    • 1.8.元组
    • 1.9.Any类型
    • 1.10.Object 类型
  • 2.高级类型相关
    • 2.1.联合类型
    • 2.2.类型推论
    • 2.3.类型断言
    • 2.4.类型别名
    • 2.5.字符串字面量类型

1.TS中常见的数据类型

  1. JS里面有七种数据类型。Number,String,Boolean, Null, Undefined, Symbol, Object
  2. TS中的常用的数据类型有 (内置类型)Number, String, Boolean, Null, Undefined, Void, enum,Array,Any,Object,元组, 接口等

1.1.数字类型

1.ts里面的数字类型表示 双精度64位浮点值。它可以用来表示整数和分数。
2.支持二进制(0b1010)、八进制(0o744)、十进制、十六进制(0xf00d)

  • let decimal: number = 6; //十进制,无前缀
  • let hex: number = 0xf00d; //十六进制,十六进制
  • let binary: number = 0b1010; //二进制
  • let octal: number = 0o744; //八进制0o开头

1.2.字符串

1.使用双引号( ")或单引号(')表示字符串; 但是我们使用了prettier,会自动的将js里面的字符串转换为单引号,因为eslint规范的是单引号
2.还可以使用模板字符串, 两个反引号,中间使用${xxx} 嵌入表达式

let color: string = "blue";
color = 'red';
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }. I'll be ${ age + 1 } years old next month.`;

1.3.布尔类型

1.布尔类型是boolean,只有两个值true/false
2.使用new Boolean() 返回的不是一个布尔值,而是一个Boolean对象

let isDone: boolean = true;
let bool1: boolean = new Boolean();  //代码会报错

1.4.Null和Undefined

1.在typescript中,null和undefined是所有类型的子类型;也就是说 undefined 类型的变量,可以赋值给 任意类型的变量

let num1: number = undefined
let num2:number = null

上面代码都不会报错
2.undefined表示未定义的值,一个变量最原始的状态,例如声明了变量没有赋值
3.null是空值的意思,表示一个对象被人为的重置为空对象。内存里的表示就是栈中的变量没有指向堆中的内存对象。一般的如果要释放某个对象就将它的值设置为null

console.log(null == undefined)  //true
console.log(null ===undefined)  //false

1.5.void类型

1.JavaScript 没有空值(Void)的概念,在TypeScript 中,可以用 void 表示没有任何返回值的函数;表示没有任何类型

function warnUser(): void {
 console.log('这就是一个警示功能的函数,没有return')
 console.log("This is my warning message");
}

1.6.enum枚举类型

1.枚举类型可以为一组数值赋予友好的名字
2.默认从索引号0开始, 也可以手动赋值
通过enum关键字,创建了枚举类型Color,表示一组颜色

enum Color {Red, Green, Blue}
let c1: Color = Color.Greent

c1此时是1
因为ts中的枚举还做了反向映射
enum类型默认从0开始,但是也可以手动赋值来改变每个成员的值

enum Color {Red = 1, Green, Blue}
let c2: Color = Color.Green;

此时c2是2

enum Color {Red, Green = 6, Blue}

此时Red依然是0.Grenn被我们手动改成了6,Blue就是7
此外枚举前面的索引还可以是字符串,称为字符串枚举

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}
const value = 'UP'
if (value === Direction.Up) {
  console.log('go up!')
}

运行代码,控制台可以打印出来go up!

1.7.数组

1.ts里面定义数组的几种方式
数组的项中不允许出现其他的类型; 有时候可以通过any类型来允许出现任意类型

  • 第一种方式:类型+方括号的表示法 例如 number[], 这种类型的数组里面是不允许有除了number之外的类型
  • 第二种方式:数组泛型 Array+ <类型> 例如 Array<number>
  • 第三种方式:接口表示数组, 利用索引签名
let list: number[] = [1, 2, 3];
lsit1 = [1,2,'3']  //这样会报错
let list2: Array<number> = [1, 2, 3];

interface selfArray {
    [index: number]: numer
}
let list3: selfArray = [1,2,3]

注意一下类数组

function test() {
    console.log(arguments)
}

类数组有length属性以及也可以通过索引获取其值

console.log(arguments.length)
console.log(arguments[0])

但是类数组没有数组的相关方法,比如arguments.forEach,这样是错误的。
在typescript中,也不能把类数组赋值给数组

let arr: any[] = arguments

上面这样写是错误的。

1.8.元组

数组是合并了相同类型的对象, 而元组Tuple合并了不同类型的对象
元祖的表示和数组非常类似,只不过它将类型写在了里面 这就对每一项起到了限定的作用

let list:[number, string] = [1, 'a']

上面的代码是正确的,但是当我们写少一项 就会报错 同样写多一项也会有问题

list= [20,'molly', true]

1.9.Any类型

1.any类型是十分有用的,它允许你在编译时可选择地包含或移除类型检查
2.Any类型 有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型,如用户输入或者ajax或者第三方库;这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量
3.使用场景是, 当我们需要把公司现有的javascript项目迁移到typescript上面来的时候,就可以给变量声明any类型,后面再逐个的去优化,能让我们的老项目迅速切换到typescirpt

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;

1.10.Object 类型

  1. Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法,即便它真的有这些方法
let notSure: any = 4;
notSure.age; 
notSure.toFixed(); 

上面的代码可以正常运行

let prettySure: Object = 4;
prettySure.toFixed();

但是Object不可以调用任意方法,经过实践,我们发现Object不是不可以调用任意方法,只是不能调用其原型上的任意方法。比如:

let prettySure: Object = 4;
prettySure.toFixed();
prettySure.toString();

toString方法是可以进行调用的

2.高级类型相关

2.1.联合类型

  1. 表示取值可以为多种类型中的一种, 使用竖线(|)分割每个类型
let myNumber: string | number;
myNumber = 'nine';
myNumber = 9;
   
console.log(myNumber);
myNumber = true;

这里允许myNumber的数据类型是 string和number, 不能是其他类型; 如果赋值为boolean则会报编译错误

  1. 联合类型的属性或方法,只能访问它的所有类型里共有的属性或方法
function getParam(argc: number | string) {
    console.log(argc.toFixed());  //Property ‘toFixed’ does not exist on type 'string'
    console.log(argc.toString());  //这个方法就可以正常运行
}
getParam(1);
  1. 补充 联合类型相当于由类型构成的枚举类型

2.2.类型推论

TS类型推论的存在,让JS的代码可以不经过任何改动就可以在TS中正常运行。

  1. TypeScript里,在有些没有明确指出类型的地方,类型推论会帮助提供类型
  2. 发生时机:推断发生在初始化变量和成员,设置默认参数值和决定函数返回值时
let x = 3;
x = 'three';

变量x的类型被推断为数字,如果再赋值为字符串,就会报类型错误
上面的代码等价于

x: number = 3;
x = 'AA';

如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查

let x;
x = 'string';
x = 'number';
// 函数的参数和返回值使用的类型推论, 默认都是any类型
function f1(a, b) {
   console.log(a, b);
}

2.3.类型断言

  1. 类型断言可以用来手动指定一个值的类型
  2. 语法: <类型>值 或者 值 as 类型,在jsx里面只能使用第二种
  3. 用来告诉编译器你比它更了解这个类型,并且它不应该再发出错误;相当于告诉他不要去对这个值进行类型检查
    下面的代码直接运行的结果会报错
function fn(param: number | string):number {
  return param.length
}
console.log(fn('hello'))

加上类型断言,就可以让该处代码跳过tsc的类型检查,并且成功打印出我们期待的值:5

function fn(param: number | string):number {
  return (<string>param).length
}
console.log(fn('hello'))

如果在调用的时候我们传入的不是字符串,比如说是一个数字1呢

function fn(param: number | string):number {
  return (<string>param).length
}
console.log(fn(1))

打印结果是undefined
类型断言的使用一定要逻辑严谨,不能乱指定,必要的时候需要加上ifelse判定,用来减少不可控因素的副作用。
访问联合类型的属性或方法有个特点,只能访问此联合类型的所有公共的属性或者方法,比如toString()方法, 但是length属性只有字符串有,所以不行,报类型错误

function fn(x: number | string): any {
   // return x.length;
  if (typeof x === 'string') {
    // 使用类型断言 告诉编译器我知道这个是字符串类型,不用再检查了
    // return (<string>x).length; 
    return (x as string).length;
  } else {
     return x.toString().length;
  }
}
console.log(fn('hello'));
console.log(fn(123));

双重类型断言:

let x:number | string;
x = 123
let y = (x as any) as string

后面的类型必须是前面类型的子类型

2.4.类型别名

这个别名仅作了解就可以了,实际工作中都会用接口interface

  1. 类型别名用来给一个类型起个新名字
  2. 起别名不会新建一个类型 - 它创建了一个新 名字来引用那个类型; 一般给原始类型起别名没什么用
  3. 工作里面尽量使用后面我们会学习的接口 来代替类型别名
// 语法结构是 type + 自定义变量名  然后再赋值一个已存在的类型
type Name = string;
type NameNS = string | number;
   
let goodsName: Name = 'iphone';
let goodsName1: NameNS = 12;

2.5.字符串字面量类型

这个类型的概念有点像前面学的enum枚举类型,定义方式和类型别名的定义方式一样,都是用type进行定义

  1. 字符串string字面量类型 用来约束取值只能是某几个字符串中的一个
  2. 字符串字面量类型与类型别名都是使用 type 进行定义
  3. TypeScript 同样也提供 boolean 和 number 的字面量类型
type MoveDirection = 'up' | 'down' | 'left' | 'rigth';
function move(direction: MoveDirection) {
  console.log(`向:${direction} 方向移动`);
}
move('up');  //向up方向移动
move('下');  //报错

TypeScript 同样也提供 boolean 和 number 的字面量类型:例如

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