typeScript类型学习

1. 字面量
- 1.1 什么是字面量
- 1.2 为什么要有字面量
- 1.3 ts中的字面量
2.|(联合类型)
3.any
4.unknown
5.unknown和any的区别
6.类型断言
7.void
8.never
9.object
10.array
11.元组
12.enum枚举
13. &
14.类型的别名

typeScript，既然是js的超集，更注重在type的判定上，和js的类型也是有差别的。学习记录一下

1. 字面量

1.1 什么是字面量

JavaScript字面量(literal)又称直接量，在JavaScript代码中用来表示一个固定的值，它可以理解为“代码文字表面上的意义的常量”。它是仅表示“自己”意义的一个实例。
说简单点就是，给变量赋值时，等号右边都可以认为是字面量。

let a= 1
let b = '123'
let c= function fun(){}
let d = {name:'xh',age:18}

上面的例子中等号右侧的都可以是字面量

1.2 为什么要有字面量

启发：借鉴1
在ts中，你能猜到下面三个变量的类型吗

const a3 = 100
var a33 = 200
let a333  = 'aaa'

结果：

const a3 = 100  //100
var a33 = 200   //number
let a333  = 'aaa' //string

解释下，因为 TS 的类型推断，TS 会把能改变（var 和 let 声明的变量）的变量 companyArea 和 companyPeopleCount 自动推断为合适的类型，const 声明的常量如果赋值为普通类型，因为其永远不会再改变了，则推断为字面量类型。

1.3 ts中的字面量

ts中可以直接使用字面量来进行类型说明

let a3 : 10    //10
var a4 : 'bingo' //'bingo'
a3 = 10
//报错,不能将类型“11”分配给类型“10”
//a3 = 11

这里有个问题

const a3 : 10

会报错，必须初始化 “const” 声明；可能这种写法不行吧，直接改成const a3 = 10

2.|(联合类型)

可以搭配字面量使用

//2.使用 | 来连接多个类型(联合类型)
let b3 :"male" | "female"
b3 = "male"
b3 = "female"
//报错,不能将类型“123”分配给类型“"male" | "female"”
//b3 = 123let c3 : boolean | string
c3 = true
c3 = "male"
//报错,不能将类型“123”分配给类型“string | boolean”
//c3 = 123

3.any

//3.any表示的是任意类型，一个变量设置了类型为any后相当于对该变量关闭了TS的类型检测
//使用TS时，不建议使用any类型
//let d3 : any
//声明变量如果不指定类型，则ts解析器会自动将变量的类型判断为any(隐式any)
//声明赋值后还是any类型
let d3
d3 = 123
d3 = '123'
d3 = true
d3 = 444

4.unknown

//4.unknown表示未知类型的值,声明赋值后还是unknown类型
let e3 : unknown
e3 = 123
e3 = '123'
e3 = true

看着和any没有区别哈，下面就是两个的区别了

5.unknown和any的区别

let f3 : string
let g3 : any
//d3的类型是any，他可以赋值给任意变量
f3 = g3let e3 : unknown
e3 = "string"
//5.unknown实际上是一个类型安全的any
//unknown类型的变量，不能直接赋值给其他的变量
//报错,不能将类型“unknown”分配给类型“string”
//f3 = e3
if(typeof e3 === "string"){f3 = e3
}

6.类型断言

类型断言主要用于当 TypeScript 推断出来类型并不满足你的需求，你需要手动指定一个类型。

let e3 : unknown
//6.类型断言，可以告诉解析器变量的实际类型
/*
语法: 变量 as 类型
<类型> 变量
*/
f3 = e3 as string;
f3 = <string> e3

// 接口
interface Person{name:string;age: number
}let student = {} as Person
// let student: Personstudent.name = 'jack'
student.age = 18

断言注意:
因为类型断言是在编译时被删除,所以没有与类型断言关联的运行时检查
如果类型断言失败,则不会出现异常的生成(指的是TypeScript)

7.void

//7.void用来表示空，以函数为例，就表示没有返回值的函数(可以没有return,可以直接return；return undefined;return null(但是vscode会报错这里))
function fun(): void{}

8.never

//8.never 表示永远不会返回结果
function fun2(): never{throw new Error('报错了')
};

9.object

