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数据类型
-
- number
-
- string
-
- boolean
-
- null
-
- undefined
-
- array
- let arr1: number[]
- let arr2: Array
-
- tuple(元祖)
- 约束数组的类型和长度
- let arr: [string,number]
-
- enum(枚举)
- 约束数字按照名称递增(默认值0)
-
- any
-
- void
- 函数返回值为undefined以外都不行
-
- object
-
- 联合类型
- a: string|number
-
- 类型断言
- let a: 123 赋值变量,断言为number类型
- let b 未赋值变量,断言为any
-
问好,属性的定义:
问号表示可选的属性,一般用于属性定义interface Test { color?: string; //color的值为string|undefined width: string }
四、接口
- 接口: 约束对象的类型,接口是对象属性和方法的描述
- interface定义接口
-
- 接口描述对象类型
- interface Iobj={}
-
- 接口描述函数类型
(source: string, subscribe: string): boolean
- 接口描述函数类型
-
- 接口描述类类型
implement关键字
- 接口描述类类型
-
- 接口继承
interface A extends B,C{}
- 接口继承
-
五、类
类的基本使用同ES6和类属性方法的约束
- 类的定义
- 类的继承
-
- 重写: 子类重写父类方法
-
- 类的多态
- 父类型引用指向子类型的实例 ===> 多态
- 子类型引用指向父类型实例 ===>子类型没有新的方法才可以
- 类的修饰符
- public private protected readonly
- public公共的
- private私有的,外面属性方法不可见
- protected类型,子类以外不可见
- readonly只能读不能改
- public private protected readonly
- 类的存取器
- get set
- 类的静态属性
- static关键字 (类本身的属性而不是实例对象上的)
- 抽象类
- abstract关键字
- 不能被实例化
- 抽象类必须包含抽象方法,
- 只能子类继承并实现该抽象方法
六、函数
- 函数赋值的约束
- let fn:(x:string,y:string):string = function(x:string,y:string):string{}
- 函数参数和返回值的约束
- 返回值 function():string{}
- 默认参数 function(x:string= “A”)
- 可选参数 function test(x?:string)
- 剩余参数 function test(x?:string,…args:string[])
- 函数重载
- 重新进行更加严格的约束
七、泛型
- 函数泛型参数
- 函数多个泛型参数
- 泛型接口
- 泛型类
- 泛型约束
八、ts内置对象
- ECMAScript 的内置对象
Boolean
Number
String
Date
RegExp
Error - 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/
平时用到的类型
- Promise 返回值为promise类型