debug typescript 参数 typescript config

转载

编程之翼 2023-07-21 14:26:02

文章标签 debug typescript 参数 typescript html jquery 命名空间 文章分类 TypeScript 前端开发

一、TypeScript中的配置文件

①生成tsconfig.json文件

npm install typescript -g

tsc init

②tsconfig.json文件的作用是typescript对应的编译配置文件

③运行tsc demo.ts会编译成demo.js文件

④只有单独输入tsc命令，后面不跟任何参数时，才会执行tsconfig里面的配置

ts-node demo.ts也会执行tsconfig里面的配置项

⑤compilerOptions前（或后）添加include指定想要编译的文件

"include": ["./demo.ts"]

同"files":["./demo.ts"]

也可以写exclude指定编译所有内容所要排除不编译的文件

"exclude": ["./demo.ts"]

⑥compilerOptions是编译属性配置项

"removeComments": true,   //移除注释

   "noImpliciAny": true,    //不明确的指定any类型不行

   "stictNummChecks": true,    //强制检测Null类型，将null赋值给基础类型会报错

   "rootDir": "./src",    //指定输入文件的地址

   "outDir": "./build",  //指定编译后生成文件的地址

   "incremental": true,  //增量编译，以前编译过的内容不会再编译，只编译新增的文件

   "allowJs": true,    //是否对js文件也进行编译，把ES6语法编译为ES5语法文件

   "checkJs": true,   //允许对js文件像ts文件一样进行语法检测

二、联合类型和类型保护

interface Bird {
  fly: boolean;
  sing: () => {};
}

interface Dog {
  fly:boolean;
  bark: () => {};
}

//联合类型 - 属性只会取共有的属性
function trainAnimal(animal: Bird | Dog ) {
   //1.类型断言 — 类型保护，规避typescript的潜在错误提示
   if(animal.fly) {
      (animal as Bird).sing();
   }else{
      (animal as Dog).bark()
   }
   
}

function trainAnimalSecond(animal: Bird | Dog) {
  //2.in语法 - 类型保护
  if('sing' in animal) {
    animal.sing();
  }else{
    animal.bark();
  }
}

function add(first: string | number, second: string | number) {
  //3.typeof 语法 - 类型保护 
  if(typeof first === 'string' || typeof second === 'string'){
     return `${first}${second}`;
   }
   return first + second;
}

//只要class 才能被instanceof操作符使用，interface不能
class NumberObj {
  count: number
}

function addSecond(first: object | NumberObj, second: object | NumberObj){
  //4.instanceof 语法 - 类型保护
  if(first instanceof NumberObj && second instanceof NumberObj){
    return first.count + second.count
  }
  return 0;
}

三、Enum枚举类型　

①初始化项目，生成package.json

npm init -y

②安装ts-node依赖

npm install ts-node -D

③package.json中添加命令

"dev": "ts-node ./demo.ts"

④安装typescript

npm install typescript --save

⑤Enum枚举类型应用

enum Status {
  OFFLINE,
  ONLINE,
  DELETED
}

// const Status = {
//   OFFLINE: 0,
//   ONLINE: 1,
//   DELETED: 2
// }

function getResult(status) {
  if(status === Status.OFFLINE) {
    return 'offline';
  }else if(status === Status.ONLINE){
    return 'online';
  }else if(status === Status.DELETED){
    return 'deleted';
  }
  return 'error'
}

const result = getResult(Status.OFFLINE);
console.log(result);  //offline

debug typescript 参数 typescript config_html

debug typescript 参数 typescript config_jquery_02

debug typescript 参数 typescript config_jquery_03

debug typescript 参数 typescript config_html_04

四、函数泛型

//泛型 generic 泛指的类型

//T可以是任何类型的泛型
function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}

join<number, string>(1, '1');

// T[]
function map<T>(params: Array<T>){
  return params;
}

map<string>(['123']);

五、类中的泛型类型以及泛型类型

①类中的泛型类型

interface Item {
  name: string;
}

class DataManager<T extends Item> {
  constructor(private data: T[]) {}
  getItem(index: number): string {
    return this.data[index].name;
  }
}

// const data = new DataManager<number>([1]);
// data.getItem(0);

const data = new DataManager([
  {
    name: 'dell'
  }
])

class DataManager<T extends number | string> {
  constructor(private data: T[]) {}
  getItem(index: number): T {
    return this.data[index]
  }
}

// const data = new DataManager<string>([]);
const data = new DataManager<number>([]);

