Carmineprince's Blog
首页
    • HTML
    • CSS
    • JavaScript
    • Vue
    • React
    • TypeScript
    • Node
    • Flutter
    • Electron
    • Python
    • 运维
    • 重学前端
  • 分类
  • 标签
  • 归档

Ziqi Wang

胡思乱想程序员
首页
    • HTML
    • CSS
    • JavaScript
    • Vue
    • React
    • TypeScript
    • Node
    • Flutter
    • Electron
    • Python
    • 运维
    • 重学前端
  • 分类
  • 标签
  • 归档
  • ts学习记录1--类型
    • `JavaScript`有的八个类型
      • 1. 布尔类型
      • 2. 数字类型
      • 3. 字符串
      • 4. 数组
      • 5. null和undefined
      • 6. object
      • 7. symbol
    • `TypeScript`补充的六个类型
      • 1. 元组
      • 2. 枚举
      • 3. Any
      • 4. void
      • 5. never
      • 6. unknow
    • 关于类型的拓展内容
      • 1. 交叉类型
      • 2. 联合类型
  • Cannot find module
  • 使用动态变量ts报错的解决
  • TypeScript相关
carmineprince
2021-10-20

ts学习记录1--类型

# ts学习记录1--类型

[TOC]

# JavaScript有的八个类型

# 1. 布尔类型

只能是true或false

let bool: boolean = false;
bool = true;
bool = 123; // error 不能将类型“123”分配给boolean
let bool2: boolean = !!0 // 赋值的值可以是计算之后的布尔值的表达式
console.log(bool2) // false
1
2
3
4
5

# 2. 数字类型

同JavaScript,所有数字都是浮点数,所以只有number类型没有int或float类型,TypeScript还支持ES6中新增的二进制和八进制数字字面量,所以TypeScript中共支持二、八、十和十六四种进制的数值

定义:

let num: number;
num = 123;
num = "123"; // error 不能将“123”分配给类型“number”
num = 0b1111011; // 二进制的123
num = 0o173; // 八进制的123
num = 0x7b; // 十六进制的123
const num1 = 321; // 如果没指定类型赋值数字,编译器会推断类型
1
2
3
4
5
6
7

注意:

number和Number的区别:Number是javascript的原生类型,用其创建数值类型的值

# 3. 字符串

let str: string = 'carmineprince'
str = 'prince'
1
2

# 4. 数组

Array<type> 或 type[]推荐type[]

let list1: number[] = [1, 2, 3] // 推荐使用这种写法
let list2: Array<number> = [1, 2, 3]
1
2

# 5. null和undefined

在JavaScript中,undefined和null是两个基本数据类型

在TypeScript中,两者都以后各自的类型即undefined和null

他们即是实际的值,也是类型

let u: undefined = undefined
let n: null = null
1
2

默认情况下undefined和null可以赋值给任意类型的值

# 6. object

object在js中是引用类型,object类型的变量存的是引用

let strInit = "abc";
let strClone = strInit;
strClone = "efg";
console.log(strInit); // 'abc'
let objInit = { a: "aa" };
let objClone = objInit;
console.log(objClone) // {a:"aa"}
objInit.a = "bb";
console.log(objClone); // { a: 'bb' }
1
2
3
4
5
6
7
8
9

# 7. symbol

# TypeScript补充的六个类型

# 1. 元组

数组的拓展

表示已知元素数量和类型的数组

已知数组中每一个位置上的元素的类型

let tuple: [string, number, boolean];
tuple = ["a", 2, false];
tuple = [2, "a", false]; // error 不能将类型 “number” 分配给类型 “string” 。 不能将类型 “string” 分配给类型 “number” 。
tuple = ["a", 2]; // error Property '2' is missing in type '[string, number]' but required in type '[string, number, boolean]'
tuple[1] = 3; // 单个元素赋值

1
2
3
4
5
6

# 2. 枚举

默认:

enum Roles {
SUPER_ADMIN, 	// 0
ADMIN,			// 1
USER			// 2
}
1
2
3
4
5

定义开始:

enum Roles {
SUPER_ADMIN = 1,	// 1
ADMIN,				// 2
USER				// 3
}
1
2
3
4
5

自定义:

