安装
npm i typescript -g
测试安装是否成功
tsc -v
新建文件夹&新建文件
tsc -w test.ts
监控ts文件变化，自动生成test.js文件
打开第二个terminal终端
node test.js
可调试test.ts文件的内容
1）类型排序
上层类型包含下层类型
1、顶级类型：any unknown
2、Object， 包含所有类型，可以指代任何类型，类似any
3、Number String Boolean
4、number string boolean
5、1 'asd' true
6、never
注意：
- unknown只能赋值给unknown或者any
- unknown不能读任何属性，方法也不可以调用
- unknonw比 any 更安全
2） Object/object/{}的区别
Object， 包含所有类型，可以指代任何类型，类似any
let a:Object = {a:1123123, open:()=>123} // 正确
let a1:Object = [1,2,3] // 正确
let a2:Object = 1 // 正确
let a3:Object = 'asdasd' // 正确
let a4:Object = () => 123 // 正确
object，只支持引用用类型，不支持原始类型，常用于泛型约束
let a:object = {a:1123123, open:()=>123} // 正确
let a1:object = [1,2,3] // 正确
let a4:object = () => 123 // 正确
let a2:object = 1 // 错误
let a3:object = 'asdasd' // 错误
let a5:object = false // 错误
{}，可以理解为Object，可以包含所有类型，指代任何类型，但是无法对变量做任何赋值了。少用！
let a:Object = {a:1123123, open:()=>123} // 正确
a.age = 123 // 错误
let a1:Object = [1,2,3] // 正确
let a2:Object = 1 // 正确
let a3:Object = 'asdasd' // 正确
let a4:Object = () => 123 // 正确
3） 数组类型
2种方式：
1、直接用类型
2、用泛型
3、类型断言
二维数组定义:
数组内容是大杂烩：
解构参数，不知道有多少个参数就用这个方法，会自动把参数组成列表：
4） 函数类型
5） 内置对象
// 定义类型就用类名就行
let number1: Number = Number(2)
let string1: String = String('asd')
// console.log(number1)
// console.log(string1)
// HTML(元素名称)Element HTMLElement Element
let div: HTMLDivElement = document.querySelector('div')
let div2: Element = document.querySelector('div')
let footer: HTMLElement = document.querySelector('footer')
let footer2: Element = document.querySelector('footer')
let footer3: NodeList = document.querySelectorAll('footer')
let footer4: NodeListOf = document.querySelectorAll('div')
let local: Storage = localStorage
let lo: Location = location
let cookie: string = document.cookie
const pro: Promise = new Promise((resolve) => resolve(1))
pro.then(result => {
console.log(result) // return 1 })
6）元组类型
const arr:readonly [x:number,y:string,z?:boolean] = [1, 'a', false]
arr[0]=1 // 只读变量不可修改
const arr1:[x:number,y:string,z?:boolean] = [1, 'a'] //z是可选，所以可以不填
arr1[0]=1 // 可以修改
7）枚举类型
// 不赋值默认从0开始赋值
enum color {
red,
blue,
green
}
// 增长枚举：给第一个赋值后，后续值自动在此基础上加1
enum color1 {
red = 1,
blue,
green
}
// 字符串枚举
enum color2 {
red = 'a',
blue = 'b',
green = 'c'
}
// 异构枚举
enum color3 {
red,
blue = 'b',
green = 'c',
black = 1,
}
// 接口枚举
interface A {
color: color3.red
}
let obj: A = {
color: color3.red, // 或者直接赋值0也可以
}
// const枚举
const enum example {
red,
blue
}
let code: number = 0
if (code === example.red) {
console.log('此时ts翻译为js的时候，是直接用数字进行对比的代码，而不是用对象进行对比，可以减少开销')
}
// 反向映射,仅支持值为数字的，不支持字符串
enum response {
success,
fail
}
let success_code: number = response.success
let success_key: string = response[success_code]
// 通过值反向获得其key
console.log(`key---${success_key}, code---${success_code}`)
8）类型别名
// 给string起一个类型别名s，相当于简写
type s = string type union = s | number[]
// 联合类型
type func = (name: s) => void
type obj = { name: s, age: number }
let test: s = 'example'
let test1: union = 'asd'
let test2: union = [1]
let test3: obj = {
name: 'asd',
age: 12 }
// extends 被包含的意思
// 左边值的类型是右边的子类型
type num = 1 extends Number ? 1 : 0 // 其实就定义了一个整数1类型
9）never类型
// never永远不可能到达的类型
type gift = 'sing' | 'dance' | 'rap'
const func = (value: gift) => {
switch (value) {
case 'sing':
break
case 'dance':
break
case 'rap':
break
default:
const error: never = value;
console.log('you must input error')
break
}
}
10）symbol类型
1、标识唯一值
2、解决同名变量的覆盖问题
// symbol
let a1: symbol = Symbol('1'); // 唯一值，a1!=a2
let a2: symbol = Symbol('1'); // 唯一值，a1!=a2
print(Symbol.for('asd')); // 从全局寻找asd，有就直接用，没有就新建
11）map类型
const m = new Map();
// o是一个对象
const o = {p: 'Hello world!'};
// 添加成员：对象o是m的一个键，值为'content'
m.set(o, 'content'); // "content"
// get方法读取这个键
m.get(o); // true
m.has(o); // true
// delete方法删除这个键
m.delete(o); // true
m.has(o); // false
m.clear()
12）set类型
13）泛型，又称动态类型
function test<T>(a:T, b:T):T[] {
return [a, b]
}
test(1,2)
test('a','b')
可以自动识别类型，将T变为number或者string
应用场景：http-api接口
14）keyof 泛型约束
// extends 配合keyof 约束对象的key范围
高级用法
15）联合类型
16）交差类型
17）声明文件d.ts
使用关键字 declare来声明
