Typescript类型声明整理

1.常见类:number类、string类、boolean类

声明一个变量a,同时指定它的类型为number

let a: number; 

声明一个变量同时指定类型,并且直接赋值

let a: number = 22; 

number关键字首字母不区分大小写,但不建议使用驼峰的Number,因为驼峰的Number关键字一般划给实例创建使用,new Number()

let a: Number; 
let a: number; 

a的类型设置为了number,在以后的使用过程中a的值只能是数字

let a: number; 
a = 100;
a = 133;

如果为该变量a赋值为其他类型的值则都会报错

下面是错误示范

let a: number; 

a = '100'; // 字符串
a = 'hello'; // 字符串
a = [1,2,3] // 数组

报错信息在VSC编辑器中则以红色波浪线作出警告,将鼠标悬置在红色波浪线可查看报错相关信息

当TS代码中有语法有错误时,编译时会给出代码报错信息,但并不会影响编译的整体执行,编译是照常进行的

错误代码演示



执行编译



编译没有被中断,TS代码正常编译转变为JS代码

如果变量没有声明类型,但给变量赋了值,TS可以自动对变量进行类型检查

let a = false;
a = true // 不报错

a = 123; // 报错

2.字面量类型

直接使用字面量进行类型声明,赋值后不能再去修改(字面量类型就是其本身,限制变量的值就是该字面量的值)

let a: 10
a = 10;

a = 11; // 报错

3.函数类

在JS中函数中是不考虑参数类型和个数的

function sum(a,b) {
    return a + b
}
console.log(sum(123,456)) // 输出 579
console.log(sum(123,'456')) // 输出 '123456' 产生了字符串拼接效果

函数参数类型声明

function sum(a,b) {
    return a + b
}
console.log(sum(123,456)) // 输出 579
console.log(sum(123,'456')) // 输出 '123456' 产生了字符串拼接效果
function sum1(a: number, b: number) {
    return a + b
}

sum1(a: 123, b: 123) 

function sum2(a: number, b: number) {
    return a + b
}

sum2(a: 123, b: '123')  // 报错

函数返回值类型声明

function sum1(a: number, b: number) {
    return a + b
}

sum1(a: 123, b: 123) 

function sum2(a: number, b: number): number {
    return a + b
}

let result = sum2(a: 123, b: '123') 

4.联合类型

可以使用 | 来连接多个类型(术语叫联合类型)

// demo1:字面量类型声明场景,用的不多
let b: "male" | "female";
b = "male";
b = "female"

// demo2
let c: boolean | string; // | 竖线在这里代表或的意思,变量c可以是布尔类型或者是字符串类型
c = true;
c = 'hello';

5. any 类

any 表示的是任意类型,一个变量设置类型为 any 后,相当于对该变量关闭了TS类型检测,因为设置为any其实就是原生了JS类型了

let d: any; // 显式any
d = 10;
d = 'hell0';
d = true

所以使用TS时,不建议设置变量为any类型,因为变量设置为any类型后没有任何意义,该变量就没有了约束,回归到了JS原生上来。

隐式 any :声明变量时,如果不指定类型,则TS解析器会自动判断变量为any类型

let d;
d = 10;
d = 'hell0';
d = true

不建议使用any类型

any类型可以赋值给任意变量

let d;
d = 10;
d = 'hell0';
d = true;

let s: string;
s = d; // d的类型是any,它可以复制给任意变量

6. unknown类,类型安全的any

unknown:表示未知类型的值,效果类似 any 类,

let e: unknown;
e = 10;
e = 'hello';
e = true;

unknown实际上是一个类型安全的any,unknown类型的变量不能直接赋值给其他变量

let e: unknown;
e = 10;
e = 'hello';
e = true;

let s: string;

e = 'hello';
s = e;

7. 类型断言

类型短语,可以用来告诉解析器变量的实际类型

2种语法:

变量 as 类型

<类型> 变量
let e: unknown;
e = 10;
e = 'hello';
e = true;

let s: string;

s = e as string;

s = <string>e;

8.void类型

指定函数返回值类型

function fn():string | number {
    return '123'
}

void 用来表示空,以函数为例,表示没有返回值的函数

function fn():void {
    return; 
}

function fn1():void {
    return undefined;
}

function fn2():void {
    return null;
}

// fn4 会报错
function fn4():void {
    return '123';
}

void类型指定了函数返回值类型必须为空



9. never类

将函数返回值类型设置为never类,表示永远不会返回结果,一般用于抛出程序错误

function fn(): never {
    throw new Error("报错了");
}

10. object 对象类

限制一个对象

let obj: object;

限制对象当中的属性

let b: {name: string, age: number};
b = {name: 'qfb', age: 22};

对象缺少属性值

let b: {name: string, age: number};
b = {name: 'qfb'};

未定指定属性类型

let b: {name: string};
b = {name: 'qfb', age: 22};

对象的可选属性,在属性名后边加上?,表示对象中该属性是可选的

let b: {name: string, age?: number};
b = {name: 'qfb', age: 22}; // 不报错

b = {name: 'qfb'}; // 不报错

对象当中的任意类型属性(当不确定对象中有几个属性时可用)

let b: {name: string, [propName: string]: any};
b = {name: 'qfb', age: 22, class: '19计算机应用3-3', gender:'男'}; // 不报错

11.函数结构类型声明

声明d是一个函数类型,参数a和参数b是number类型,函数的返回值是number类型

let d: (a: number, b: number) => number;

// 报错
d = function (n1: string, n2: string): number {
    return 10
}

12. Array类型

指定该变量为数组类型,数组中的元素是字符串(字符串数组)

let arr: string[];
arr = ['a', 'b', 'c'];

数组类型声明的2种表达方式

let arr1: string[] 表示字符串型数组
let arr2: number[] 表示数值型数组

let arr3: Array<number> 表示数值型数组,写法不一样罢了

13.tuple元组类型

  • JS当中没有元组这个概念,元组其实就是一个固定长度的数组

元组定义

let h: [string, string];
h = ['hello', 'hi'];

因为元组是固定长度的,所以或多或少一个元素都会报错

多一个元素
少一个元素

14.enum 枚举类

enum Gender {
    Male = 0,
    Female = 1
}

let i: {name: string, gender: Gender};
i = {
    name: '孙悟空',
    gender: Gender.Male
}

console.log(i.gender === Gender.Male);


15.&与,表示同时符合

let j: { name: string } & { age: number };
j = {name:'qfb'}; // 不符合,报错
j = {name:'qfb',age: 18} //符合

16.类型别名,简化类型的使用

type myType = 1 | 2 | 3 | 4;
let k: myType;
let l: myType;
let m: myType;

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

推荐阅读更多精彩内容