②泛型声明的type类型

// const func: <T>() => string = <T>() => {
//   return '123'
// }

//如何使用泛型作为一个具体的类型注解
function hello<T>(param: T) {
  return param
}

const func: <T>(param: T) => T = hello;

六、命名空间namespace　　

①tsconfig.json

"outDir": "./dist",             
    "rootDir": "./src",

②index.html

<!DOCTYPE html>
<html lang="en">
  <head>
     <meta charset="UTF-8" />
     <title>Document</title>
     <script src='./dist/page.js'></script>
  </head>
  <body>
     <script>
        new Home.Page();
     </script>
  </body>
</html>

③src->page.ts： Home命名空间中，export暴露出要用的page，index.html中就可以使用new Home.page()；其它方法不使用则不暴露　

namespace Home {
  class Header {
    constructor() {
      const elem = document.createElement('div');
      elem.innerText = 'This is Header';
      document.body.appendChild(elem);
    }
  }
  
  class Content {
    constructor() {
      const elem = document.createElement('div');
      elem.innerText = 'This is Content';
      document.body.appendChild(elem);
    }
  }
  
  class Footer {
    constructor() {
      const elem = document.createElement('div');
      elem.innerText = 'This is Footer';
      document.body.appendChild(elem);
    }
  }
  
  export class Page {
    constructor() {
      new Header();
      new Content();
      new Footer();
    }
  }
}

拆分页面和组件多个命名空间

①tsconfig.json

"outFile": "./dist/page.js" , //把所有要输出的文件联合起来输出一个单一的文件

此时会有报错，因为设置了outFile后只支持amd或system的规范，不支持commenjs的规范了

"module": "amd",

②index.html不变

③src->page.ts依赖conponents.ts

//依赖声明
///<reference path="./components.ts" />

namespace Home {
  export class Page {
    user: Components.User = {
      name: 'dell'
    }
    constructor() {
      new Components.Header();
      new Components.Content();
      new Components.Footer();
    }
  }
}

④src->components.ts暴露给page.ts所需要的方法和子命名空间

namespace Components {
  
  //子的命名空间
  export namespace SubComponents {
    export class Test {}
  }

  export interface User {
    name: string;
  }

  export class Header {
    constructor() {
      const elem = document.createElement('div');
      elem.innerText = 'This is Header';
      document.body.appendChild(elem);
    }
  }
  
  export class Content {
    constructor() {
      const elem = document.createElement('div');
      elem.innerText = 'This is Content';
      document.body.appendChild(elem);
    }
  }
  
  export class Footer {
    constructor() {
      const elem = document.createElement('div');
      elem.innerText = 'This is Footer';
      document.body.appendChild(elem);
    }
  }
}

⑤问题：page.ts中依赖的Components命名空间必须在打开其它文件后才可以追溯到

七、import对应的模块化　

①src->components.ts：export暴露三个变量

export class Header {
    constructor() {
      const elem = document.createElement('div');
      elem.innerText = 'This is Header';
      document.body.appendChild(elem);
    }
}
  
export class Content {
  constructor() {
    const elem = document.createElement('div');
    elem.innerText = 'This is Content';
    document.body.appendChild(elem);
  }
}

export class Footer {
  constructor() {
    const elem = document.createElement('div');
    elem.innerText = 'This is Footer';
    document.body.appendChild(elem);
  }
}

②src->page.ts：import导入components的变量，export default最终要用到的Page

import { Header, Content, Footer } from './components'

export default class Page {
    constructor() {
      new Header();
      new Content();
      new Footer();
    }
}

③问题：'define' is not defined，原因是现在打包生成的文件是amd规范，浏览器不识别define()语法

debug typescript 参数 typescript config_debug typescript 参数_05

④index.html中引入require.js，帮助识别define()语法；

<!DOCTYPE html>
<html lang="en">
  <head>
     <meta charset="UTF-8" />
     <title>Document</title>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js'></script>
     <script src='./dist/page.js'></script>
  </head>
  <body>
     <script>
       require(['page'], function(page) {
         new page.default()
       })
     </script>
  </body>
</html>

八、使用parcel打包TS代码　　

①安装parcel@next打包工具

npm install parcel@next -D

②package.json中修改test命令

"test": "parcel ./index.html"

③运行npm run test，开启一个服务器地址http://localhost:1234

九、描述文件中的全局类型

①index.html中引用jquery的CDN文件

<!DOCTYPE html>
<html lang="en">
  <head>
     <meta charset="UTF-8" />
     <title>Document</title>
     <script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.js'></script>
     <script src='./page.ts'></script>
  </head>
  <body>
  </body>
</html>

②jquey语法在typescript中没有注解，需要写一个类型定义文件，打通ts文件和js文件之间的鸿沟　

③src->page.ts：使用jqurey写js语句

// $(function() {
//   alert(123);
// })

$(function() {
  $('body').html('<div>123</div>')
})

④src->jquery.d.ts：类型注解文件

//declare 声明 - 定义全局变量
// declare var $ : (param: () => void) => void;

//declare 声明 - 定义全局函数
declare function $(param: () => void): void;

//函数重载：参数不同，允许对一个函数名字写多个函数声明
declare function $(param: string): {
  html: (html: string) => {}
}

问题：jquery函数返回的应该也是一个jqury对象，不能指定为{}

//定义全局函数
interface JqueryInstance {
  html: (html: string) => JqueryInstance;
}

declare function $(readyFunc: () => void): void;
declare function $(selector: string): JqueryInstance;

使用 接口语法 写函数重载　　

//定义全局函数
interface JqueryInstance {
  html: (html: string) => JqueryInstance;
}

//使用interface的语法，实现函数重载
interface JQuery {
  (readyFunc: () => void): void;
  (selector: string): JqueryInstance;
}

declare var $: Jquery;

如何对对象进行类型定义，以及对类进行类型定义，以及命名空间的嵌套

①page.ts：在使用$('body')时，相当于执行了new $.fn.init();　

$(function() {
  $('body').html('<div>123</div>');
  new $.fn.init(); //构造函数 才能用new语法
})

②jquery.d.ts　

//定义全局函数
interface JqueryInstance {
  html: (html: string) => JqueryInstance;
}

//函数重载
declare function $(readyFunc: () => void): void;
declare function $(selector: string): JqueryInstance;

//如何对对象进行类型定义，以及对类进行类型定义，以及命名空间的嵌套
declare namespace $ {  //$ 是命名空间
  namespace fn {       //fn 是命名空间
    class init {}      //init 是构造函数
  }
}

十、模块代码的类型描述文件　　

①安装jquery

npm install jquery  --save

import引用jquery，会提示报错，找不到jquery module　

import $ from 'jquery';

$(function() {
  $('body').html('<div>123</div>');
  new $.fn.init(); //构造函数 才能用new语法
})

③jquery.d.ts: 通过module定义一个jquery的模块，定义关于$混合类型的内容，最终export导出要使用的$

//ES6 模块化
declare module 'jquery' {
  //定义全局函数
  interface JqueryInstance {
    html: (html: string) => JqueryInstance;
  }

  //$ 混合类型 - 不必再写declare, 直接写function即可
  function $(readyFunc: () => void): void;
  function $(selector: string): JqueryInstance;

  namespace $ {  //$ 是命名空间
    namespace fn {       //fn 是命名空间
      class init {}      //init 是构造函数
    }
  }

  export = $;
}

十一、泛型中keyof语法的使用　　

interface Person {
  name: string;
  age: number;
  gender: string;
}

class Teacher {
  constructor(private info: Person) {}
  getInfo(key: string){
    //类型保护
    if(key === 'name' || key === 'age' || key === 'gender'){
      return this.info[key];
    }
  }
}

const teacher = new Teacher({
  name: 'dell',
  age: 18,
  gender: 'male'
})

const test = teacher.getInfo('name');
console.log(test)

问题：test的可能类型会是string | number | underfind，是因为传任何值给getInfo方法时，key值不定

typescript不会深度分析，传入的是不是name类型，如果是则值必须是string类型；传入的是age类型，值必须是number类型

解决：通过泛型结合keyof语法　　

interface Person {
  name: string;
  age: number;
  gender: string;
}

//第一次循环
//T extends 'name'
//type T = 'name'
//key: 'name'
//Person['name'];  //string

//第二次循环
//T extends 'age'
//type T = 'age'
//key: 'age'
//Person['age'];   //number     

class Teacher {
  constructor(private info: Person) {}
  getInfo<T extends keyof Person>(key: T): Person[T]{
    return this.info[key];
  }
}

const teacher = new Teacher({
  name: 'dell',
  age: 18,
  gender: 'male'
})

const test = teacher.getInfo('name');
console.log(test)

越是迷茫、浮躁的时候，保持冷静和耐心，尤为重要

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。