专栏首页黯羽轻扬基本类型_TypeScript笔记2

基本类型_TypeScript笔记2

一.JavaScript类型

JavaScript有7种类型:Boolean、Number、String、Undefined、Null、Object,以及ES6新增的Symbol

这7种TypeScript全都支持:

// JavaScript支持的7种类型
let isDone: boolean = false;  // 布尔值
let decimal: number = 6;      // 数值
let color: string = 'blue';   // 字符串
let u: undefined = undefined; // Undefined
let n: null = null;           // Null
let obj: object = {};         // Object
let sym: symbol = Symbol();   // Symbol

变量声明

上面示例中的变量都是通过let声明的,其实有3种变量声明方式:

  • var:函数作用域
  • let:块级作用域
  • const:块级作用域,常量(不允许修改)

例如:

var a: string = 'a';
let b: string = 'b';
const c: string = 'c';

与JavaScript变量声明方式完全一致,不再赘述,具体见Variable Declarations

P.S.实际上,letconst最终都会被编译成var,块级作用域等特性通过变量重命名来模拟

二.TypeScript类型

TypeScript共有13种基本类型,除了JavaScript所有的7种之外,还有:

  • Array:数组,表示一组类型相同的元素
  • Tuple:元组,表示一组固定数量的元素(不要求元素类型相同),如二元组,三元组
  • Enum:枚举,常量集合
  • Any:任意类型,表示未知类型,比如动态内容(用户输入、或第三方类库)或不知道类型的东西(混合类型数组),可以声明any类型绕过类型检查
  • Void:空类型,表示没有类型,比如无返回值函数的返回值类型
  • Never:绝不存在的值的类型,如永远不会返回的函数(必定抛异常的,或函数体有死循环的)的返回值类型

示例如下:

// TypeScript新增的6种类型
let list: number[] = [1, 2, 3];       // 数组
let list: Array<number> = [1, 2, 3];  // 数组
let x: [string, number] = ["hello", 10];        // 元组
enum Color {Red = 'r', Green = 'g', Blue = 'b'} // 枚举
let notSure: any = 4;                 // 任意类型
let list: any[] = [1, true, "free"];  // 任意类型数组(未知类型)
function warnUser(): void {/*..*/}              // 空类型
function neverReturn(): never {throw 'error';}  // 绝不存在的类型

需要注意几点:

  • Array类型有2种声明格式(elemType []Array<elemType>
  • 访问Tuple发生越界时,应用并集类型(union type),所以上例中x[10]的类型是string | number
  • Enum值可以省略,默认按key声明顺序从0开始。如果指定了数值,后一项的值在此基础上递增,否则要求之后的项都要指定值(默认的数值递增机制应付不了了)
  • Any类型相当于局部的类型检查开关,这在TypeScript与JavaScript代码并存的项目中很有意义
  • Void类型的变量也是合法的,约束值只能是undefinednull
  • Null、Undefined和Never是其它类型的子类型,因此可以赋值给任何其它类型变量(例如let str: string = null也是合法的)
  • Never类型不可以赋值给其它任何类型,即便是Any也不行
  • Never类型的变量也是合法的,此时Never可以用作类型保护(例如declare const name: never;避免隐式访问window.name

P.S.特殊的,建议开启--strictNullChecks选项,此时UndefinedNull只允许赋值给Void以及各自对应的类型

P.S.关于Never作为类型保护的应用,见Improve type safety of name global variable

三.类型断言

可以通过类型断言告知TypeScript编译器某个值的确切类型:

Type assertions are a way to tell the compiler “trust me, I know what I’m doing.”

类似于其它语言里的强制类型转换(type casting),区别在于类型断言只是编译时的,不像类型转换一样具有运行时影响:

A type assertion is like a type cast in other languages, but performs no special checking or restructuring of data. It has no runtime impact, and is used purely by the compiler.

有两种语法格式,分别是<type>as type,例如

let someValue: any = "this is a string";
// <type>
let strLength: number = (<string>someValue).length;
// as type
let strLength: number = (someValue as string).length;

两种方式等价,但在JSX中只能用as type(尖括号语法与JSX语法冲突)

四.常用技巧

访问枚举key

实际上,TypeScript枚举类型建立了key-value的双向索引,例如:

enum Color {Red = 1, Green, Blue}
// 对应的JavaScript为
var Color;
(function (Color) {
   Color[Color["Red"] = 1] = "Red";
   Color[Color["Green"] = 2] = "Green";
   Color[Color["Blue"] = 3] = "Blue";
})(Color || (Color = {}));
// 得到
// {1: "Red", 2: "Green", 3: "Blue", Red: 1, Green: 2, Blue: 3}

因此,一个有意思的技巧是根据枚举值访问key

let colorName: string = Color[2];
// 此时,colorName为'Green'

修改global

Any类型用来绕过编译时类型检查,因此可以用来修改一些不能改的东西,例如:

window.customFunction = myCustomFunction;

编译报错:

Property ‘customFunction’ does not exist on type ‘Window’.

可以通过any类型绕过:

const globalAny: any = window;
globalAny.customFunction = myCustomFunction;

或者等价的类型断言:

(<any> window).customFunction = myCustomFunction;
// 或
(window as any).customFunction = myCustomFunction;

参考资料

  • Basic Types

本文分享自微信公众号 - 前端向后(backward-fe),作者:黯羽轻扬

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 组合类型与类型保护_TypeScript笔记9

    Object.assign能把source: U身上的可枚举属性浅拷贝到target: T上,因此返回值类型为T & U

    ayqy贾杰
  • ES2018

    但如果数据源是异步的,for...of循环就只能拿到一堆Promise,而不是想要的值:

    ayqy贾杰
  • JSDoc支持_TypeScript笔记19

    因此,对于.js文件,需要一种被 JavaScript 语法所兼容的类型标注方式,比如JSDoc:

    ayqy贾杰
  • Typescript-基础类型

    Typescript支持与Javascript几乎相同的数据类型,此外还提供使用的枚举类型方便我们使用。

    用户3258338
  • TypeScript - 类型声明、枚举、函数、接口

    4.自定义类型 当一些复杂类型需要多次使用,可以通过type来自定义类型,便于复用

    WahFung
  • 万字长文:读博之前,我希望有人告诉过我这些(计算机/NLP/机器学习方向)

    大数据文摘
  • 2、你能读得懂的TypeScript教程之基础数据类型

    在正式开篇之前,小伙伴们应该先弄清楚两个概念:强类型与弱类型。没错,这两个词都是形容编程语言的,即强类型语言与弱类型语言。

    用户1272076
  • TypeScript手记(六)

    TypeScript 里,在有些没有明确指出类型的地方,类型推断会帮助提供类型。如下面的例子:

    用户7572539
  • Golang 原生实现简单爬虫:了解网络爬虫原理

    本文来自作者 Master 在 GitChat 上分享 「Golang 原生实现简单爬虫」

    CSDN技术头条
  • TypeScript手记(三)

    TypeScript 的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在 TypeScript 里,接口的作用就是...

    用户7572539

扫码关注云+社区

领取腾讯云代金券