vscode 原生支持ts编译
在vscode 里 上部，终端下的运行任务中，有选择 typescript ，可以选择构建或者监听。
构建：是指一次 打包
监听：是每一次保存之后都会自动打包

在package.json中 表示可以通过指令完成

“scripts”: {
“build”:”tsc”,
“watch”:”tsc —watch”
}

问题

当你新建了一个 变量时 ，提示无法重新声明块范围变量“name”。
说明你申明的是全局变量，就需要 export对象 ，改变他的作用域。
同理可得，一个代码中，如果有export，import之类的代码，那么这个文件就会变成一个模块

  1. export {};
  2. let name:number = 123;

类型声明：
基本数据类型和原来一样；
数组有两种申明方式；
//元组的概念，元组类似于数组，它是一个长度和类型都固定的数组
//1.长度固定 2.类型可以不一样

  1. //在同一个作用域内部，相同的变量名 只能申明一次
  2. let name:number = 123;
  3. let b:string = "skjas";
  4. let c:string = "c";
  5. let nums:number[] = [1,2,3];
  6. let nums1:Array<Number> = [1,2,3];
  7. //元组的概念，元组类似于数组，它是一个长度和类型都固定的数组
  8. let point:[number,number] = [1,2];
  9. let person:[string,number] = ['1',2];
  11. //枚举类型，key的值是一个关联关系，可以指定任何value值，如果不指定，默认会给下标
  12. enum Gender {
  13.     BOY = 1,
  14.     GIRL = 2
  15. }
  17. //const 是常数枚举 ，会被编译成常量 ，不可更改
  18. const enum Color {
  19.         Red,
  20.         Yellow
  21. }
  22. console.log(Color.Red,Color.Yellow)
  24. //任意类型 any
  25. //引入了第三方库，没有进行类型定义， 类型转换的时候 ，数据结构太灵活的时候 用any
  26. //当使用 any 时 ，就是默认数据类型了 
  27. let root: any = document.getElementById('root');
  29. //ts为所有的dom类型提供了一整套的类型申明
  30. let root: HTMLElement | null = document.getElementById('root');
  31. //断言  
  32. //对象的! 表示开发者自己定义的 一定会保证存在的值 （断言不为空）
  33. //对象的? 表示如果有就赋值
  34. root!.style.color = 'red';
  36. // null空  undefined未定义
  37. //他们都是其他类型的子类型 你可以把它们赋值给其它类型的变量
  38. let myname: string|null = null;
  39. let myname1: string = undefined;
  41. //void类型 空的 （没有的意思）
  42. //void可以返回 null 和undefined
  43. function greeting(name: string): void {
  44.     return null;
  45.     //也可以不返回
  46. }
  47. //never 永远不
  48. //never 是其他类型的子类型，代表永远不会出现的值
  49. //在函数内部永远会抛出错误，导致函数无法正常结束
  50. function createError(message:string):never{
  51.     console.log(1)
  52.     throw new Error('error');
  53.     console.log('end point')
  54. }
  55. function sum():never{
  56.     while(true){
  57.         console.log('123')
  58.     }
  59.     console.log('end point')
  60. }

never使用场景

1.启动一个后天任务，后台任务本身是监听，就是一个死循环，时间环函数，计划任务
2.写一些单元测试 的时候，就是让当前函数报出错误，看会不会影响别的函数

| ， || 和 & ，&&的区别

| 是运算符中的 ，比如 let a = 3 | 5; a就等于 7 这个是二进制 加减
||就是 短路运算符，let a=3 || 5; a=3，
&也是运算中的，3&5 = 1
&& 短路运算符中的 let a=3 || 5; a=5，

ts类型推论

ts会根据你赋值的类型，推测出变量的类型，如果你申明的时候没有赋值，那么就会使 any

包装对象 java装箱和拆箱

//自动在基本类型的对象类型之间切换
1.基本类型上没有方法
2.在内部迅速完成一个装箱的操作，把基本类型迅速包装成对象类型，然后用对象来调用方法

  1. let name4:string ='asd';
  2. name4.toLocaleLowerCase(); //在运行到这里的时候，会自动把原来的string，变成包装对象。
  3. //然后就会可以使用 包装对象的方法

联合类型

就是可以同时申明两个类型 ：let a : number | string

断言

不可以断言成没有申明的类型变量

  1. ：let a : number | string 
  2. (a as string).toLocaleLowerCase();//断言 它是一个string ，然后就可以调用string的方法了
  3. (a as number).toFixed()它是一个number就可以调用number的方法

