sunnyxujian's blog sunnyxujian's blog
首页
  • JavaScript
  • CSS
  • HTML和浏览器
  • Vue
  • Vue3
  • React
  • 基础知识
  • webpack
  • rollup
  • vite
  • 其他
  • Nodejs
  • 网络
  • TypeScript
  • 架构设计
  • 性能优化
  • 数据结构和算法
  • JavaScript教程 笔记
  • ES6 教程 笔记
  • TypeScript 从零实现 axios
  • Git学习 笔记
  • 渲染器原理
  • TypeScript 笔记
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • 网站
  • 资源
  • Vue资源
  • 友情链接
  • 分类
  • 标签
  • 归档
  • 友链
  • 关于
GitHub (opens new window)

xujian

劝君惜取少年时。
首页
  • JavaScript
  • CSS
  • HTML和浏览器
  • Vue
  • Vue3
  • React
  • 基础知识
  • webpack
  • rollup
  • vite
  • 其他
  • Nodejs
  • 网络
  • TypeScript
  • 架构设计
  • 性能优化
  • 数据结构和算法
  • JavaScript教程 笔记
  • ES6 教程 笔记
  • TypeScript 从零实现 axios
  • Git学习 笔记
  • 渲染器原理
  • TypeScript 笔记
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • 网站
  • 资源
  • Vue资源
  • 友情链接
  • 分类
  • 标签
  • 归档
  • 友链
  • 关于
GitHub (opens new window)
  • Nodejs

  • 网络

  • TypeScript

    • 搭建TypeScript环境
    • 基础类型
    • TS类型推导
      • 一.类型推导
      • 二.包装对象
      • 三.联合类型
      • 四.类型断言
      • 五.字面量类型
  • 架构设计

  • 性能优化

  • 数据结构和算法

  • 进阶
  • TypeScript
xujian
2021-11-12

TS类型推导

# 一.类型推导

  • 声明变量没有赋予值时默认变量是any类型

    let name; // 类型为any
    name = 'zhufeng'
    name = 10;
    
    1
    2
    3
  • 声明变量赋值时则以赋值类型为准

    let name = 'zhufeng'; // name被推导为字符串类型 
    name = 10;
    
    1
    2

# 二.包装对象

我们在使用基本数据类型时,调用基本数据类型上的方法,默认会将原始数据类型包装成对象类型

let bool1:boolean = true;
let bool2:boolean = Boolean(1); 
let bool3:Boolean = new Boolean(2);
1
2
3

boolean是基本数据类型 , Boolean是他的封装类

# 三.联合类型

在使用联合类型时,没有赋值只能访问联合类型中共有的方法和属性

let name:string | number // 联合类型  
console.log(name!.toString()); // 公共方法
name = 10;
console.log(name!.toFixed(2)); // number方法
name = 'zf';
console.log(name!.toLowerCase()); // 字符串方法
1
2
3
4
5
6

这里的!表示此值非空

let ele: HTMLElement | null = document.getElementById('#app');
ele!.style.color = 'red'; // 断定ele元素一定有值
1
2

# 四.类型断言

  • 类型断言

    let name: string | number;
    (name! as number).toFixed(2); // 强制
    ((<number>name!).toFixed(2));
    
    1
    2
    3

    尽量使用第一种类型断言因为在react中第二种方式会被认为是jsx语法

  • 双重断言

    let name: string | boolean;
    ((name! as any) as string);
    
    1
    2

    尽量不要使用双重断言,会破坏原有类型关系,断言为any是因为any类型可以被赋值给其他类型

# 五.字面量类型

type Direction = 'Up' | 'Down' | 'Left' | 'Right';
let direction:Direction = 'Down';
1
2

可以用字面量当做类型,同时也表明只能采用这几个值(限定值)。类似枚举。

编辑 (opens new window)
上次更新: 2022/05/22, 18:34:11
基础类型
发布订阅&观察者

← 基础类型 发布订阅&观察者→

最近更新
01
😍Vue3和React都在用的函数式编程,学起来~
02-03
02
链表
11-24
03
基础类型
11-18
更多文章>
Theme by Vdoing | Copyright © 2020-2023 xujian | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式