1.TypeScript 常用类型

1.1原始类型

let age:number = 18
let Nmae: string = 'Shaolong'
let IsFine: boolean = true
let abc: null = null
let efg: undefined = undefined 
let sfun: symbol = symbol() 

完全按照JS中类型的名称来书写

1.2数组类型

//数组中只能是number类型
let numbers:number[] = [1, 2, 3]
//数组中既有number又有string
let arr: (number | string)[] = [1, 2, 3, 'a', 'b']

1.3联合类型

//数组中既可以是number又可以是string[]
//两个或多个类型中间用 | 隔开
let arr1: number | string[] = 1
let arr2: number | string[] = ['a', 'b']

1.4类型别名

type CustomName = (number | string)[]
let arr3: CustomName = ['a', 'b', 1, 2]
let arr4: CustomName = ['a', 'b', 1, 'c']

常用或多次使用的类型定义别名方便下次使用
使用type创建类型别名,CustomName可以是任何合法的变量名

1.5函数类型

//1.单独指定参数、返回值类型
function add(num1: number, num2: number) : number{
    return num1 + num2
}
add(1,2)

const addFun = (num1: number, num2: number) : number =>{
    return num1 + num2
}
addFun(3,2)

//2.同时指定参数、返回值类型
const addFuna = (num1: number, num2: number) : number = (num1, num2) => {
    return num1 + num2
}
addFuna(6,6)
//(num1: number, num2: number) : number 为指定类型代码
//通过类似箭头形式的语法来为函数添加类型
//只适用于函数类型

//3.void类型
function getName(name: string): void {
    console.log('MyName is ' + name)
}
getName('Tom')
//函数没有返回值时使用void类型

//4.可选参数(?):可传可不传
function IsOptionalParam(param1?: string, param2?: number): void {
    console.log('参数1:' + param1 + ',参数2:' + param2)
}
IsOptionalParam() //参数1:,参数2:
IsOptionalParam('a') //参数1:a,参数2:
IsOptionalParam('a','b') //参数1:a,参数2:b
//可选参数只能出现在参数列表的最后,可选参数后面不能再出现必选参数

1.6 对象类型

//1.单行时用;分开
let person = {
    name: string
    age: number
    //sayHi(): void
    sayHi:()=> void
    greet(name: string): void 
} = {
    name: 'Tom',
    age: 16,
    sayHi() {},
    greet(name) {}
}

//2.可选属性
function myAxios(config:{url: string, method?: string}) {
    console.log(config)
}
myAxios({url:'baidu.com'})
myAxios({url:'baidu.com', method:'POST'})

//3.interface声明接口后可多次使用
interface Iperson  {
    name: string
    age: number
    sayHi:()=> void
} 
let person1: Iperson= {
    name: 'Tom',
    age: 16,
    sayHi() {}
}
//interface 与 type 区别 { 前面需要加 = 
//interface只能为对象类型指定别名,type可以为任意类型定义别名

//interface 继承
interface point2d { x: number; y: number }
interface point3d { x: number; y: number; z: number}
//===
interface point2d1 { x: number; y: number }
interface point3d1 extends point2d1 { z: number }
let p3: point3d1 = {
    x: 100,
    y: 100,
    z: 100
}
//extends 继承实现复用
//point3d1 通过extends拥有了point2d1所有的类型

1.7 元组

let position: [number, number] = [32.11, 36.66]
//明确的知道数组中包含多少个元素以及索引指定的类型就可使用元组
//上面例子中少一个多一个元素都会报错

1.8 类型断言

//当你比ts更加明确的知道元素类型的时候使用类型断言
//通过类型断言获取标签特有的属性和方法
//浏览器控制台通过console.dir() 获取元素标签类型(a => HTMLAnchorElement)
const aLink = document.getElementById('ID') as HTMLAnchorElement
aLink.href

1.9 字面量类型

//字面量类型一般和联合类型配合使用
//表示一组明确的可选值列表
funstion changeDir(direction: 'up' | 'down' | 'left' | 'right') {
    console.log(direction)
}
changeDir('up')
//相比string更加严谨、精确

1.10枚举

enum Direction {
    Up,
    Down,
    Left,
    Right
}
funstion changeDire(direction: Direction) {
    console.log(direction)
}
changeDire(Direction.Up) //0
//枚举的成员是有值的,默认从0开始自增数值
enum Direction {
    Up = 2,
    Down = 4,
    Left = 6,
    Right = 10
}
funstion changeDire(direction: Direction) {
    console.log(direction)
}
changeDire(Direction.Up) //2
//也可以给数字枚举中的成员设置初始值
enum Direction {
    Up = 'up',
    Down = 'down',
    Left = 'left',
    Right = 'right'
}
funstion changeDire(direction: Direction) {
    console.log(direction)
}
changeDire(Direction.Up) //up
//字符串枚举
//枚举字符串必须要有初始值
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容