一起来学习TypeScript的类型

目录
  • 前言
  • 一、类型声明
  • 二、类型
    • 1.number
    • 2.string
    • 3.boolean
    • 4.字面量
    • 5.联合类型
    • 6.any
    • 7.unknown
    • 8.void
    • 9.never
    • 10.object
    • 11.array
    • 12.tuple
    • 13.枚举enum
    • 14.其他
  • 总结

前言

TypeScript学习笔记第一部分，关于TS的类型声明以及基本类型。

一、类型声明

  • 类型声明

    • 类型声明是TS非常重要的一个特点
    • 通过类型声明可以指定TS中变量（参数、形参）的类型
    • 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
    • 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
    • 语法：
let 变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型, 参数: 类型): 类型{
    ...
}
  • 自动类型判断

    • TS拥有自动的类型判断机制
    • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
    • 所以如果变量的声明和赋值同时进行时，可以省略掉类型声明
//先声明类型再赋值
let a: string;
a = 'Hello';
//声明类型并赋值
let b: number = 123;
//声明变量和赋值同时进行
let c = false;
c = true; //编译器自动判断变量c为boolean

二、类型

类型 例子 描述

number

 1，-33， 2.5 任意数字
string 'hi'， "HI" 任意字符串
boolean true，false 布尔值true或false
字面量 其本身 限制变量的值就是该字面量的值
any * 任意类型
unknown * 类型安全的any
void 空值（undefined） 没有值（或undefined）
never 没有值 不能是任何值
object {name: "Alice"} 任意的JS对象
array [1, 2, 3] 任意JS数组
tuple [4, 5] 元素，TS新增类型，固定长度的数组
enum enum{A, B} 枚举，TS中新增类型

1.number

let a: number;
a = 10;
a = 33;
//a = 'hello'; 变量a的类型是number, 不能赋值字符串

2.string

let b: string;
b = 'hello';
//b = 123; 变量b的类型是字符串, 不能赋值number

3.boolean

let c: boolean;
c = true;

4.字面量

let d: 10; // 此时d只能等于10
//let d = 11; 则会报错，限制了该变量就是字面量的值（有点类似常量）

5.联合类型

let A: boolean | string; // 变量A既可以是布尔类型也可以是字符串类型
A = true;
A = "Hello";
A = false;
A = "World";
// 字面量的联合类型限制变量B只能是"male"或"female"
let B: "male" | "female";
B = "male";
B = "female";
// B = "trans" 错误

6.any

任意类型，相当于关闭了TS对类型的限制（尽量不要用）。

let a: any;
a = true;
a = "hi";
a = 123;
// 如果声明变量不指定类型，则TS解析器会自动判断变量的类型为any
let b;
b = true;
b = "hi";
b = 123;

注意any类型的变量可以赋值给任意变量，容易出现问题。

// any 任意类型，相当于关闭了ts对类型的限制(尽量不要用)
let B: any;
B = 10;
B = 'string';
B = true;
let S: string;
S = B; // any类型可以赋值给任意类型变量，容易出现问题。

7.unknown

类型安全的any，不能直接赋值给其他变量。

let a: unknown;
a = 10;
a = "string";
a = true;
let b: string;
// b = a; 赋值时编译器会报错，不能将“unknown”类型分配给“string”。

如果一定要赋值，可以赋值前类型判断或者使用断言。

let a: unknown;
a = 10;
a = true;
a = "string";
let b: string;
/*
*  断言：
*    1. 变量 as 类型
*    2. <类型> 变量
*/
b = a as string;
b = <string> a;
/*
*  赋值前类型判断
*/
if (typeof c === 'string'){
    b = a;
}

8.void

没有返回值 => 返回的是空值 / undefined

function foo(): void {
}
console.log(typeof foo()); // => undefined
function foo1(): void{
    return undefined;
}
function foo3(){
    // 不写void默认为void
}
// 写了返回值不写返回值类型 => 自动判断返回值类型
function foo4(){
    return 1;
}
console.log(typeof foo4()); // => number

9.never

没有值，不能是任何值（连undefined都没有）

function foo(): never{
    throw new Error('raise');
}

10.object

let o: {name: string, age: number};
o = {
    name: "Edison",
    age: 25
}
// 定义可选参数
// [propName: string]: any 任意类型的属性
let a: {name: string, [propName: string]: any};
b = {
    name: 'Edison',
    age: 24,
    gender: "female"
}
// 定义函数结构
let foo: (a: number, b: number) => number;
foo = function (n1, n2) {
    return n1 + n2;
}