enum Roles {
SUPER_ADMIN = 1,
ADMIN = 3,
USER = 7
}
1
2
3
4
5

获取枚举值:

enum Roles {
SUPER_ADMIN, 	// 0
ADMIN,			// 1
USER			// 2
}
console.log(Roles.SUPER_ADMIN) 	// 0
console.log(Roles[0]) 			// 'ADMIN'
1
2
3
4
5
6
7

# 3. Any

JavaScript 的类型是灵活的,程序有时也是多变的。有时,我们在编写代码的时候,并不能清楚地知道一个值到底是什么类型,这时就需要用到 any 类型

let value: any;
value = 123;
value = "abc";
value = false;
1
2
3
4

不要滥用 any ,如果任何值都指定为 any 类型,那么 TypeScript 将失去它的意义

# 4. void

void 和 any 相反, any 是表示任意类型,而 void 是表示没有任意类型,就是什么类型都不是,这在我们定义函数,函数没有返回值时会用到

const consoleTest = (text: string): void => {
    console.log(text);
}
1
2
3

void 类型的变量只能赋值为 undefined和 null , 其他类型不能赋值给 void 类型的变量。

# 5. never

never 类型指那些永不存在的值的类型,它是那些总会抛出异常或根本不会有返回值的函数表达式的返回值类型,当变量被永不为真的类型保护(后面章节会详细介绍)所约束时,该变量也是 never 类型。

const errorFunc = (message: string): never => {
	throw new Error(message);
};
1
2
3

# 与void的区别

通常情况下我们会这样定义无返回值的函数:

const fun = (): void => {}
1

但在TypeScript中void至少包含了一下几个子类型:

  • undefined
  • null

# 完全无返回值

而never是完全没有返回值的类型,只有一种情况会如此:代码阻断

满足的条件:

  • throw new Error
  • return process.exit(1)
  • while(true){}

如果函数的返回值类型是 never 意味的此函数必须不能被顺利完整执行,而发生中断行为。

# 所有类型的子类型

never 是所有类型的子类型,因此可以理解为:所有的函数的返回值都包含 never 类型:

function fun(s: string): number {
  if (s == 'a') return 1;
  if (s == 'b') return 2;
  throw new Error;
}
// 等同于 fun(s: string): number | never
1
2
3
4
5
6

# 6. unknow

  • 3.0版本新增
  • 表示未知的类型

# 与any的区别

当指定了any类型以后,这个值基本上是“废了”,可以随意对其进行属性方法访问,不管有的还是没有的。

当指定了unknown类型以后,如果没有通过基于控制流的类型断言来缩小范围的话,是不能对他进行任何操作的。

# 关于类型的拓展内容

# 1. 交叉类型

交叉类型就是取多个类型的并集,使用 & 符号定义,被 & 符链接的多个类型构成一个交叉类型,表示这个类型同时 具备这几个连接起来的类型的特点,来看例子:

const merge = <T, U>(arg1: T, arg2: U): T & U => {
let res = <T & U>{}; // 这里指定返回值的类型兼备 T 和 U 两个类型变量代表的类型的特点
res = Object.assign(arg1, arg2); // 这里使用 Object.assign 方法,返回一个合并后的对象;
return res;
};
const info1 = {
name: "lison"
};
const info2 = {
age: 18
};
const lisonInfo = merge(info1, info2);
console.log(lisonInfo.address); // error 类型 “{ name: string; } & { age: number; }” 上不存在属性 “address”
1
2
3
4
5
6
7
8
9
10
11
12
13

# 2. 联合类型

联合类型是要求只要符合联合类型中任意一种类型即可,它使用 | 符号定义。当我们的程序具有多样性,元素类型不唯一时,即使用联合类型。

const getLength = (content: string | number): number => {
if (typeof content === "string") return content.length;
else return content.toString().length;
};
console.log(getLength("abc")); // 3
console.log(getLength(123)); // 3
1
2
3
4
5
6
#typescript#学习笔记
上次更新: 10/21/2021, 1:52:09 PM
Cannot find module

Cannot find module→

最近更新
01
pc端rem配置
03-02
02
使用动态变量ts报错的解决
02-25
03
React Hook详解
02-18
更多文章>
Theme by Vdoing | Copyright © 2021-2022 Carmineprince | 鲁ICP备2021046263号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式