Typescript 介绍 (前端领域的第二语言)


JavaScript的超集
在这里插入图片描述

安装

在项目内进行typescript的安装。yarn add typescript
执行编译命令:yarn tsc ts文件名

配置文件

生成配置文件命令:yarn tsc --init
最终会在根目录下生成一个tsconfig.json的配置文件
编译ts命令:yarn tsc

ts的原始类型

string
number
boolean
null
undefined
void
symbol

ts标准库的声明

ts编译是依赖于内置的标准库声明文件。
在tsconfig.json配置文件中,如果target选择es5的话,那么代表使用的是标准的es5类型库,es5类型库中没有es6新增的特性。如果还想用es6的话,那么就需要启用tsconfig.json配置文件中的lib配置项,将es2015写进去

ts显示中文版的错误消息

编译命令加上中文参数:yarn tsc --locale zh-CN

ts作用域问题

在ts或者js文件中,使用export代表当前文件是一个module,module是有module自己的作用域的。

ts中的object类型

泛指所有的非原始类型:例如:数组、对象、函数等

ts 中的数组类型

Array<元素类型>
元素类型[]

ts 中的元组类型

使用字面量定义数组类型,数组内部元素可以不一样,数组的长度固定。这种类型叫做元组类型

const arr: [string, number, boolean] = ['hello world', 1000, true]

ts中的枚举类型

枚举类型只会存在几个固定值,使用关键字enum进行声明

const enum PostStatus {
    default = 0,
    publish = 1,
    unpublished = 2
}

const post = {
    status:PostStatus.default
}

ts中的函数类型

箭头函数的形式定义函数类型
直接定义参数和返回值的类型
函数的参数中可选参数必要要在最后

ts中的任意类型

any关键字。意思是可以接收任何类型

ts中的类型断言

意思就是主动告诉typescript,某一个变量就是具体的某一个类型。
使用as关键字进行类型断言

ts中的接口

使用interface关键字进行接口的定义,用于定义对象的类型
对象中动态成员的定义方式:

interface nameProps {
    [prop: string]: any;  // 动态属性类型
}

ts中类的访问修饰符

public private protected
protected修饰的变量表示只允许子类访问的成员

ts中implements关键字

用于继承接口

ts中的泛型

以函数为例:在声明的时候不去指定类型,只有在调用的时候才去传递类型。使用 T 来作为类型参数的形参

function createArray<T> (length:number,value:T):T[] {
    return Array<T>(length).fill(value)
}

ts中的类型声明

在使用第三方库的时候,第三方库并没有声明文件,那么就需要自己对第三方库中所用到的方法进行单独声明。使用declare关键字进行声明 。

import { camelCase } from 'lodash'
declare function camelCase (input: string): string
const res = camelCase('hello typed')

ts中的感叹号用法

!的意思是断言一定有值

interface peopleProps {
	name?:string;
}

const people:peopleProps = {

}
people.name!.indexof('') // 断言people.name一定有值
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值