其他内容
ts中的类型
编译选项
webpack打包
类
ts是什么
- 以javascript为基础，来构建的语言
- 它是一个javascript的超集，它对js进行了扩展，并添加了 类型
- 兼容所有js平台
- 不能被js解析器直接执行（即.ts文件不可以被执行），需要将ts代码编译成js
ts增加了什么
- 类型
- 支持es的新特性，支持js所有内容
- 添加了es不具有的新特性：抽象类、接口
- 丰富的配置选项（可严格、可松散、可以把ts编译成es3等版本，兼容型好，）
- 强大的开发工具
- 有提示
TypeScript中的基本类型
-
类型声明
-
通过类型声明可以指定TS中变量（参数、形参）的类型；
-
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错；
-
简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值；
-
自动类型判断
- TS拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
- 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明
let a = 30 ,此时a默认为number类型
-
类型：
| 类型 |
例子 |
描述 |
| number |
1, -33, 2.5 |
任意数字 |
| string |
‘hi’, “hi”, hi
|
任意字符串 |
| boolean |
true、false |
布尔值true或false |
| 字面量 |
其本身 |
限制变量的值就是该字面量的值 |
| any |
* |
任意类型 |
| unknown |
* |
类型安全的any |
| void |
空值（undefined） |
没有值（或undefined） |
| never |
没有值 |
不能是任何值 |
| object |
{name:‘孙悟空’} |
任意的JS对象 |
| array |
[1,2,3] |
任意JS数组 |
| tuple |
[4,5] |
元素，TS新增类型，固定长度数组 |
| enum |
enum{A, B} |
枚举，TS中新增类型 |
字面量
//不可改变，有点像常量
let a: 10
a = 11
// 不可设置为出字面量以外的值
let b: 'male' | 'false'
b = 'male'
b = 'false'
b = 'hello'
// 既限定类型又给出初始值
let color: string = 'red'
color = 'blue'
number
let a: number;
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;
boolean
let a: boolean;
let b = true;
string
let a: string;
let color: string = 'red'
color = 'blue'
any
表示任意类型，一个变量设置为any，相当于关闭了该变量的类型检测
any可以赋值给任意类型的变量
let d: any;
d = 'hello';
d = true;
// any可以赋值给任意类型的变量
let s: string;
s = d
unknown
实际上是一个安全类型的any
unknown 类型的变量不能赋值给任意类型的变量
let e: unknown
e = 10
e = 'hello'
e = true
let s: string;
s = e //报错
类型断言
手动指定一个值的类型
s = e as string
s = <string>e
void
用来表示空，以函数为例，就表示没有返回值或undefined
function fn(): number | string | void {
return undefined
}
never
表示没有返回值
function fn2(): never {
throw new Error('报错了')
}
object
{} 用来指定对象中可以包含哪些属性
- 语法
- {属性名:属性值} 表示必须要有的属性
- 属性名?:属性值 表示可选属性
- [propName: string]: any 表示属性名为字符串类型，属性值为任意类型
let b: { name: string, age?: number }
b = { name: '孙悟空', age: 18 }
b = { name: '孙悟空' }
let c: { name: string, [propName: string]: any }
c = { name: '猪八戒', a: 1, b: 2 }
function
设置函数结构的类型声明
let d: (a: number, b: number) => number
d = function (n1, n2): number {
return n1 + n2
}
array
let e: string[]
e = ['a', 'r', 'fdsf']
let g: Array<number>
g = [23, 43, 123]
tuple
元组就是固定长度的数组
由于长度固定，变化数量少，存储效率比数组高
let h: [string, number]
h = ['h', 123]
enum
enum Gender {
Male,
Female
}
let i: { name: string, gender: Gender }
i = {
name: '孙悟空',
gender: Gender.Male // 'male'
}
console.log(i.gender === Gender.Female)
& 表示同时
- 语法：
let j: { name: string } & { age: number }
j = { name: ‘孙悟空’, age: 18 }
类型的别名
- 语法：
type myType = 1 | 2 | 3 | 4
let k: myType
let l: myType
