TypeScript类型检查机制
类型推断
指不需要指定变量的类型,TS编译器可以根据某些规则自动推断出类型。
什么时候会有类型推断?
- 声明变量时没有指定类型
- 函数默认参数
- 函数返回值
- ......
let a; // 这时自动推断为any类型
let b = 1; // 推断为number类型
let c = []; // 推断为由any类型构成的数组
let d = (x=1) => x+1; // 函数传参时,默认参数被推断成number类型,返回值也会被推断
let e = [1,null]; // 推断出兼容所有数据的类型:number和null的联合类型 有时候TS类型推断不符合我们的预期,我们应该比编译器更有信心它应该是什么类型,类型断言就允许我们覆盖TS的推论。
interface Foo{
bar: number
}
let foo: Foo = {} as Foo; // 如果一个对象按照接口的约定,需要有很多的属性和方法,难以在声明的时候定义完全。这时候可以用断言
foo.bar = 1; // 具体的定义在这里
注意:类型断言不能乱用,要对上下文环境有充足的预判,没有任何根据的断言会带来安全隐患!
类型兼容
TS允许类型相互兼容的变量(函数、类等结构)相互赋值。
当一个类型Y可以被赋值给另一个类型X时,就认为类型X兼容Y,X为目标类型,Y为源类型。
兼容规则:
- 结构之间兼容:成员少的兼容成员多的
- 函数之间兼容:参数多的兼容参数少的
接口兼容性
interface X {
a: any;
b: any;
}
interface Y {
a: any;
b: any;
c: any;
}
let x: X = {a:1,b:2};
let y: Y = {a:1,b:2,c:3};
x = y; // x兼容y 成员少的会兼容成员多的
函数兼容性
// 参数个数的兼容
type Handler = (a: number,b: number) => void;
function hof(handler: Handler) {
return handler
}
let handler1 = (a:number) => {};
hof(handler1); // 一个参数可以兼容
let handler2 = (a: number,b: number,c: number) => {};
// hof(handler2); // 三个参数不被兼容 // 可选参数和剩余参数的兼容
let a1 = (p1: number, p2: number) => {};
let b1 = (p1?: number, p2?: number) => {};
let c1 = (...args: number[]) => {};
a1 = b1;
a1 = c1;
// b1 = a1; // 可选参数不能被兼容。需要将tsconfig.json中“strictFunctionTypes”置为false即可
// b1 = c1;
c1 = a1;
c1 = b1;
类的兼容性
两个定义不同的类互不兼容,子类在继承父类后没有做改动,可以兼容父类。
泛型的兼容性
两个定义完全一样的泛型函数相互兼容
类型保护
TypeScript能够在特定的区块中保证变量属于某种确定的类型。可以在此区块中放心地访问此类型的属性和方法。
比如,我们要判断一个对象是否含有某个方法
interface OBJ {
name: string,
age: number,
sex: boolean
}
let obj: OBJ = {
name: "typescript",
age: 10,
sex: true,
};
if(obj.sex) // obj中有sex属性,所以OK
{
console.log("has sex");
}
// if(obj.bac) {} // obj中没有bac属性,此处报错。
我们有四种提供类型保护的方式:
- instanceof 用于判断一个实例是否属于某个类
- in 判断一个属性/方法是否属于某个对象
- typeof 用于判断基本类型
- 类型保护函数 当判断逻辑复杂时,可以自定义判断函数
class Java {
helloJava(){
console.log("hello java");
}
java: any;
}
class JavaScript {
hellloJavaScript(){
console.log("hello javascript");
}
javascript: any;
}
// 类型保护函数 注意参数类型 和 返回值类型 的关系
function isJava(lang: Java|JavaScript):lang is Java {
return (lang as Java).helloJava !== undefined
}
function getLanguage(type: number,x: string|number|boolean) {
let lang = type === 1 ? new Java() : new JavaScript();
// instanceof 判断lang是否属于Java类
if(lang instanceof Java)
{
lang.helloJava(); // 在这个区块中,能够保证lang一定是java的实例,调用自己的方法
}else
{
lang.hellloJavaScript(); // 这个区块中,一定能够保证lang是JavaScript的实例
}
// in “helloJava”方法是否属于lang对象
if("helloJava" in lang)
{
lang.java; // 在这个区块中能够保证,lang是java的实例
}else
{
lang.javascript // 这个区块中能够保证lang是JavaScript的实例
}
// typeof 用于判断基本类型
if(typeof x === "string")
{
x.length // 程序进入这个区块,能够保证x是string类型。可以调用字符串原生方法
}else if(typeof x === "number")
{
x.toFixed(2); // 在这里能够调用数字的原生方法
}else
{
x = !x;
}
// 类型保护函数 在定义的时候,注意返回值的类型和参数类型的关系
if(isJava(lang))
{
lang.helloJava();
}else
{
lang.hellloJavaScript();
}
}
getLanguage(2,"str");
TypeScript类型检查机制的更多相关文章
- 细说Typescript类型检查机制
上一篇文章我介绍了Typescript的基础知识,回顾一下,有基础数据类型.数组.函数.类.接口.泛型等,本节内容将述说一下Typescript为方便我们开发提供了一些类型检查机制. 类型检查机制 类 ...
- 【长文详解】TypeScript、Babel、webpack以及IDE对TS的类型检查
只要接触过ts的前端同学都能回答出ts是js超集,它具备静态类型分析,能够根据类型在静态代码的解析过程中对ts代码进行类型检查,从而在保证类型的一致性.那,现在让你对你的webpack项目(其实任意类 ...
- TypeScript 类型推导及类型兼容性
类型推导就是在没有明确指出类型的地方,TypeScript编译器会自己去推测出当前变量的类型. 例如下面的例子: let a = 1; 我们并没有明确指明a的类型,所以编译器通过结果反向推断变量a的类 ...
- 类型检查和鸭子类型 Duck typing in computer programming is an application of the duck test 鸭子测试 鸭子类型 指示编译器将类的类型检查安排在运行时而不是编译时 type checking can be specified to occur at run time rather than compile time.
Go所提供的面向对象功能十分简洁,但却兼具了类型检查和鸭子类型两者的有点,这是何等优秀的设计啊! Duck typing in computer programming is an applicati ...
- CesiumJS新增官方TypeScript类型定义
Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 在当前的1.70版本中,CesiumJS现在附带了正式的Type ...
- 解析 Linux 内核可装载模块的版本检查机制
转自:http://www.ibm.com/developerworks/cn/linux/l-cn-kernelmodules/ 为保持 Linux 内核的稳定与可持续发展,内核在发展过程中引进了可 ...
- 编译期类型检查 in ClojureScript
前言 话说"动态类型一时爽,代码重构火葬场",虽然有很多不同的意见(请参考),但我们看到势头强劲的TypeScript和Flow.js,也能感知到静态类型在某程度上能帮助我们写出 ...
- 享受Python和PHP动态类型检查语言的快感
前言 写这文章的时候特地查了资料,以确保我没有说错关于Python和PHP的类型机制. 所以这里放一张图,关于强弱类型与动态/静态类型检查的区分 从分类上看,PHP属于弱类型语言,而Python属于强 ...
- 介绍几款 Python 类型检查工具
近日,微软在 Github 上开源了一个 Python 静态类型检查工具:pyright ,引起了社区内的多方关注. 微软在开源项目上的参与力度是越来越大了,不说收购 Github 这种大的战略野心, ...
随机推荐
- os一些记录
X86-32 内存机制 寄存器 段寄存器 指令寄存器 标志寄存器 编程技巧 通用格式双向链表 操作的接口 由一个指针找到宿主节点的方法
- File- Linux必学的60个命令
1.作用 件内容判断文件类型,使用权限是所有用户. 2.格式 file通过探测文 file [options] 文件名 3.[options]主要参数 -v:在标准输出后显示版本信息,并且退出. -z ...
- Leetcode201. Bitwise AND of Numbers Range数字范围按位与
给定范围 [m, n],其中 0 <= m <= n <= 2147483647,返回此范围内所有数字的按位与(包含 m, n 两端点). 示例 1: 输入: [5,7] 输出: 4 ...
- Activiti 使用小结
自定义表单类型 使用动态表单,需要定义表单的字段以及属性,在WEB流程设计器中没有Default字段(Eclipse中有),给设计带来了一定的困难,下面介绍如何在WEB流程设计器中扩展表单. 首先在s ...
- 【codeforces 507E】Breaking Good
[题目链接]:https://vjudge.net/contest/164884#problem/D [题意] 给你一张图; 图中有些路是完好的;但有些路还没修好; 先不管路有没有修好; 问你从起点到 ...
- 洛谷P2333 [SCOI2006]一孔之见
传送门 辣鸡题目毁我人生败我前程 50分代码 //Achen #include<algorithm> #include<iostream> #include<cstrin ...
- js阻止冒泡和默认事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 通过media媒体查询设置ie7/8样式、使用media判断各机型、手淘flexible.js
@media all and (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } @media (min ...
- grpc之protobuf常用语法速学
1,语法速学(1):返回商品”数组”.repeated修饰符 Repeated:是一个修饰符,返回字段可以重复任意多次(包括0次) 可以认为就是一个数组(切片) 服务端: 创建protobuf文件 s ...
- Vue.之.回到顶部
Vue.之.回到顶部 当页面出现上下滚动条时,页面右下角出现回到顶部功能. 在页面上添加如下DIV(写的CSS内部样式),这个DIV功能:出现滚动条往下滑动,就显示出来,反之隐藏.点击DIV快速回到顶 ...