TypeScript 是什么
-
TypeScript
简称:TS,是 JavaScript 的超集。简单来说就是:JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。 -
在 JS 基础之上,为 JS 添加了类型支持。TypeScript =
Type
+ JavaScript -
TypeScript 是微软开发的开源编程语言,可以在任何运行 JavaScript 的地方运行
TypeScript和JS的对比
-
ts完全兼容javascript,它可以编译成javascript
-
使用TS会有强大的代码类型提示
-
提升了代码的可维护性,使得重构代码更容易
-
支持最新的 ECMAScript 语法
TypeScript使用
第一步 安装包:
npm i -g typescript
用来编译 TS 代码的包
tsc –v
(查看 typescript 的版本)第二步 创建ts文件 例如 hello.ts 文件
第三步 在终端中输入命令 tsc hello.ts 生成js代码
第四步 执行 JS 代码
ts-node 简化运行 TS 使用的步骤
npm i -g ts-node //
提供了ts-node
命令可以让你在ts文件中直接运 行 如 ts-node hello.ts
ts-node报错问题
解决
-
tsc --init
生成配置文件 tsconfig.json -
写代码时,用{}包起来
TS类型注解
格式
let 变量名: 类型 = 初始值
示例代码:
let age: number = 18
说明:代码中的 : number
就是类型注解
作用:为变量添加类型约束**。
类型别名
格式
type 别名 = 类型
目的
-
给类型起别名
-
定义了新类型
type s = string // 定义
const str1:s = 'abc'
const str2:string = 'abc'
别名可以是任意的合法字符串,一般首字母大写
TS的类型
原始类型
-
原始类型:number/string/boolean/null/undefined/symbol
-
特点:简单,这些类型,完全按照 JS 中类型的名称来书写
// 数值类型
let age: number = 18
// 字符串类型
let myName: string = '小花'
// 布尔类型
let isLoading: boolean = false
// undefined
let un: undefined = undefined
// null
let timer:null = null
联合类型
定义一个变量 可以是null类型 也可以是number类型
格式
let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
解释:|
(竖线)在 TS 中叫做联合类型,即:由两个或多个其他类型组成的类型,表示可以是这些类型中的任意一种
3 数组类型
格式
let 变量: 类型[] = [值1,...]
let 变量: Array<类型> = [值1,...]
示例
// 写法一:
let numbers: number[] = [1, 3, 5] // numbers必须是数组,每个元素都必须是数字
// 写法二:
let strings: Array<string> = ['a', 'b', 'c'] // strings必须是数组,每个元素都必须是字符串
数组类型结合联合类型使用
let arr: (number | string) [] = ['1', 1]
函数的类型
格式
// 普通函数
function 函数名(形参1: 类型=默认值, 形参2:类型=默认值): 返回值类型 { }
// 箭头函数
const 函数名(形参1: 类型=默认值, 形参2:类型=默认值):返回值类型 => { }
如
// 函数声明
function add(num1: number, num2: number): number {
return num1 + num2
}
// 箭头函数
const add = (num1: number=10, num2: number=20): number => {
return num1 + num2
}
add(1,'1') // 报错
函数类型别名
把拥有相同形参和实参的函数当做一个整体,来定义 如
type Fn = (n1:number,n2:number) =>number
const add1 : Fn = (a,b)=>{return a+b }
参数可选设置
当参数不确定是否传参时 用?代替
格式
const add =(num1:number,num2?:number):void{ }
不确定参数放在确定参数列表的最后
参数默认值设置
当不传参时 默认传值
格式
const add=(num1:number=0,num2:number=10){ }
注意可选不能与默认值一起使用
函数返回值
void 类型
如果函数没有返回值,那么,函数返回值类型为:void
使用void一般有三种情况
-
不写return
-
写return ,但是后面不接内容
-
写return undefined
注意不要设置返回值类型为undefined
对象类型
格式
const 对象名: {
属性名1:类型1,
属性名2?:类型2,
方法名1(形参1: 类型1,形参2: 类型2): 返回值类型,
方法名2:(形参1: 类型1,形参2: 类型2)=>返回值类型
} = { 属性名1: 值1,属性名2:值2 }
对象类型别名
// 创建类型别名
type Person = {
name: string,
age: number
sayHi(): void
}
// 使用类型别名作为对象的类型:
let person: Person = {
name: '小花',
age: 18
sayHi() {}
}
function f1 (p: Persion) :void {
}
对象类型-接口
有俩种方法用来描述对象类型别名
-
类型别名, Type
-
接口, interface
interface格式
接口名 推荐大写 i 开头
interface 接口名 {
属性1: 类型1, 属性2: 类型2,
}
interface 只能为对象指定类型,可以实现别名继承
type 可以为任意类型指定别名
推荐:能使用 type 就是用 type
接口继承
interface IPoint2D { x: number; y: number }
interface IPoint3D { x: number; y: number; z: number }
俩个接口都有相同的属性 实现继承 方法与格式
interface 接口2 extends 接口1 {
属性1: 类型1, // 接口2中特有的类型
...
}
interface IPoint2D extends IPoint3D{
属性1: 类型1 //接口2中国特有类型
}
元组
元组是另一种特殊的数组:
-
它确切地包含多少个元素
-
特定索引对应的类型
let position: [number, number] = [1, 2]
解释:
-
元组类型可以确切地标记出有多少个元素,以及每个元素的类型
-
该示例中,元素有两个元素,每个元素的类型都是 number
当你使用时便会自动提示 如下图
字面量类型
任意的 JS 字面量(比如,对象、数字等)都可以作为类型使用
如
看起来会有点怪
相对于const 简写为 const str = 'aaaa'
字面量的作用
它一般和联合类型一起使用 用来表示一组明确的可选值列表
下一篇为大家带来typescript的高阶使用