• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

typescript简单的应用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

简单来说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)
    });
}

  

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
typescript实现浏览器全屏发布时间:2022-07-18
下一篇:
Typescript 那些好用的技巧发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap