TypeScript 相关

1. 安装

sudo npm i -g typescript

1. 初始化 typescript

   • tsc --init
   • 会生成 tsconfig.json 文件.

2. 监听 typescript 文件,并自动编译

   • 在终端输入指令 tsc 编译识别 typescript 文件,生成 js 文件.
   • tsc -w 监听 ts 文件,并自动编译转换为 js 文件

相关参考文档@后盾人

2. tsc 提示报错 无法重新声明块范围变量

出现原因:js 文件和 ts 文件声明的变量都是全局变量,所以会造成冲突
解决办法: 在当前文件夹下使用tsc --init命令,生成一个tsconfig.json文件
解决办法 2: 在设置中搜索 validate,选择 typescript ,取消勾选 typescript验证选项

3. tsc 数组的类型推断

// 数组中`只可以`存入 string 类型的变量
const stringArr = ['string']
const stringArr: string[] = ['string']
// 数组中`只可以`存入 number 类型的变量
const numArr = [123]
const numArr: number[] = [123]

// 直接赋值,编辑器会隐式的给 arr 进行一次类型推断
const arr = ['houdunre.com', 123, true]
// 上面的写法相当于下面的写法
const arr: (string | number | boolean)[] = ['houdunre.com', 123, true]

4. tsc 对象的类型推断

注意:

• 1. 编辑器会隐式的将对象中的属性进行隐形的转换
• 2. 如果向对象中添加类型中不存在的属性将报错

// 设置 对象中属性的类型推断
let obj: {
    
    
  name: string
  age: number
  url?: string
}
obj = {
    
     name: 'coco', age: 18 }

const user = {
    
    name:'后盾人',age:18,open:true}
// 推断结果
const user: {
    
    
    name: string;
    age: number;
    open: boolean;
}

// 如果向对象中添加类型中不存在的属性将报错
const user = {
    
    name:'后盾人',age:18,open:true}
user.city = '北京'
//将产生错误 Property 'city' does not exist on type

复杂类型推断:
const obj = {
    
    
  name: 'houdunren',
  age: 18,
  open: true,
  lesson: [{
    
     title: 'tsc' }, {
    
     price: 123 }],
}

// 推断结果
const obj: {
    
    
    name: string;
    age: number;
    open: boolean;
    lesson: ({
    
    
        title: string;
        price?: undefined;
    } | {
    
    
        price: number;
        title?: undefined;
    })[];
}

5. tsc 使用 tsconfig.json 配置文件运行 ts

1. 使用 tsc --init 命令生成 tsconfig.json 文件.
2. 在编辑器中最上面,点击终端 > 选择 运行任务 > 选择 typescript > 选择 监视
   • 或者在终端运行 tsc -w来监视 ts 文件.
3. 配置完以后,每创建一个 ts 文件,编辑器都会自动生成 js 文件

6. tsc as断言

断言可以将一个 unknown类型的数据,断言为 任意类型的数据

let string:unknown = '123'
let num:number = string as number
console.log(num);

7. tsc void 和 never类型

1. :void 类型推断,用于声明 undefined 和 null数据类型
2. :never 类型推断,表示函数什么都不返回

let hd: void = undefined
let hd: void = null

// 不确定函数有什么返回值的时候,可以使用 :void 来进行类型推断.
function coco(): void {
    
    }
// 当函数没有返回值的时候,使用 :never 来进行类型推断
function jack(): never {
    
    
  throw new Error('没有返回值')
}

8. tsc 函数的结构定义

// 普通定义
let hd: Function
hd = () => {
    
    }

// 结构定义
let hd: (a: number, b: number) => number
hd = (x, y) => {
    
    
  return x + y
}

hd(2, 3)

使用 type 对函数的参数进行声明

type userType {
    
    
    name:string,
    age:number,
    open:boolean
}

function fn(userObj:userType):void{
    
    

}

9. tsc 元组

元组与数组类似，但元组要为每个值进行类型声明。
数组只是定义了值的类型，并没有约束某个位置的值必须是什么类型，请看下例

const arr: (number | string | boolean)[] = ['后盾人', 2030, true]

arr[1] = 'houdunren.com' //不会报错，可以将原来是数值的更改为字符串，这是数组允许的类型范围
arr[10] = '向军老师' //不会报错，类型也是允许的
console.log(arr)

使用元组来限制值的类型:

const hd: [string, number] = ['后盾人', 2030]
hd[0] = true //报错，第一个值必须是字符串

11. tsc 枚举

enum SexType {
    
    
    BOY, GIRL
}

const hd = {
    
    
    name: '后盾人',
    sex: SexType.GIRL
}
console.log(hd); //{ name: '后盾人', sex: 1 }

12. tsc as断言

as 可以将一种数据类型 断言为另一种数据类型

function hd(arg: number) {
    
    
  return arg ? 'houdunren' : 2030
}

let f = hd(1) //let f: string | number

// 使用断言 断定 hd()函数的返回值 就是string 类型
function hd(arg: number) {
    
    
  return arg ? 'houdunren' : 2030
}

let f = hd(1) as string //let f: string

13. tsc const 断言

给某个变量使用 const 断言,就相当于给该属性添加了一个值类型.

• 字符串、布尔类型转换为具体值
• 对象转换为只读属性
• 数组转换成为只读元组

// 使用 const 断言相当于给 user 变量添加了一个 '后盾人'的值类型,给赋值其他值都会报错
let user = '后盾人' as const
user = 'houdunren.com'

//与以下很相似
let user: 'houdunren' = 'houdunren'
user = 'houdunren'

// 给对象使用  const 断言
let user = {
    
     name: '后盾人' } as const
user.name = 'houdunren' //因为是只读属性，所以不允许设置值

// 给数组使用 const 断言
let a = 'houdunren.com'
let b = 2030

let f = [a, b, 'houdurnen.com', true, 100] as const //readonly [string, number, "sina.com", true, 100]
let hd = f[0]
hd = '向军'

14. tsc dom类型声明

const el = document.querySelector('.hd') //const el: Element | null
const div :HTMLDivElement = document.querySelector('.hd') as HTMLDivElement

null 处理

针对于其他标签元素，返回值可能为 null，所以使用 as 断言或！处理

let div = document.querySelector('div') as HTMLDivElement//const div: HTMLDivElement
//或使用
div = document.querySelector('div')! //非空断言
console.log(div.id);

15. interface 接口定义

接口用于描述类和对象的结构，使项目中不同文件使用的对象保持统一的规范

interface UserInterface {
    
    
    name: string;
    age: number;
    isLock: boolean;
    info(other:string): string,
}

const hd: UserInterface = {
    
    
    name: '后盾人',
    age: 18,
    isLock: false,
    info(o:string) {
    
    
        return `${
      
      this.name}已经${
      
      this.age}岁了,${
      
      o}`
    },
}

console.log(hd.info());

16. Generics 泛型

泛型指使用时才定义类型，即类型可以像参数一样定义，主要解决类、接口、函数的复用性，让它们可以处理多种类型

1. function dump(arg: any) {
    
    
    return arg;
}

let hd = dump('后盾人') //类型为 any
let xj = dump(true) //类型为 any

2. 使用泛型后，dump() 函数返回值的类型

function dump<T>(arg: T): T {
    
    
    return arg;
}
let hd = dump<string>('后盾人')

17. 装饰器环境配置

在 .ts 单文件联系中，需要通过 tsc --init 指令，生成 tscconfig.json 文件。然后搜索 decorator 关键字，解除搜索到的两个相关注释，即可在 .ts 文件中使用 装饰器功能。

“experimentalDecorators”: true,

“emitDecoratorMetadata”: true,

18. 定义一个 class 装饰器

const MoveDecorator: ClassDecorator = (target: Function) => {
    
    
  target.prototype.getPosition = (): {
    
     x: number; y: number } => {
    
    
    return {
    
     x: 100, y: 200 };
  };
  console.log(target); //[class Tank]  [class Player]
};

@MoveDecorator
class Tank {
    
    
  public getPosition() {
    
    }
}

const t = new Tank();
console.log(t.getPosition());
@MoveDecorator
class Player {
    
    
  public getPosition() {
    
    }
}
const p = new Player();
console.log(p.getPosition());

19. 定义一个 methodDecorator方法装饰器

const showDecorator:MethodDecorator =(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor)=>{
    
    
    descriptor.value=()=>{
    
    
        console.log('后盾人')
    }
}

class show {
    
    
    @showDecorator
    public show(){
    
    
        console.log('houdunren.com')
    }
}

new show().show()

20. 自定义 console.log

第一个参数：在 log 的内容前加上 %c

第二个参数：编写 log 自定义内容的样式

console.log(`%choudunren.com`, "color:tomato;font-size:36px;");