1.什么是TypeScript?
就是js的超集,完全包含js, js有的它都有,并且额外的增加了:类型系统
2.为什么添加类型系统?
(1)JavaScript 属于动态类型的编程语言
边解释边执行,错误只能在运行阶段才能发现
比如下面这种代码:
let ar = 11 // 这里是数值
ar = [] // 偷偷的改成了数组类型
arr.toFixed(2) // 这里会报类型错误
无疑增加了找 Bug、改 Bug 的时间,严重影响开发效率
(2)TS属于静态类型的编程语言
它要先编译,再执行。不能直接执行,需要编译成js才能执行
它会在编译期间做类型检查,从而提前发现错误
那就来体验一下
---------------------------------------
1.TypeScript安装
npm i -g typescript
内部提供了 tsc 命令 来转换成js文件, 如下
tsc 文件名.ts
这样每次运行前要先转换一下,麻烦, 介绍一个工具: ts-node
(1) ts-node安装
npm i -g ts-node
(2) 使用
ts-node 文件名.ts
解释:ts-node 命令在内部偷偷的将 TS -> JS,然后,再运行 JS 代码, 但不会生成js文件, 方便我们学习, 是否安装随意
如有报错:
-
tsc --init
生成配置文件 tsconfig.json -
写代码时,用{}包起来
----------------------------------------------------------------
了解TS新增类型
-
JS 已有类型
-
原始类型:
number/string/boolean/null/undefined/symbol
-
对象类型:
object
(包括,数组、对象、函数等对象)
-
-
TS 新增类型
-
联合类型
-
自定义类型(类型别名)
-
接口
-
元组
-
字面量类型
-
枚举
-
void
-
any 等
-
-
注意:
-
原始类型在 TS 和 JS 中写法一致
-
对象类型在 TS 中更加细化,每个具体的对象(比如,数组、对象、函数)都有自己的类型语法
-
好了,正式开始吧.
-----------------------------------------------------------
1.类型注解
let 变量名: 类型 = 初始值
let age: number = 18
// 错误代码:
// 错误原因:将 string 类型的值赋值给了 number 类型的变量,类型不一致
let age: number = '18'
一句话呗, 给变量指定类型
2.联合类型
就是定义多个类型, 用管道符隔开
// |`(竖线)在 TS 中叫做**联合类型**,
// 即:由两个或多个其他类型组成的类型,表示可以是这些类型中的任意一种
let str:string | number = 1
console.log(str)
格式:
let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
3.数组类型
有两种写法
let 变量: 类型[] = [值1,...]
let 变量: Array<类型> = [值1,...]
示例:
// 写法1:
let numbers: number[] = [1, 2, 3] // 数组只能放数字类型
// 写法2:
let strings: Array<string> = ['1','2','3'] // 当然只能放字符串类型
// 放多个类型呢?
let arr: (string | number | boolean)[] = []
arr.push(1)
arr.push("abc")
arr.push(true)
console.log(arr);
4.函数类型
// 普通函数
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') // 报错
上面类型定义都一样, 那可不可以拿出来呢?
当然可以, 那就要说到类型别名了
5.类型别名
就是通过type关键字来实现
type 别名 = 类型
type Fn = (n1:number,n2:number) =>number
const add : Fn = (a,b)=>{return a+b }
6.void类型
如果函数没有返回值,那么,函数返回值类型为:void
三种情况满足:
-
不写return
-
写return ,但是后面不接内容
-
写return undefined
void和undefined的区别
-
如果函数没有指定返回值,调用结束之后,值是undefined的
-
当不能直接声明返回值是undefined
function greet(name: string): void {
console.log('Hello', name)
//
}
// 错误代码
function add(a:number, b:number): undefined { // 这里的会报错
console.log(a,b)
}
可选参数: 就是在参数后面加问号, 避免和默认值一起用
function mySlice(start?: number, end?: number): void {
console.log('起始索引:', start, '结束索引:', end)
}
7.对象类型
给每一个属性定个类型,
const 对象名: {
属性名1:类型1,
属性名2 ?:类型2, // 可选属性
方法名1(形参1: 类型1,形参2: 类型2): 返回值类型,
方法名2:(形参1: 类型1,形参2: 类型2)=>返回值类型
} = { 属性名1: 值1,属性名2:值2 }
示例:
let obj: {
name: string,
age: number,
gender: string,
// 定义方法的两种格式
game: () => {},
play(): string,
say(): void
} = {
name: 'c',
age: 1,
gender: 'n',
game() {
return 1
},
play() {
return '2'
},
say() {
console.log('yes');
}
都可以用type提炼一下,就不演示了
接口:
只能用于对象,接口名一般约定用大写 i 开头
跟type相似, 一般还是用type
interface 接口名 {
属性1: 类型1, 属性2: 类型2,
}
示例:
interface IGoodItem {
name: string,
price: number,
func: ()=>string
}
const good1: IGoodItem = {
name: '手表',
price: 200,
func: function() {
return '看时间'
}
}
接口的继承:
interface 接口2 extends 接口1 {
属性1: 类型1, // 接口2中特有的类型
...
}
interface Point2D { x: number; y: number }
// 3D 有了三个属性
interface Point3D extends Point2D {
z:number
}
8.元组
看不懂别慌,叫的好听而已
元组是另一种特殊的数组:
-
它确切地包含多少个元素
-
特定索引对应的类型
示例:
let position: [number, number] = [39.5427, 116.2317]
来模拟一下React中的hook: useState
function useState(n: number): [number, (number)=>void] {
const setN = (n1) => {
console.log('Ez')
}
return [n, setN]
}
const [num ,setNum] = useState(10)
9.字面量类型
let str1 = 'hello' // string
const str2 = 'hello' // hello
hello类型是什么鬼?
-
str1 是一个变量(let),它的值可以是任意字符串,所以类型为:string
-
str2 是一个常量(const),它的值不能变化只能是 'hello ',所以,它的类型为:'hello '
-
注意:此处的 'Hello ',就是一个字面量类型,也就是说某个特定的字符串也可以作为 TS 中的类型
单个字面量没有什么用处,它一般和联合类型一起使用 , 用来表示一组明确的可选值列表
示例:
// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时,写上'',就会有类型提示:
changeDirection('up')
----------------------------------------
进阶类型写在另外一篇了, 不然太多