环境搭建
npm init -y
yarn add typescript -D
tsc --init
优势
- 编译时静态类型检测
- 自动提示更清晰明确
- 引入了泛型和一系列的ts特有类型
- 强大的d.ts文件
- 轻松编译成js文件
- 灵活性高
类型注解
let data:number
类型推导
let number = 30
常用的24种ts类型
基本类型
number, string, boolean, symbol, null, undefined
根类型
Object：除了null 和 undefined不能赋值其他都可以
{}: Object的简写方式
对象类型
Array, object, function
枚举
enum：即是数据类型，也是变量
为什么要用枚举？方法参数不能定义为具体类型，只能初级使用number string基本类型替代，降低了代码的可读性和可维护性
enum EnumTest {One = 1Two
}
//底层 数字枚举 双向映射
EnumTest[EnumTest["One"] = 1] = "One"
EnumTest[EnumTest["Two"] = 2] = "Two"enum EnumTest2 {One="one"Two = "two"
}
// 底层
EnumTest2["One"] = "one"
EnumTest2["Two"] = "two"
好处：
- 有默认值和可以自增值，节省编码时间
- 语义更清晰可读性更强
- 因为枚举是一种值类型的数据类型方法参数可以明确参数类型为枚举类型
其他特殊类型
- any
- unknown
- never:使用never 避免出现未来扩展新的类没有对应类型的实现且就是写出类型绝对安全的代码
- void
- 元组（tuple）
- 可变元组
合成类型
联合类型
let str: string|number = 'abc'
交叉类型
type Obj1 = {username: string}
type Obj2 = {age: number}
let obj1:Obj1 = {username: 'abc'}
let obj2:Obj2= {age: 23}let obj3: Obj1 & Obj2 = {username: 'a', age: 18}let string2: string & number = 3 // never 不存在 x
字面量数据类型
type Num = 1 | 2| 3
const n: Num = 1
any,unknown 的两点区别和应用场景
相同点
any和unknown可以是任何类的父类(等号左边)，所以任何类型的变量都可以赋值给any类型或者unknown类型的变量
不同点
- any也可以是任何类的子类（等号右边），但unknown不可以，所以any类型的变量可以赋值给其他类型的变量
- 不能拿unknown类型变量来获取任何属性和方法，但any类型的变量可以获取任意名称的属性和任意名称的方法
// 任何类型的父类
let num: string = 'a'
let data:any = num// 任何类型的子类
let data:any=[1,2]
let num:number = data
接口和应用场景
另一种定义对象类型的类型
应用场景：
- 一些第三方包或者框架底层源码中有大量的接口类型
- 提供方法的对象类型的参数时使用
- 为多个同类别的类提供统一的方法和属性声明
如何定义接口
接口继承
新的接口只是在原来接口继承之上增加了一些属性或方法，这时就用接口继承
可索引签名
interface Product {name: stringprice: numberaccount: number[x: string]: any // 可索引签名
}
// 可索引签名一定要兼容所有属性的类型 一般可以用any
接口重名合并
interface Product{name: string
}
interface Product{price: number
}
// 相当于
interface Product{name: stringprice: number
}
索引访问签名
interface Product{name: string
}
type A = Product["name"] // string
哪些类型可以接受undefined的值
any、unknown、undefined
哪些类型可以接受null的值
any、unknown、null
函数类型
type TypInfoFun = (s: string, age: number) => number
rest参数
type TypInfoFun = (s: string, age: number, ...rest:any) => number
