TypeScript - 类型声明、枚举、函数、接口
可定义的类型
以下所写的并不代表typescript的数据类型,而是在使用过程中可以用作定义的类型。这里只列举一些常见的,不代表只有以下这些
- number : 数值类型;
- string : 字符串类型;
- boolean : 布尔类型;
- Array : 数组类型;
- Date : 日期;
- RegExp : 正则;
- Error : 错误类型;
- any : 任意类型;
- undefined : undefined;
- null :空类型;
- Function : 函数;
- Promise : Promise;
- object : 对象类型;
为一个变量定义object类型时,意味着变量的值可以为数组、函数、Date等,就像js所定义的object。当需要实现一个对象时,可以使用接口来定义。
- interface : 接口;
该类型需要通过interface关键词来实现
- enum :枚举类型;
该类型需要通过enum关键词来实现
- void :空类型;
该类型规定函数返回值,代表无返回值
类型声明
1.单类型
let str:string = 'hello'
2.联合类型 以下值类型可以为string或number
let money:string|number = '100'
3.数组
//第一种
let arr:number[] = [1,2,3]
//第二种 个人比较喜欢这种,Array关键词能够第一眼就知道是数组
let arr:Array<string|number> = [1,'1']
Readonly关键字 数组只读
let arr:ReadonlyArray<string> = ['1']
//arr[0] = '2' error
//arr.push('2') error
//arr.length = 10 error
//let arr1 = arr error
//arr = ['2'] ok
4.自定义类型 当一些复杂类型需要多次使用,可以通过type来自定义类型,便于复用
type GetMoney = ()=>string|number
let getMoney:GetMoney = function(){
return '1000'
}
枚举
使用枚举我们可以定义一些带名字的常量,当枚举作为类型时,表示该属性只能为枚举中的某一个成员
1.字符串枚举
enum SEX{
man = '男',
woman = '女',
unknown = '未知'
}
let arr:Array<SEX> = [SEX.man,SEX.woman]
2.数字枚举
//不使用初始化器
enum Direction {
Up, //0
Down, //1
Left, //2
Right, //3
}
//使用初始化器
enum Direction {
Up = 1, //1
Down, //2
Left, //3
Right, //4
}
3.联合枚举 枚举类型本身变成了每个枚举成员的联合,它可以知道枚举里的值的集合
enum Direction {
Up,
Down,
Left,
Right
}
let direction:Direction;
direction = Direction.Up // ok
direction = Direction.Down // ok
把direction声明为Direction类型,可以看成声明了一个联合类型 Direction.Up|Direction.Down|Direction.Left|Direction.Right 4.反向映射 正向映射( name -> value) 反向映射( value -> name) 数字枚举成员还具有反向映射, 要注意的是不会为字符串枚举成员生成反向映射
enum Enum {
A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"
TypeScript可能会将这段代码编译为下面的JavaScript:
var Enum;
(function (Enum) {
Enum[Enum["A"] = 0] = "A";
})(Enum || (Enum = {}));
var a = Enum.A;
var nameOfA = Enum[a]; // "A"
简单说下以上JavaScript代码发生了什么:
- 自执行函数为Enum添加属性,
- Enum["A"] = 0赋值后返回0作为索引,
- 发生第二次赋值Enum[0] = 'A'
- 此时的Enum内部为 {"A":0, 0:"A"}
函数
1.默认参数 可选参数
//返回值为字符串数组
function foo(msg:string, msg1:string='world'):Array<string> {
return [msg,msg1]
}
say('hello')
2.剩余参数
function foo1(...arr:Array<string>):void {
arr.forEach(item=>console.log(item))
}
say1('1','2')
3.回调函数
function foo3(cb:()=>void) {
cb()
}
4.表达式函数
let foo4:(num:string)=>void = function(){}
5.Promise
//第一种 为resolve定义类型
function asyncFn():Promise<string>{
let p = new Promise((resolve:(val:string)=>void)=>{
resolve('result')
})
return p
}
//第二种 声明返回值的泛型
function asyncFn():Promise<string>{
let p = new Promise<string>((resolve)=>{
resolve('result')
})
return p
}
接口(interface)
接口的作用是对值所具有的结构进行类型检查,为这些结构定义规定,让你的代码按照规定去执行。
1.对象
interface People{
readonly name: string;
height: number;
like?: string;
}
let worker:People = {name:'Joe',height:180}
?: 可选属性 readonly 属性只读
2.索引签名 添加任意数量的额外属性
interface People{
readonly name: string;
height: number;
[propName: string]: any;
}
let worker:People = {
name:'Joe',
height:180,
sex:'man',
eat:function(){}
}
3.继承 接口和类一样,可以使用继承,这样可以分割更多的模块,便于我们灵活的组合使用
interface People{
say(msg:string):string
}
interface Man extends People{
readonly name:string
}
let coder:Man = {
name:'Wahfung',
say(msg){
return 'say:'msg
}
}
多继承
interface Man extends People,SuperMan{
readonly name:string
}
4.定义函数
interface SayHandler {
(people:string,msg:string):string
}
//参数名无需与接口的一致,甚至无需为参数规定类型,接口会自动进行判断
let sayMsg:SayHandler = function(p, m) {
let result = p+':'+m
return result
}
sayMsg('Joe','hello')
5.为函数规定参数
interface Car {
color: string;
brand?: string;
}
function CreateCar(config:Car):object{
let price = 1000
if(config.brand==='BMW'){
price = 2000
}
return {color:config.color,price}
}
CreateCar({color:'red'})
使用es6解构参数重写?
function CreateCar({color,brand}:Car):object{
let price = 1000
if(brand==='BMW'){
price = 2000
}
return {color,price}
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python 技术篇-用PIL库实现彩色图片转化为黑白图片
- PLSQL-游标
- 超详细的Java容器、面板及四大布局管理器应用讲解!
- Go各时间字符串的解析
- MongoDB数据分页与排序
- Python 技术篇-用PIL库实现图片剪切、图片粘贴
- maven初步入门
- 超详细的Java弹窗样式及使用教程【JOptionPane类详细使用教程】
- Python 技术篇-用PIL库旋转图片的两种方式,改变图像尺寸
- html+css+JavaScript例题
- 加速Github的访问及下载速度
- HDFS简介
- Python 技术篇-获取requests里的二进制文本并保存为音频、图片文件
- [转]maven的pom.xml详解
- Windows下给磁盘扩容