字面量类型

字面量类型 有点像枚举 ，申明后的值，赋值只可以是申明的这两个了
let Data: ‘Boy’ |’GIRL’;
Data=’Boy’;
Data=’GIRL’;

字面量类型和联合类型的比较

1.字符串字面量类型用来约束取值只能是某几个字符串中的一个，联合类型表示取值可以是多种类型中的一个
2.字符串字面量限定了使用过该字面量的地方，仅能接受特定的值，联合类型对于值没有限定，仅仅限定值的类型需要保持一致

函数

函数的定义
1.可以指定参数的类型和返回值的类型

  1. //函数定义
  2. function hello(name: string): void {
  3.     console.log(name)
  4.     return null;
  5. }
  6. //type用来定义一个类型 或者类型别名
  7. type GetUserNameType = (firstname: string, lastname: string) => string;
  9. //函数表达式
  10. let getUserName: GetUserNameType = (firstname: string, lastname: string): string => {
  11.     return firstname + lastname;
  12. }
  14. //可选参数
  15. //? 代表的是可传可不传，没写问号的，就表示必须要传，调用的时候要么都传，要么都不传
  16. function print(name: string, age?: number, home?: string) {
  18. }
  20. //默认参数
  21. function ajax(url: string, method: string = 'GET') {
  22.     console.log(method)
  23. }
  25. //剩余参数
  26. function sum(...number: Array<number>) {
  27.     return number.reduce((accu, item) => accu + item, 0)
  28. }
  30. //函数重载
  31. //跟java一样接受参数类型不同表示重载
  32. //写了重载方法后，在调用的时候，传入别的类型就会报错
  33. //重载和函数之间不能有别的空格或者代码
  34. let obj:any={};
  35. function attr(val:string):void;
  36. function attr(val:number):void;
  37. function attr(val:any):void{
  38. }

类

  1. //如何定义类
  2. class Person {
  3.     name: string = 'aa';
  4.     age: number;
  5.     constructor() {
  6.         this.age = 10;
  7.     }
  8. }
  9. let p1 = new Person();
  10. console.log(p1.name);
  11. console.log(p1.age);
  13. //存取器 getter setter
  14. namespace a {
  15.     class Person {
  16.         myName: string;
  17.         constructor(name: string) {
  18.             this.myName = name;
  19.         }
  20.         get name() {
  21.             return this.myName;
  22.         }
  23.         set name(newValue: string) {
  24.             this.myName = newValue.toLocaleUpperCase();
  25.         }
  26.     }
  28.     let p = new Person('ass');
  29.     console.log(p.name);
  30.     p.name = 'jiagou';
  31.     console.log(p.name);
  32. }
  35. //参数类型
  36. //public关键字指的是 ，把public申明的变量变成公开的，实例属性
  37. //相当于直接申明了 name:string ;
  38. namespace c {
  39.     class Person {
  40.         constructor(public name: string) {
  41.         }
  42.     }
  43.     let p = new Person('ass');
  44. }
  46. //readonly
  47. //只能查看不能修改
  48. namespace b {
  49.     class Person {
  50.         constructor(public readonly name: string) {
  51.         }
  53.     }
  54.     let p = new Person('ass');
  55. }
  57. //继承 ts跟设计模式相关
  58. /**
  59.  *  子类继承父类后，子类的实例上，就拥有了父类中的属性和方法
  60.  *  访问修饰符 public公开的 protected 受保护的 private私有的
  61.  *  public 自己 自己的子类和其他类都可以访问
  62.  *  protected 受保护的 自己和自己的子类可以访问，其他类不能访问
  63.  *  private 私有的只能自己访问，自己的子类不可以访问，其他类更不可以了
  64.  */
  66.  /**
  67.   * static 静态属性 就是说不需要实例的属性，可以直接通过类名进行调用 
  68.   * 静态方法 同理
  69.   * static申明的变量在 实例上， 平时申明的变量在原型(prototype)上
  70.   */
  71. namespace d {
  72.     class Person {
  73.         public name: string;
  74.         protected age: number;
  76.         constructor(name: string, age: number) {
  77.             this.name = name;
  78.             this.age = age;
  79.         }
  80.         getName() {
  81.             return this.name;
  82.         }
  83.         setName(newString: string) {
  84.             this.name = newString
  85.         }
  86.     }
  87.     class Student extends Person {
  88.         stuNo: number;
  89.         constructor(name: string, age: number, stuNo: number) {
  90.             super(name, age);
  91.             this.stuNo = stuNo;
  92.         }
  93.     }
  94.     let stu = new Student("qwe", 123, 1);
  96. }

