typescript简单的应用
简单来说typescript就是新增一下方法,以及增加类型判断
一、普通的类型判断
1、布尔类型(boolean)
let isDone: boolean = false
let createdByBoolean: boolean = Boolean(1)
2、数字类型(number)
let decLiteral: number = 6
let hexLiteral: number = 0xf00d
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010
// ES6 中的八进制表示法
let octalLiteral: number = 0o744
let notANumber: number = NaN
let infinityNumber: number = Infinity
3、字符串类型(string)
let myName: string = 'Tom'
// 模板字符串
let sentence: string = `Hello typescript`
4、空值类型(void、null、undefined)
// 返回空值的函数
function alertName(): void {
alert('My name is Tom')
}
// 默认空值
let unusable: void = undefined
// Null 和 Undefined
let u: undefined = undefined
let n: null = null
5、任意值(any)
let myFavoriteNumberAny: any = 'seven'
myFavoriteNumberAny = 7
6、联合类型
let myFavoriteNumber: string | number
myFavoriteNumber = 'seven'
myFavoriteNumber = 7
7、类型断言(根据类型来做判断)
function getLength(something: string | number): number {
// 当只有something为字符串时才会找到
if ((<string>something).length) {
return (<string>something).length;
} else {
return something.toString().length;
}
}
二、数组类型
let fibonacciNum: number[] = [1, 1, 2, 3, 5]
let fibonacciStr: string[] = ['1','2','3','4','5']
let fibonacciBool: boolean[] = [true,false]
let fibonacciVoid: void[] = [undefined,null]
// any在数组里的应用
let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }]
三、对象(接口)类型
1、指定对象的类型(interface)
interface Object {
name: string
age: number
}
const object: Object = {
name: '我',
age: 18
}
2、可选属性(指定类型少了一些属性或者多一些属性都是不允许的,除了可选属性)
interface Object1 {
name?: string
age: number
}
const object1: Object1 = {
age: 18
}
3、任意属性(任意名称的属性)
interface Person {
name: string;
age?: number;
[propName: string]: any;
}
// 一旦定义了任意属性,确定属性和可选属性的类型都必须是它的类型的子集(也就是可选属性和任意属性同时存在时,可选属性的类型必须和任意属性相同)
interface Person1 {
name: string;
age?: string;
[propName: string]: string;
}
let tom: Person1 = {
name: 'Tom',
age: '25',
gender: 'male'
}
4、只读属性(除了第一次赋值,其余时候都无法修改的属性)
interface Person2 {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}
// id除了第一次赋值外,其余时候都没办法修改
let tom2: Person2 = {
id: 89757,
name: 'Tom',
gender: 'male'
}
四、函数类型
1、简单的函数表达式
// 参数类型与返回类型
function sum(num1: number, num2: number): number {
return num1 + num2
}
2、完整的参数式函数表达式
// 通过赋值来定义函数
let mySum1 = function (x: number, y: number): number {
return x + y
}
// 其实这样的话是通过类型推断来决定mySum是函数而已,是不标准的,标准如下:
let mySum2: (x: number, y: number) => number = function (x: number, y: number): number {
return x + y
}
// 首先要输入mySum2的类型,类型是函数类型,而函数类型包括输入的内容(x: number, y: number),与输出的结果number,中间用=>表示是定义函数定义特有的符号
// 接口的方式定义函数,更为清晰
interface SearchFunc {
(source: string, subString: string): boolean
}
let mySearch: SearchFunc
mySearch = function (source: string, subString: string) {
return source.search(subString) !== -1
}
3、配合可选参数
// 需要注意可选参数不能放在必须参数的前面
function buildName(firstName: string, lastName?: string) {
if (lastName) {
return firstName + ' ' + lastName
} else {
return firstName
}
}
let tomcat = buildName('Tom', 'Cat')
let tom1 = buildName('Tom')
4、默认参数
function buildName1(firstName: string, lastName: string = 'Cat') {
return firstName + ' ' + lastName
}
let tomcat1 = buildName('Tom', 'Cat')
let tom3 = buildName('Tom')
5、多余参数
// 剩余参数(和es6的方式类型,表示剩余的所有参数)
function push(array: any[], ...items: any[]) {
items.forEach(function (item) {
array.push(item)
});
}
typescript简单的应用的更多相关文章
- TypeScript简单的代码片段
TypeScript中,接口.接口实现.函数重载: interface IThing{ name:string; age:number; sayHello:{ (name:string):string ...
- TypeScript设计模式之策略、模板方法
看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...
- TypeScript设计模式之门面、适配器
看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...
- TypeScript设计模式之备忘录、命令
看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...
- TypeScript设计模式之职责链、状态
看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...
- TypeScript设计模式之中介者、观察者
看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...
- TypeScript设计模式之组合、享元
看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...
- Typescript学习
一 什么是Typescript 简单的说,TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发,代码开源于 GitHub ...
- TypeScript设计模式之装饰、代理
看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...
随机推荐
- vue.js devtools图标不亮
第一步:打开谷歌扩展程序 第二步:设置允许访问文件地址
- 较新版FlowPortal BPM不能回车登录
在BPM安装目录中找到路径:WEB\YZSoft\Login\2018\js\login.js 加回车登录代码如下 //回车登录 $('.yz-input.yzglyph.uid').bind('ke ...
- SpringCloud之Eureka注册中心原理及其搭建
一.Eureka简介 Eureka是Netflix开发的服务发现框架,本身是一个基于REST的服务,主要用于定位运行在AWS域中的中间层服务,以达到负载均衡和中间层服务故障转移的目的.SpringCl ...
- windows 8/10 彻底删除脱机文件
先关闭脱机文件选项 控制面板 > 同步中心 > 管理脱机文件 > 查看脱机文件 > 点击 计算机 > ... > 脱机同步的文件夹右键,取消同步 可能需要重启 如果 ...
- 【收藏】linux快速查找文件的技巧
有时候,我们需要在系统中查找文件,Linux有一个非常优秀的搜寻系统. 一般提到搜寻文件的时候,很多人第一反应是find命令,但其实find不是常用的,因为速度慢,而且毁硬盘.一般我们都先用where ...
- Kotlin环境搭建---Hello World
对于亲爹都已经宣布它的重要性了,那做为搞安卓的自己有理由去拒绝它么?当然目前国内真正在商业中去采用Kotlin去开发项目的应该不多,但是!这肯定会被普及的,所以为了走在时代的前言,接下来会从基础语法开 ...
- Muduo阅读
创建了EventLoop对象的线程是IO线程,其主要功能是运行事件循环EventLoop::loop(), one loop per thread 事件循环必须在IO线程中运行 Reactor关键结构 ...
- 用代理服务加快brew下载速度。方法:curl
加快brew更新速度的方式:用代理 参考: https://www.zhihu.com/question/31360766常用的ss客户端都自带PAC模式的,比如ShadowsocksX-NG. 再次 ...
- linux基础_用户管理
1.创建用户 基本语法 创建用户:useradd [选项] 用户名 (1)当传教用户成功后,会自动的创建和用户名同名的家目录. (2)也可以通过useradd -d 指定目录 新用户名,给新创建的用户 ...
- mysql5.7安装中的问题(服务无法启动。服务没有报告任何错误。排查方法)
1.拒绝访问的问题 权限不够,必须以管理员身份启动命令行 2.MySQL 服务无法启动.服务没有报告任何错误. 进入到你的mysql安装目录,C:\Program Files\MySQL\MySQL ...