📖
blog
  • README
  • JavaScript
    • 元素的宽高位置信息梳理
    • dom-align 源码浅析
    • Event Loop
    • 函数实参为对象时的陷阱
    • export 与 utils 方法书写规范
    • 手写 Promise 及相关代码理解
    • call,apply,bind 等函数的模拟实现
    • JavaScript继承
    • JavaScript 数据类型与类型判断
    • for..of 和 for..in 的区别
    • 写给自己看的 next 函数
    • JS 可选链与双问号
    • mouseenter 与 mouseover 事件的区别
    • Immutable相关知识
  • CSS
    • 不简单的 z-index
    • 两列布局,三列布局
    • CSS 居中方案整理
    • CSS 像素,设备像素,2倍图梳理
    • iconfont 的使用
  • Node JS
    • 实现简易的 express
  • React 核心知识点整理
    • 高阶组件
    • React 事件处理
    • React Hooks
    • React Context
  • React 状态管理
    • Redux 基础概念
    • Redux 中间件和异步操作
    • Redux Saga
    • Redux 只能有一个 store 对象嘛
  • React 开发实践
    • Ant Design Menu 组件的使用与深入
    • 讲讲吸顶效果与 react sticky
    • 基于 express,搭建 react 的开发环境
    • 通过 antd input 组件分析受控与非受控组件
    • DebounceClick 组件
    • react component Align 组件分析
    • React Portal 之事件冒泡
    • React Transition Group 源码浅析
    • React.cloneElement 父组件向子组件注入 props
    • 一次 Align 组件的问题记录
    • 如何知道子组件的类型
    • React Router 源码简单分析
    • React Redux 源码简单分析
  • Vue.js
    • Vue.js 概览
    • scoped 样式中的 deep
  • TypeScript 语法
    • 基础类型
    • 变量声明
    • 接口
    • 类
    • 函数
    • 泛型
    • 枚举
    • 类型推论
    • 类型兼容性
    • 高级类型
    • Symbol
    • 迭代器和生成器
    • 模块
    • 命名空间
    • JSX
  • 玩转 webpack
    • 第一章: webpack 与构建发展简史
    • 第二章:webpack基础用法
    • 第三章:webpack进阶用法
    • 第四章:编写可维护的 webpack 构建配置
    • 第五章:webpack构建速度和体积优化策略
    • 第六章:通过源代码掌握webpack打包原理
    • 第七章:编写Loader和插件
  • webpack 实践
    • 如何配置 output.library
  • 测试
    • 初识代码测试
    • Jest 中 如何测试 setTimeout
    • Jest Enzyme React 测试实践记录
  • WEB 开发,过往工作沉淀
    • Web安全(DVWA)
    • 内存泄露与事件移除的必要性
    • url to pdf api 与 服务部署踩坑记录
    • 前端调试指南
    • Markdown 转 email
    • github travis ci 自动部署
    • 浏览器缓存知识梳理
    • WEB 系统登录相关知识梳理
    • 将-Axios-请求参数和返回值进行格式化
    • source-map与源码调试
    • HTTPS
    • 使用 rollup 打造自己的 npm 包 (全流程)
    • father-build 是如何工作的
  • 书籍
    • 图解 HTTP 协议
    • 编写可维护的 JavaScript
    • 鸟哥的 Linux 私房菜
    • JavaScript Promise迷你书
  • Linux
    • vimtutor
    • CURL 使用指南
  • Nginx
    • 一次 nginx 分享
  • Git
    • Git Commit Message 须知
    • .gitignore 模板
    • git tag标签
  • 摄影
    • 摄影基础知识
    • 手机摄影从小白到大师
  • 翻译
    • log4js
    • log4js-node
    • 介绍GitLab上的CI/CD
    • 为GitLab Pages创建并调整GitLab CI/CD
    • 关于 rel=noopener
    • AngularJS 团队 Git 提交信息约定
    • JSON Schema
  • Lifehack
    • 20 个 Google 搜索 Tips 来高效使用 Google
    • 37 个高级 Google 搜索 Tips
Powered by GitBook
On this page

Was this helpful?

  1. TypeScript 语法

基础类型

类型

示例

描述

布尔值

const areYouOk:boolean = true;

数字

const age:number = 123;

字符串

const myName: string = 'song';

数组 (1)

const list: number[] = [1,2,4]; const list: Array = [1,2,4]

元组

let x: [string, number]; x = ['1',1]

表示一个已知元素数量和类型的数组,元素类型不必相同

枚举 (2)

enum Color { Red, Green, Blue } let c: Color = Color.Green;

Any (3)

let notSure: any = 4; notSure = "maybe a string"; notSure = false;

不希望类型检查器进行检查

void (4)

用处不大

null 和 undefined

用处不大

never (5)

永不存在的值的类型,那些总会抛出异常 或者根本不会有返回值的函数表达式或者箭头函数表达式的返回值类型 变量也可能是 nerver 类型,当他们被永不为真的类型保护所约束时

Object

表示非原始类型,除了 number, string, boolean, symbol, null 或者 undefined之外的类型

类型断言 (6)

(1): 其中 Array 即为接受参数的泛型接口,如下:

interface Array<T> {
    find<S extends T>(predicate: (this: void, value: T, index: number, obj: T[]) => value is S, thisArg?: any): S | undefined;
    ...
    find(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): T | undefined;
    ...
    findIndex(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): number;
    ...
    fill(value: T, start?: number, end?: number): this;
    ...
    copyWithin(target: number, start: number, end?: number): this;
}

(2): 枚举

编译之后的代码需要注意:

enum Color { Red, Green, Blue }
let c: Color = Color.Green;  // 1  

编译之后为:
var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
let c = Color.Green;

此时Color为:  
{
    0: Red,
    1: Green,
    2: Blue,
    Red: 0,
    Green: 1,
    Blur: 2
}

因此 Color.Green = 1;

默认情况下,从0开始为元素编号,但是可以手动指定成员的数值:

enum Color { Red = 1,Green = 2,Blue = 4}

此时 Color 为: 
{
    1: Red,
    2: Green,
    4: Blue,
    Red: 1,
    Green: 2,
    Blue: 4
}

枚举的便利在于可以由枚举的值得到它的名字:

enum Color { Red=1,Green,Blue };

let colorName: string = Color[2];    // 'Green';

(3): Any 与 Object 的区别

Object类型的变量允许你给它赋任意值,但是却不能调用它上面任意的方法,即使它真的有这些方法:

let notSure: any = 4;
notSure.ifExist();

let prettySure: Object = 4.1;
prettySure.toFixed(); // error
prettySure.toString(); // true

(4): void

当函数没有返回值时,

function warnUser(): void {
    console.log('warn')
}

void类型没有什么大用,只能赋予 undefined 或者 null

let unusable: void = undefined;
let unusable: void = null;

(5): never

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message)
}

// 推断的返回值类型为never
function fail() {
    return error('somgthing failed')
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {

    }
}

(6): 类型断言

会遇到这样的情况,你比 typescript 更了解某个值的详细信息,通常发生在你清楚的知道一个实体具有比它现有类型更确切的类型。

通过类型断言告诉编译器,"相信我,我知道自己在干什么"

类型断言的两种形式:

尖括号形式

let str: any = "123";
let strLength: number = (<string>str).length;

as 语法

let str: any = "123";
let strLength: number = (str as string).length
Previousscoped 样式中的 deepNext变量声明

Last updated 4 years ago

Was this helpful?