//9.object表示一个js对象,其实这样的话限制不大
let a4: object
a4 = {}
a4 = function () { }
a4 = []//{}用来指定对象中包含哪些属性
//语法:{属性名:类型,属性名:类型}严格的属性个数和类型检测
let b4: { name: string, age: number }
//在属性名后面加上?，表示该属性可选可不选
let c4: { name: string, age?: number }
c4 = { name: "小花", age: 15 }
c4 = { name: "小花" }
//如果只有一个属性是确定的，其他的属性个数和属性名也不确定
//[propName(名字都行):string]: any(如果属性值全是number改为number，类推) 表示任意类型的属性
let d4: { name: string, [propName: string]: any }
d4 = { name: "康康" }
d4 = { name: "康康", age: 15 }
d4 = { name: "康康", age: 15, sex: '男' }/*
设置函数结构的类型说明：
语法:(形参:类型,形参:类型...) => 返回值
*/
let e4: (a: number, b: number) => number
e4 = function (n1: number, n2: number): number {return n1 + n2;
}

10.array

//10.array
//表示什么类型的数组,语法:类型[] 或则 Array<类型>
let f4: string[]
let g4: Array<string>
f4 = ["a", "b", "c", "d", "e"]
g4 = ["a", "b", "c", "d"]
//报错,不能将类型“number”分配给类型“string”
//f4 = ["a", "b", "c", "d",1]
// g4 = ["a", "b", "c", 1]

11.元组

//11.元组,固定长度的数组
let h4: [string, number]
h4 = ["a", 2]
//报错,不能将类型“string”分配给类型“number”
//h4 = ["a", 'b']

12.enum枚举

//12.枚举enum
enum Gender {Male = 0,Female = 1,Other = 2
}
let i4: { name: string, gender: Gender }
i4 = { name: '小王', gender: Gender.Male }

13. &

//13.&表示同时
let aaa: string & number  //无意义，类型会是never
let j4: { name: string } & { age: number }

14.类型的别名

如果你要反复用到一个类型的话，你可能会这样写

let k : 1 | 2 | 3 | 4 | 5 | 6
let m : 1 | 2 | 3 | 4 | 5 | 6
let n : 1 | 2 | 3 | 4 | 5 | 6

会发现有点呆呆地，你可以用下面的类型别名

//14.类型的别名
type myType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
let k4 :myType
k4 = 2
//报错,不能将类型“10”分配给类型“myType”
//k4 = 10

typeScript类型学习相关推荐

TypeScript 的学习笔记
文章目录 1.`TypeScript` 简介 1.1.什么是 `TypeScript` 1.2.为什么要使用 `TypeScript` 2.安装 `TypeScript` 2.1.使用 `tsc` 命 ...
c语言基本类型学习小结
基本类型学习小结环境: Dev-C++ 4.9.6.0 (gcc/mingw32), 使用-Wall编译选项基本类型包括字节型(char).整型(int)和浮点型(float/double). 定 ...
Linux目录结构，命令，文件类型学习
2019独角兽企业重金招聘Python工程师标准>>> [toc] Linux目录结构,命令,文件类型学习一. 系统目录结构简述对于目录,我们大致能够理解,像书本学的章节,每个 ...
TypeScript 类型声明书写踩坑全解析
本文总结了TypeScript类型声明的书写,很多时候写TypeScript不是问题,写类型就特别纠结,我总结下,我在使用TypeScript中遇到的问题.如果你遇到类型声明不会写的时候,多看看lod ...
《C++Primer》第二章-变量和基本类型-学习笔记(1)
<C++Primer>第二章-变量和基本类型-学习笔记(1) 文章目录 <C++Primer>第二章-变量和基本类型-学习笔记(1) 摘要主体基本(内置)类型算数类型整 ...
typescript基础学习
1.typescript类型 let num1:number = 213; let str1:string = '222'; let bool1:boolean = true; // 数组和元祖 le ...
TypeScript基础学习 —— 基础类型
基本类型 1.boolean let isDone: boolean = false; 2.number let decLiteral: number = 6; //十进制 let hexLitera ...
TypeScript-基础类型学习
基础类型 TypeScript除了支持与JaveScript几乎相同的数据类型,还支持实用的枚举类型. 布尔值 let isDone: boolean = false; 数字和JavaScript一 ...
2022 最新TypeScript入门学习笔记
TypeScript的概念 TypeScript是什么? TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript. TypeScript可以在任何浏览器.任何计算机和 ...

typeScript类型学习

typeScript类型学习

1. 字面量

1.1 什么是字面量

1.2 为什么要有字面量

1.3 ts中的字面量

2.|(联合类型)

3.any

4.unknown

5.unknown和any的区别

6.类型断言

7.void

8.never

9.object

10.array

11.元组

12.enum枚举

13. &

14.类型的别名

typeScript类型学习相关推荐

最新文章

热门文章