类装饰器

1.装饰器是一种特殊类型的申明，他能附加在类的申明、方法、属性或者参数上，可以修改类的行为
2.常见的装饰器有类装饰器，属性装饰器，方式装饰器和参数装饰器
3.装饰器的写法分为普通装饰器和装饰器工厂

  1. namespace a {
  2.     // 接口
  3.     interface Person {
  4.         xx: string;
  5.         yy: string;
  6.     }
  7.     //装饰器 接收参数 是类对象
  8.     function enhancer(target: any) {
  9.         target.prototype.name = "Person";
  10.     }
  11.     //装饰器放在class 类上
  12.     @enhancer
  13.     class Person {
  14.         constructor() {
  15.         }
  16.     }
  17.     let p = new Person();
  18. }
  20. //把类整个替换
  21. namespace b {
  23.     //装饰器 接收参数 是类对象
  24.     function enhancer() {
  25.         return function (target: any) {
  26.             return class extends Person {
  27.                 constructor(name: string, age: number) {
  28.                     super(name, age);
  29.                 }
  30.                 //返回的加强类
  31.                 getAge(){
  32.                     console.log(this.age);
  33.                 }
  34.             }
  35.         }
  36.     }
  37.     //装饰器放在class 类上 ,
  38.     //这里的装饰器就变成了一个函数，去增强原来的类
  39.     //注意 输出的 类要和原来的父类接收的类型一致
  41.     @enhancer()
  42.     class Person {
  43.         name: string = 'persion';
  44.         age:number = 10;
  45.         constructor(name:string,age:number) {this.name=name;this.age=age }
  46.     }
  47.     let p = new Person('persion',10);
  48.     console.log(p.age)
  49. }

属性装饰器

属性装饰器表达式会在运行时当作函数调用，传入下列参数
属性装饰器用来装饰属性
1.第一个参数对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2.第二个参数是属性的名称

  1. //属性装饰器 装饰属性
  2. namespace c {
  3.     //target如果装饰的是一个普通属性，target 指向类的原型 prototype
  4.     //target装饰一个类属性static ，那么target指向类的定义
  5.     //propertyName属性名
  6.     function upperCase(target: any, propertyName: string) {
  7.         let value = target[propertyName];
  8.         const getter = () => value;
  9.         const setter = (newVal: string) => {
  10.             value = newVal.toUpperCase();
  11.         }
  12.         delete target[propertyName];
  13.         Object.defineProperty(target, propertyName, {
  14.             get: getter,
  15.             set: setter,
  16.             enumerable: true,
  17.             configurable: true
  18.         })
  19.     }
  20.     //属性装饰器工厂
  21.     function propertyEnumerable(flag: boolean) {
  22.         return function (target: any, propertyName: string) {
  24.         }
  25.     }
  27.     //方法装饰器工厂，就是返回一个装饰器
  28.     function mehtodEnumerable(flag: boolean) {
  29.         /**
  30.          * @target 指向实例或者原型
  31.          * @methodName 方法的名称
  32.          * @propertyDescriptor 属性描述器的值
  33.          */
  34.         return function (target: any, methodName: string, propertyDescriptor: PropertyDescriptor) {
  35.             propertyDescriptor.enumerable = flag;
  36.         }
  37.     }
  38.     //方法装饰器工厂，就是返回一个装饰器
  39.     function setAge(age: number) {
  40.         return function (target: any, methodName: string,) {
  41.             target.age = age;
  42.         }
  43.     }
  44.     function toNumber (target: any, methodName: string, propertyDescriptor: PropertyDescriptor){
  45.         //取出老方法的值
  46.         let  oldMethod  = propertyDescriptor.value;
  47.         //老方法的值再去 转变格式
  48.          propertyDescriptor.value= function(...args:any[]){
  49.             //转变格式
  50.              args=args.map(item=>parseFloat(item));
  51.              //转变完成，调用 原来的方法
  52.              return oldMethod.apply(this,args);
  53.         }
  54.     }
  56.     class Person {
  57.         static age: number;
  58.         @upperCase
  59.         name: string = "aa";
  60.         age: number = 10;
  62.         @mehtodEnumerable(true)
  63.         getName() {
  64.             console.log(1)
  65.         }
  66.         @setAge(100)
  67.         static getAge() {
  68.         }
  69.         @toNumber
  70.         sum(...args: any[]) {
  71.             return args.reduce((accu, item) => accu + item, 0);
  72.         }
  73.     }
  74.     let p = new Person();
  75.     p.name = '架构';
  76.     p.sum([1, '2', '3']) ////属性装饰器 装饰属性
  77.     namespace c {
  78.         //target如果装饰的是一个普通属性，target 指向类的原型 prototype
  79.         //target装饰一个类属性static ，那么target指向类的定义
  80.         //propertyName属性名
  81.         function upperCase(target: any, propertyName: string) {
  82.             let value = target[propertyName];
  83.             const getter = () => value;
  84.             const setter = (newVal: string) => {
  85.                 value = newVal.toUpperCase();
  86.             }
  87.             delete target[propertyName];
  88.             Object.defineProperty(target, propertyName, {
  89.                 get: getter,
  90.                 set: setter,
  91.                 enumerable: true,
  92.                 configurable: true
  93.             })
  94.         }
  95.         //属性装饰器工厂
  96.         function propertyEnumerable(flag: boolean) {
  97.             return function (target: any, propertyName: string) {
  99.             }
  100.         }
  102.         //方法装饰器工厂，就是返回一个装饰器
  103.         function mehtodEnumerable(flag: boolean) {
  104.             /**
  105.              * @target 指向实例或者原型
  106.              * @methodName 方法的名称
  107.              * @propertyDescriptor 属性描述器的值
  108.              */
  109.             return function (target: any, methodName: string, propertyDescriptor: PropertyDescriptor) {
  110.                 propertyDescriptor.enumerable = flag;
  111.             }
  112.         }
  113.         //方法装饰器工厂，就是返回一个装饰器
  114.         function setAge(age: number) {
  115.             return function (target: any, methodName: string,) {
  116.                 target.age = age;
  117.             }
  118.         }
  119.         function toNumber (target: any, methodName: string, propertyDescriptor: PropertyDescriptor){
  120.             //取出老方法的值
  121.             let  oldMethod  = propertyDescriptor.value;
  122.             //老方法的值再去 转变格式
  123.              propertyDescriptor.value= function(...args:any[]){
  124.                 //转变格式
  125.                  args=args.map(item=>parseFloat(item));
  126.                  //转变完成，调用 原来的方法
  127.                  return oldMethod.apply(this,args);
  128.             }
  129.         }
  131.         class Person {
  132.             static age: number;
  133.             @upperCase
  134.             name: string = "aa";
  135.             age: number = 10;
  137.             @mehtodEnumerable(true)
  138.             getName() {
  139.                 console.log(1)
  140.             }
  141.             @setAge(100)
  142.             static getAge() {
  143.             }
  144.             @toNumber
  145.             sum(...args: any[]) {
  146.                 return args.reduce((accu, item) => accu + item, 0);
  147.             }
  148.         }
  149.         let p = new Person();
  150.         p.name = '架构';
  151.         p.sum([1, '2', '3']) //这里原来调用输入 123 ，但是重新改了以后就输出6
  152.     }
  153. }

参数装饰器

  1. //参数装饰器
  2. namespace d {
  3.     //参数装饰 方法参数
  4.     interface Person {
  5.         age: number
  6.     }
  7.     //第一个参数 实例，第二个参数方法名，第三个参数，参数的索引
  8.     function addAge(target: any, methodName: string, paramsIndex: number) {
  9.         target.age = 10;
  10.     }
  11.     class Person {
  12.         login(username: string, @addAge password: string) {
  13.             console.log(this.age, username, password)
  14.         }
  15.     }
  16.     let p = new Person();
  17.     p.login('asd', "123")
  18. }

装饰器执行顺序

image.png
也就是 属性=》方法参数=》方法=》类
注意 ：1.属性和方法 谁写在前面 谁就会先执行 ，最后才会是 类
2.同类型的，先执行后写的，然后依次向外

npm 配置源

装包的时候发现问题
1.当使用cnpm 和yarn 的装包时候，明明配置了源 。却访问到了npm 的源 ，然后报出 404的错误，
2.配置源地址的代码

  1. 一.通过命令配置
  2. 1. 命令
  4. npm config set registry https://registry.npm.taobao.org
  5. 2. 验证命令
  7. npm config get registry
  8. 如果返回https://registry.npm.taobao.org，说明镜像配置成功。
  12. 二、cnpm安装
  13. 1. 安装cnpm
  15. npm install -g cnpm --registry=https://registry.npm.taobao.org
  16. 2. 使用cnpm
  18. cnpm install xxx