JavaScript Typescript基础使用教程
目录
- 简介
- 安装
- 安装命令
- 使用原因
- TypeScript类型概述
- JS原有的类型
- TS新增的类型
- 类型别名
- 泛型
简介
typescript是微软公司开发的开源编程语言,Type+Javascript(type是类型,在js的基础上添加了类型支持)
简称:ts,是Javascript的超集
安装
node.js或者我们的浏览器,他只认识js代码,不认识ts代码,所以我们需要把我们的ts转换为我们的js代码,然后进行运行操作
安装命令
npm i -g typescript
yarn global add typescript
ts包就是用来编译TS代码的包,提供了tsc的命令,实现ts->js
检验是否安装成功:
tsc -v
注意:Mac 电脑安装全局包时,需要添加 sudo 获取权限:sudo npm i -g typescript yarn 全局安装:sudo yarn global add typescript
使用原因
类型推演与类型匹配
开发编译时报错
极大程度的避免了低级错误
支持JavaScript最新特性(包含ES6/7/8)
Hello TypeScript
hello.ts文件
function sayHello(person: string) { return 'Hello, ' + person; } let user = 'Tom'; console.log(sayHello(user));
执行命令
tsc hello.ts
这时候会自动给我们生成一个helio.js文件
function sayHello(person) { return 'Hello, ' + person; } var user = 'Tom'; console.log(sayHello(user));
从上面我们可以看出,我们使用:指定的变量的类型,在自动生成的js文件中却消失了
这是因为TyperScript只会在编译时对类型进行静态检查,如果发现有错误,编译的时候就会进行报错,而在运行时,与普通的Javascript文件一样,不会对类型进行检查
TypeScript类型概述
我们可以细分为两类
JS原有的类型
原始类型,简单类型(number/string/boolean/null/undefined)
特点:简单,这些类型,是完全按照JS中的类型的名称来书写
复杂数据类型(数组,对象,函数等)
TS新增的类型
联合类型:联合类型使用|分割每个类型,取值可以为多种类型的一种
自定义类型(类型别名)
接口:是一个非常灵活的概念,接口一般首字母大写,有的编程语言中会建议接口加上I前缀
元组:元组类型是另一种类型的数组,它确切地知道包含多少个元素,以及特定索引对应的类型,number有个缺点,就是不严谨,该类型中的数组可以出现任意多个数字
字面量类型:字符串字面量类型用来约束取值只能是某几个字符串中的一个
枚举:枚举(Enum)类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等
任意类型:any表示允许赋值为任意类型
void:函数的返回值类型是void
类型别名
type Name = string; type NameResolver = () => string; type NameOrResolver = Name | NameResolver; function getName(n: NameOrResolver): Name { if (typeof n === 'string') { return n; } else { return n(); } }
使用type创建类型别名
泛型
泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性
// 基本泛型 let list1: Array<number> = [1, 2, 3] // 动态泛型 let makeTuple = <T, Y>(x: T, y: Y) => [x, y]; const v1 = makeTuple(1, 'one') const v2 = makeTuple(true, 1)
到此这篇关于JavaScript Typescript基础使用教程的文章就介绍到这了,更多相关JS Typescript内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!