11.array

/*
*  元组： 长度和类型还有顺序必须与储存元素一一对应
*    [类型，类型]
*/
let a = [string, number];
a = ["hello", 123];
//以下报错
a = [123, "hello"];
a = [123];
a = ["hello"];
a = ["hello", 123, 456];

12.tuple

/*
*  元组： 长度和类型还有顺序必须与储存元素一一对应
*    [类型，类型]
*/
let a = [string, number];
a = ["hello", 123];
//以下报错
a = [123, "hello"];
a = [123];
a = ["hello"];
a = ["hello", 123, 456];

13.枚举enum

enum Gender {
    Male = 0,
    Female = 1
}
let person: {name: string, gender: Gender};
person = {
    name: "Edison",
    gender: Gender.Male
}

14.其他

// & 同时满足
let i: {name: string} & {age: number} & {gender: Gender};
i = person;
// i = b; Error
// 类型别名
type myType = typeof i;
let person1: myType;
let person2: myType;

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • 教你用typescript类型来推算斐波那契

    目录 写在前面 斐波那契 实现逻辑 第一个问题:第0和第1个数返回自身 第二个问题:某个数等于前两个数相加 第三个问题:推算一个数需要循环或者递归得到前两个值 第四个问题 结论 解决todo +1操作 数字转array 非负数判断 实现斐波那契 总结 写在前面 本文执行环境typescript,版本4.5.4 斐波那契 虽然大家都熟悉斐波那契了,还是简单的说说吧,一个知名的数学数列,地推方式如下 Fib(0) = 0 Fib(1) = 1 Fib(n) = Fib(n-1) + Fib(n-2)

  • TypeScript常见类型及应用示例讲解

    目录 常见类型(Everyday Types) 原始类型: 数组(Array) any noImplicitAny 变量上的类型注解(Type Annotations on Variables) 函数(Function) 参数类型注解(Parameter Type Annotations) 返回值类型注解(Return Type Annotations) 匿名函数(Anonymous Functions) 对象类型(Object Types) 可选属性(Optional Properties)

  • TypeScript 映射类型详情

    目录 1.映射类型(Mapped Types) 2.映射修饰符(Mapping Modifiers) 3.通过 as 实现键名重新映射(Key Remapping via as) 4.深入探索(Further Exploration) 前言: TypeScript 的官方文档早已更新,但我能找到的中文文档都还停留在比较老的版本.所以对其中新增以及修订较多的一些章节进行了翻译整理. 本篇翻译整理自 TypeScript Handbook 中 「Mapped Types」 章节. 本文并不严格按照原

  • TypeScript枚举类型

    目录 1.概述 2.数字枚举 2.1反向映射 3.字符串枚举 4.const枚举 5.总结 1.概述 所谓的枚举类型就是为一组数值赋予名字. enum类型在C++.Java语言中比较常见,TypeScript在JavaScript原有的类型基础上也增加了enum类型. 比如我们需要定义一组角色,需要使用数字表示,就可以使用如下代码定位: enum role{ STUDENT, TEACHER, ADMIN } 上面代码中我们定义了role为一个枚举类型,这个里面有是三个值,TypeScript会

  • TypeScript基础类型介绍

    目录 1.基础类型 2.对象类型 2.1数组 2.2元组 2.3对象 3.类型推断 3.1类型联合中的类型推断 3.2上下文类型 4.类型断言 TS 的静态类型可以人为的分为两类: 基础类型:像布尔值(boolean).数字(number).字符串(string).Any(任意类型).Void(无类型).Null. Undefined.Never(无值类型) 对象类型:像数组.函数.对象.枚举.元组. 1.基础类型 TS的类型定义主要通过以下示例代码中演示的方式进行定义: ;(function

  • 详解TypeScript的基础类型

    目录 布尔类型 数字类型 字符串类型 字符串和数字进行拼接 undefined和 null 数组类型 元组类型 枚举类型 any类型 void类型 联合类型 总结 布尔类型 // 布尔类型--->boolean // let 变量名:数据类型 = 值 let flag: boolean = true; console.log(flag) 数字类型 // 数字类型--->number let a1: number = 10 // 十进制 let a2: number = 0b1010 // 二进

  • 一起来学习TypeScript的类型

    目录 前言 一.类型声明 二.类型 1.number 2.string 3.boolean 4.字面量 5.联合类型 6.any 7.unknown 8.void 9.never 10.object 11.array 12.tuple 13.枚举enum 14.其他 总结 前言 TypeScript学习笔记第一部分,关于TS的类型声明以及基本类型. 一.类型声明 类型声明 类型声明是TS非常重要的一个特点 通过类型声明可以指定TS中变量(参数.形参)的类型 指定类型后,当为变量赋值时,TS编译器

  • TypeScript学习笔记之类型窄化篇

    目录 前言 类型推论 真值窄化 相等性窄化 in操作符窄化 instanceof窄化 窄化的本质 联合类型的窄化 总结 前言 TS最好用的地方就是强类型,随之而来的就是类型窄化,摸鱼的时候顺道总结下. 类型推论 TypeScript里,在有些没有明确指出类型的地方,类型推论会帮助提供类型 Example: let x = [0, 1, null] // number let x = Math.random() < 0.5 ? 100 : "helloword" // number

  • 你不知道的 TypeScript 高级类型(小结)

    前言 对于有 JavaScript 基础的同学来说,入门 TypeScript 其实很容易,只需要简单掌握其基础的类型系统就可以逐步将 JS 应用过渡到 TS 应用. // js const double = (num) => 2 * num // ts const double = (num: number): number => 2 * num 然而,当应用越来越复杂,我们很容易把一些变量设置为 any 类型,TypeScript 写着写着也就成了 AnyScript.为了让大家能更加深入

  • TypeScript基本类型之typeof和keyof详解

    目录 编译并运行 TS 代码 TypeScript基础 数组类型   [] 联合类型  | 类型别名 函数类型 void类型 可选参数 ? 参数默认值= 对象类型 :object interface 元组类型 类型推论 类型断言  as 或者 <>泛型 typeof keyof any和unknow的区别 函数重载 总结 安装编译ts的工具 安装命令:npm i -g typescript 或者 yarn global add typescript. 验证是否安装成功:tsc –v(查看 Ty

  • 详解vite2.0配置学习(typescript版本)

    详解vite2.0配置学习(typescript版本)

    介绍 尤于溪的原话. vite与 Vue CLI 类似,vite 也是一个提供基本项目脚手架和开发服务器的构建工具. vite基于浏览器原生ES imports的开发服务器.跳过打包这个概念,服务端按需编译返回. vite速度比webpack快10+倍,支持热跟新, 但是出于处于测试阶段. 配置文件也支持热跟新!!! 创建 执行npm init @vitejs/app ,我这里选择的是vue-ts 版本 "vite": "^2.0.0-beta.48" alias别

  • 详解TypeScript映射类型和更好的字面量类型推断

    概述 TypeScript 2.1 引入了映射类型,这是对类型系统的一个强大的补充.本质上,映射类型允许w咱们通过映射属性类型从现有类型创建新类型.根据咱们指定的规则转换现有类型的每个属性.转换后的属性组成新的类型. 使用映射类型,可以捕获类型系统中类似Object.freeze()等方法的效果.冻结对象后,就不能再添加.更改或删除其中的属性.来看看如何在不使用映射类型的情况下在类型系统中对其进行编码: interface Point { x: number; y: number; } inte

  • 详解 TypeScript 枚举类型

    目录 1. 数字枚举 2. 字符串枚举 3. 反向映射 4. 异构枚举 5. 常量枚举 6. 枚举成员类型和联合枚举类型 (1)枚举成员类型 (2)联合枚举类型 7. 枚举合并 前言: TypeScript 在 ES 原有类型基础上加入枚举类型,使得在 TypeScript 中也可以给一组数值赋予名字,这样对开发者比较友好,可以理解枚举就是一个字典. 枚举类型使用enum来定义: enum Day { SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, F

  • R语言学习初识Rcpp类型List

    目录 当我们想将 Rcpp 中的多种类型的对象通过一个 return 函数返回时,此时就需要将我们的所有对象整理成一个 Rcpp::List 型,然后再进行返回. 但相比于 R 中的 list(mat1 = mat1, mat2 = mat2) ,Rcpp 中的列表创建就相对复杂一些,需要使用 create() 函数,如下面例子所示: Rcpp::List ListFun(MatrixXd X) { Eigen::MatrixXd mat1, mat2; return List::create(

随机推荐