TS

TS

是什么?what

JS高级

为什么?why

提高开发效率

怎么用? how

一、下载
npm install -g typescript
tsc -V

二、 如何编译成js

• 方法1: 手动编译

  • tsc hello.ts

• 方法2: VScode监视配置文件自动编译

  • tsc --init
  • 生成tsconfig.json文件
  • 添加"outDir"
  • vscode顶部工具栏->终端->运行任务->tsc:监视tsconfig.json

• 方法3: webpack编译

  • 配置webpack.config.js
  • 下载typescript webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin - ts-loader cross-env
  • 入口文件引入ts文件，webpack自动打包ts文件

三、ts数据类型

1. number
2. string
3. boolean
4. null
5. undefined
6. array
   let arr1: number[]
   let arr2: Array
7. tuple(元祖)
8. 约束数组的类型和长度
   • let arr: [string,number]
9. enum(枚举)
   约束数字按照名称递增（默认值0）
10. any
11. void
    函数返回值为undefined以外都不行
12. object
13. 联合类型
    a: string|number
14. 类型断言
    let a: 123 赋值变量，断言为number类型
    let b 未赋值变量，断言为any

• ? 问号，属性的定义：
  问号表示可选的属性，一般用于属性定义

  interface Test {
    color?: string;   //color的值为string|undefined
    width: string
  }
  

四、接口

• 接口: 约束对象的类型，接口是对象属性和方法的描述
• interface定义接口
  • 1. 接口描述对象类型
    • interface Iobj={}
  • 2. 接口描述函数类型
       (source: string, subscribe: string): boolean
  • 3. 接口描述类类型
       implement关键字
  • 4. 接口继承
       interface A extends B,C{}

五、类
类的基本使用同ES6和类属性方法的约束

1. 类的定义
2. 类的继承
   1. 1. 重写: 子类重写父类方法
3. 类的多态
   1. 父类型引用指向子类型的实例 ===> 多态
   2. 子类型引用指向父类型实例 ===>子类型没有新的方法才可以
4. 类的修饰符
   1. public private protected readonly
      1. public公共的
      2. private私有的，外面属性方法不可见
      3. protected类型，子类以外不可见
      4. readonly只能读不能改
5. 类的存取器
   1. get set
6. 类的静态属性
   1. static关键字 (类本身的属性而不是实例对象上的)
7. 抽象类
   1. abstract关键字
   2. 不能被实例化
   3. 抽象类必须包含抽象方法，
   4. 只能子类继承并实现该抽象方法

六、函数

1. 函数赋值的约束
   1. let fn:(x:string,y:string):string = function(x:string,y:string):string{}
2. 函数参数和返回值的约束
   1. 返回值 function():string{}
   2. 默认参数 function(x:string= “A”)
   3. 可选参数 function test(x?:string)
   4. 剩余参数 function test(x?:string,…args:string[])
3. 函数重载
   1. 重新进行更加严格的约束

七、泛型

1. 函数泛型参数
2. 函数多个泛型参数
3. 泛型接口
4. 泛型类
5. 泛型约束

八、ts内置对象

1. ECMAScript 的内置对象
   Boolean
   Number
   String
   Date
   RegExp
   Error
2. BOM 和 DOM 的内置对象
   Window
   Document
   HTMLElement
   DocumentFragment
   Event
   NodeList

九、d.ts声明文件
当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。
声明语句: 如果需要ts对新的语法进行检查, 需要要加载了对应的类型说明代码
declare var jQuery: (selector: string) => any;
声明文件: 把声明语句放到一个单独的文件（jQuery.d.ts）中, ts会自动解析到项目中所有声明文件
下载声明文件: npm install @types/jquery --save-dev

有了这个声明文件才能使用这个库相关的语法提示
console.log($(‘body’))

十、ts作用
变量数据类型的约束
实现面向对象的功能

js项目如何引入ts

webpack引入相关库的d.ts声明文件

react项目如何使用ts开发

官网： https://www.html.cn/create-react-app/docs/adding-typescript/
创建一个react+ts项目
$ npx create-react-app my-app --typescript
将ts添加到react项目中
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
接下来，将任何文件重命名为 TypeScript 文件
（例如 src/index.js 重命名为 src/index.tsx ）并 重新启动开发服务器！

vue项目如何引入ts开发

使用vue脚手架3或者4, 并选择手动指定配置，因为目前不支持

使用VuePress搭建在线文档网站

https://vuepress.vuejs.org/zh/

平时用到的类型

1. Promise 返回值为promise类型

接口 enum

参考文档：接口定义

enum  ConfigPng {
	item1 = 123,
	item2 = 455,
	item3 = ‘time’
}

//获取成员变量
console.log(ConfigPng.item1,Config.item2);

直接使用ConfigPng[a]会一直报预发错误，虽然代码可以运行
解决方法：as keyof typeof RightsTypes

export enum ConfigType {
  CUSTOMER_ENROLL = '会员',
  FIRST_ORDER_PROMO = '顾客',
  REPURCHASE_INCREASE = '普客',
  NON_PURCHASER_AROUSE = '邀约客',
}

ConfigType[cyclePromoScene as keyof typeof ConfigType]

研究ts这种写法

类型断言操作符：as

参考：类型断言
结合.tsx文件使用，与尖括号类型断言行为是等价的。因为在.tsx文件中使用尖括号运行会有困难。

let foo = <foo>bar
let foo = bar as foo

enum  ConfigPng {
	item1 = 123,
	item2 = 455,
	item3 = ‘time’
}
ConfigType[cyclePromoScene as keyof typeof ConfigType]
//意思是已经断言 cyclePromoScene为ConfigPng属性中其中一个类型

面试题

1. 父组件定义了interface，子组件只想按需获取其中一项或者几项数据的类型。
   方法1：扩展接口，接口可以继承另外一个接口

import { FormComponentProps } from 'antd/lib/form';
export interface CustomFromProps extends FormComponentProps {
  /**
   * 表单值改变
   */
  onChange?: Function;
  /**
   * 字段状态改变
   */
  onFieldsChange?: Function;
  /**
   * 表单的值
   */
  value?: any;
}

2. 定义了一个接口A，想设置两一个数据为接口A中其中一项的数据类型。