typescript模块导入和导出（TypeScript详细解说思维导图）
typescript模块导入和导出（TypeScript详细解说思维导图）class Animal { public nickName: string constructor(name: string) { this.nickName = name } eat() { console.log(`吃`); } } class Dog extends Animal { constructor(name: string) { super(name) } eat(): string { return `小狗${this.nickName}吃骨头` } } class Cat extends Animal { constructor(name: string) { super(name) } eat
TypeScript详细解说思维导图请见文章底部
作者：蓝海00
转载链接：https://www.jianshu.com/p/a540567ce1ce
1⃣️、Typescript介绍- Typescript 是由微软开发的一款开源的编程语言
- Typescript 是 JavaScript 的超集 遵循最新的ES6、ES5 规范，Typescript 扩展了 JavaScript的语法
- Typescript 更像后端 java、C# 这样的面向对象语言 可以让JavaScript开发大型企业项目
- 谷歌也在大力支持 Typescript 的推广 谷歌的 angular2.x 就是基于 Typescript 语法
- 最新的 Vue、React 也开源集成 Typescript
安装 sudo npm install -g typescript 编译 tsc helloworld.ts
3⃣️、Typescript 开发工具 Vscode 自动编译.ts 文件 (保存就编译)3⃣️、1⃣️ 生成 tsconfig.json 配置文件 命令生成tsc --init修改里面的outDir(取消注释)
即可实时将Typescript文件编译成浏览器可运行的JavaScript文件
4⃣️、Typescript 数据类型4⃣️、1⃣️ 布尔类型(boolean)let bool: boolean = true
bool = false
console.log(bool); // false
4⃣️、2⃣️ 数字类型
let num: number = 1
num = 10
console.log(num); // 11
4⃣️、3⃣️ 字符串类型
let str: string = "hello ts"
str = "!"
console.log(str); // hello ts!
4⃣️、4⃣️ 数组类型4⃣️、4⃣️、1⃣️ 规定统一数组中元素的数据类型
let arr1: number[] = [2 1]
console.log(arr1);
4⃣️、4⃣️、2⃣️ 元组类型 属于数组类型的一种
- 规定数组中所有的元素统一类型
let arr2: Array<string> = ["hehe" "heh" "hehh"]
console.log(arr2);
- 规定数组中每个元素的数据类型
let arr3: [number string number] = [1 "2" 3]
console.log(arr3);
4⃣️、4⃣️、3⃣️ 三、数组中的元素可以是任意数据类型
let arr4: any[] = [2 3 "ss"]
console.log(arr4);
4⃣️、5⃣️ 枚举类型
// 规定一组特殊表达某个意义的词汇 如数字状态码
/**
* success 成功 对应 1
* errpr 失败 对应 2
* ...
*/
// 后面的标示符没有给值会默认根据前面的标示符( <= number)生成对应的值(递增)
// 注意 如果前面的标示符是字符串 后面的标示符必须赋值！！！
enum Flag { success = 1 error }
let s: Flag = Flag.success
console.log(s); // 1
let e: Flag = Flag.error
console.log(e); // 2
// 如果标识符没有给值 默认是下标
enum Color { red yellow blue hotpink }
let { red yellow hotpink } = Color
console.log(red yellow hotpink); // 0 1 3
4⃣️、6⃣️ 任意类型
// 可以赋值任意类型的数据
// 用途 如获取DOM元素后为这个DOM元素设置样式
let isTs: any = 1
isTs = "is typescript"
console.log(isTs); // is typescript
4⃣️、7⃣️ null 和 undefined
let n: null
n = null
console.log(n); // null
let u: undefined
u = undefined
console.log(u); // undefined
4⃣️、8⃣️ 混合数据类型
// 设置一个变量可能是undefined 可能是number
let numUndefind: number | undefined
console.log(numUndefind); // undefined
numUndefind = 1
console.log(numUndefind); // 1
4⃣️、9⃣️ void类型
- 表示没有任何类型 一般用在定义方法的时候没有返回值
let myFn = (): void => { }
- 函数定义返回值
let myFn1 = (): number => {
return 1
}
let myFn2 = (): string => {
return "myFn2"
}
5⃣️、Typescript 函数5⃣️、1⃣️ 函数的定义
- 规定形参的类型和函数返回值的类型
let fnInfo = (nickname: string age: number): string => {
return `${nickname} -- ${age}`
}
console.log(fnInfo("lanhai" 11)) // lanhai -- 11
5⃣️、2⃣️ 可选参数
- 形参后面加问号即可 默认是必传
- 可选参数必须设置在形参最后面 不能前面是可传 后面是必传
❌(nickname?:string age:number)
✅(nickname:string age?:number)
let fnInfo1 = (nickname: string age?: number): string => {
return age ? `${nickname} -- ${age}` : `${nickname} -- 年龄保密`
}
console.log(fnInfo1("lanhai" 11))
console.log(fnInfo1("lanhai"))
5⃣️、3⃣️ 默认参数
- 形参后面加等号跟上默认值即可
- 参数不能同时是默认参数或者是可选参数 默认参数也必须写在形参中的最后面
- 如果默认参数传递了值 那这个默认参数的值以传递过来的值为准
- 相当于es5中的 a = a || 20
let fnInfo2 = (nickname: string age: number = 10): string => {
return `${nickname} -- ${age}`
}
console.log(fnInfo2("hai!"));
5⃣️、4⃣️ 剩余参数
- 通过三点运算符 接收传递过来的值 赋给对应的数组
- 相当于es5中的 arguments
let fnSum = (...res: Array<number>) => {
let sum: number = 0;
res.forEach(val => {
sum = val
});
return sum
}
console.log(fnSum(1 2 3 4 5 6 7 8 9 10)) // 50
5⃣️、5⃣️ 函数的重载
- java中的重载 是指两个以上同名函数 但它们的参数不一样 这时就会出现函数重载的情况
- typescript中的重载 “同样的函数传递‘不同类型’的参数 执行不同的功能”
- 通过为同一个函数提供 形参不同类型来判断实现多种功能
function fn(name: string sex: string love: string): string;
function fn(age: number): string;
function fn(str: any ...res: Array<any>): any {
return typeof str === "string" ? `我叫${str} 我是${res[0]}生 我爱好${res[1]}` : `我${str}岁了`
}
console.log(fn("lanhai" "男" "编程"))
function fn1(name: string sex: string): string;
function fn1(age: number): string;
function fn1(str: any sex?: string): any {
return typeof str === "string" ? `我叫${str} 我是${sex}生` : `我${str}岁了`
}
console.log(fn1("lanhai1" "男"))
6⃣️、Typescript 类6⃣️、1⃣️ 回顾 es5继承
function Person(this: any nickname: string) {
this.nickname = nickname
this.sex = "男"
this.run = () => {
console.log(this.nickname "跑步")
}
}
Person.prototype.sayHi = () => {
console.log(`你好`)
}
let per = new Person("jack")
per.run()
per.sayHi()
function Son(this: any nickname: string) {
Person.call(this nickname)
for (var variable in Person.prototype) {
Son.prototype[variable] = Person.prototype[variable]
}
}
let son = new Son("jack")
son.run()
son.sayHi()
6⃣️、2⃣️ 声明类
- constructor 构造器 实例化对象的时候就会触发这个方法 把传递过来的值设置给类里面的属性
- 代码分析
class Person {
nickName: string
// 构造器 实例化对象的时候就会触发这个方法 把传递过来的值设置给类里面的属性
constructor(name: string) {
this.nickName = name
}
getInfo(): string {
return `我叫${this.nickName}`
}
// 可以通过方法设置类里面属性的值
setInfo(name: string): void {
this.nickName = name
}
}
let per = new Person("蓝海")
per.setInfo("jeck")
console.log(per.getInfo())
6⃣️、3⃣️ 类的继承
- 结合 extends 和 super 关键字继承类
extends 后面跟继承的父类
super 触发父类的构造器 传递参数到父类 /* 初始化父类的构造函数 */ - 代码分析
class Student {
nick: string
age: number
constructor(n: string a: number) {
this.nick = n
this.age = a
}
run(): void {
console.log(`${this.nick}在跑步`)
}
}
let stu = new Student("pink" 18)
stu.run()
console.log(stu.age)
// 结合 extends 和 super 关键字继承类
// extends 后面跟继承的父类
// super 触发父类的构造器 传递参数到父类 /* 初始化父类的构造函数 */
class myStudent extends Student {
constructor(mNick: string mAge: number) {
super(mNick mAge)
}
// 子类获取属性和方法的规律 先从自己的类里面去找 没有再去继承的父类里面去找
// 类似于es5的构造函数 先从构造函数中找 没有再去构造函数对应的原型对象中找
// (扩展自己的方法) 获取父类里面的属性
run() {
console.log("myRun" this.nick)
}
}
let myStu = new myStudent("莉丝" 13)
myStu.run()
console.log(myStu.age)
6⃣️、4⃣️ 类里面的修饰符
- public
公有的 在类、子类、类外面都可以访问 - protected
保护类型 在类、子类里面可以访问，在类外面无法访问 - private
私有 在类里面可以访问，在子类、类外面无法访问
属性如果不加修饰符 默认就是公有的
- 代码分析
class Test {
// 公有的 在类、子类、类外面都可以访问
public nickName: string
// 保护类型 在类、子类里面可以访问，在类外面无法访问
protected age: number
// 私有 在类里面可以访问，在子类、类外面无法访问
private sex: string
// 属性如果不加修饰符 默认就是公有的
constructor(_name: string _age: number _sex: string) {
this.nickName = _name
this.age = _age
this.sex = _sex
}
}
class Test_ji_chen extends Test {
constructor(_name: string _age: number _sex: string) {
super(_name _age _sex)
}
run() {
console.log(this.nickName); // "jack"
console.log(this.age); // 18
// console.log(this.sex); // err 属性“sex”为私有属性，只能在类“Test”中访问。
}
}
let test = new Test_ji_chen("jack" 18 "男")
console.log(test.nickName); // "jack"
// console.log(test.age); // 属性“age”受保护，只能在类“Test”及其子类中访问。
// console.log(test.sex); // 属性“sex”为私有属性，只能在类“Test”中访问。
test.run()
6⃣️、5⃣️ 静态属性和静态方法
- 通过 static 关键字来声明的属性和方法 就是静态属性和静态方法
- 静态属性必须赋值 静态方法中 "只能" 访问这个类里面的静态属性 通过类名.静态属性来访问
- 代码分析
class staticFn {
public nickName: string /* 实例属性 */
static myAge: number = 19 /* 静态属性 必须赋值 */
constructor(name: string) {
this.nickName = name
}
sayHi(): void { /* 实例方法 */
console.log(`sayhi ${this.nickName}`)
}
static myRun(): void {
console.log(`我${staticFn.myAge}岁我可以跑步`);
}
}
let sta = new staticFn("蓝海")
// 实例属性
console.log(sta.nickName);
// 实例方法
sta.sayHi()
// 静态属性
console.log(staticFn.myAge);
// 静态方法
staticFn.myRun()
- 静态属性和静态方法的用途
如 jquery中 通过 $(el).css()这是实例方法 $(el)返回了 这个方法获取的DOM元素 然后.css()方法设置样式 $.ajax() 这是静态方法 直接通过 $.出来的方法
6⃣️、6⃣️ 多态- 父类定义一个方法不去实现 让继承的子类去实现 每个子类有不同的表现
- 多态属于继承
- 代码分析
class Animal {
public nickName: string
constructor(name: string) {
this.nickName = name
}
eat() {
console.log(`吃`);
}
}
class Dog extends Animal {
constructor(name: string) {
super(name)
}
eat(): string {
return `小狗${this.nickName}吃骨头`
}
}
class Cat extends Animal {
constructor(name: string) {
super(name)
}
eat(): string {
return `小猫${this.nickName}吃鱼`
}
}
6⃣️、7⃣️ 抽象类
- 提供其他类继承的基类 “不能直接被实例化”
- 使用 abstract关键字来定义抽象类和抽象方法 抽象类中的抽象方法“必须在继承的子类中实现”
- abstract抽象方法只能放在抽象类中 抽象类和抽象方法是用来定义标准的，父类要求子类必须实现某些方法。
- 代码分析
abstract class AbsAnimal {
protected nickName: string
constructor(name: string) {
this.nickName = name
// 一些初始化的方法可以在构造器中直接实现
this.run()
}
abstract eat(): void
run(): void {
console.log(`${this.nickName}在跑步`);
}
}
class AbsCat extends AbsAnimal{
constructor(name:string){
super(name)
}
eat(){
console.log(`${this.nickName}吃鱼`);
}
}
let abscat = new AbsCat("Tom")
abscat.eat()
7⃣️、Typescript 接口7⃣️、1⃣️ 接口的作用
- 在面向对象的编程中 接口是一种规范的定义 它定义了行为和动作的规范
- 在程序设计里面 接口起到一种限制和规范的作用
- 接口定义了某一批类所需要遵守的规范 接口不关心这些类的内部状态数据 也不关心这些类里面的方法的实现细节
- 它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需求
- typescript中的接口类似于Java 同时还增加了更灵活的接口类型 包括属性、函数、可索引和类...
- 对属性(变量、形参)的数据进行约束
- 如 规定一组数据设置类型 设置给类或函数中形参的数据类型 在使用这个类或函数时必须按照接口的规定来传递数据
- 代码分析
interface FullName {
firstName: string
// 接口的可选属性 加?号即可 可传可不传
secoundName?: string
}
class MyName {
protected name: FullName
constructor(name: FullName) {
this.name = name
}
allName(): void {
console.log(`${this.name.firstName}${this.name.secoundName ? "---" this.name.secoundName : ""}`);
}
}
let myname = new MyName({
firstName: "jack"
})
myname.allName()
let YouName = (name: FullName): void => {
console.log(`${name.firstName}${name.secoundName ? "/" name.secoundName : ""}`);
}
YouName({
firstName: "蓝"
secoundName: "海"
})
- 案例扩展 ajax接口
/**
* $.ajax({
* type:"get"
* url:"test.json"
* data:{name:"蓝海" age:11}
* dataType:"json"
* })
*/
interface myAjax {
type: string
url: string
data?: object
dataType: string
}
class $ {
static ajax(obj: myAjax) {
// 可以xml小黄人ajax处理请求数据
console.log(obj);
}
}
$.ajax({
type: "get"
url: "test.json"
data: { name: "蓝海" age: 11 }
dataType: "json"
})
7⃣️、3⃣️ 函数类型接口
- 对方法传入的参数 以及返回值进行约束 可批量约束
- 函数接口只能用在函数表达式上面
- 代码分析
interface MyFn {
// 参数的数据类型 // 返回值 的数据类型
(key: string value: string): string
}
let myFn11: MyFn = (key: string value: string) => {
return `${key}:${value}`
}
console.log(myFn11("name" "jack"));
let myFn22: MyFn = function (key: string value: string) {
return `${key}---${value}`
}
console.log(myFn22("age" "11"));
7⃣️、4⃣️ 类 类型接口
- 对类的约束 和抽象类有点类似
- 通过关键字 implements 来对类进行接口约束
- 代码分析
interface MyClass {
// 子类必须实现这里面的属性和方法
nickName: string
eat(food: string): void
}
class AnimalInterface implements MyClass {
nickName: string
constructor(name: string) {
this.nickName = name
}
eat(food: string): void {
console.log(`${this.nickName} eat ${food} !!`);
}
}
let myAnimal = new AnimalInterface("猫")
myAnimal.eat("")
7⃣️、5⃣️ 接口扩展
- 接口可以继承接口
- 接口扩展
interface Student1 {
nickName: string
sayHi(): void
}
interface StudentMan extends Student1 {
play(playing: string): void
}
class LanHai implements StudentMan {
nickName: string
constructor(name: string) {
this.nickName = name
}
sayHi() {
console.log(`hi!`);
}
play(playing: string) {
console.log(`i am man i play ${playing}`);
}
}
let lh = new LanHai("兰海")
lh.sayHi()
lh.play("王者荣耀")
7⃣️、6⃣️ 类的继承 接口扩展
- "extends" 子句必须位于 "implements" 子句之前
- 代码分析
interface Student2 {
nickName: string
sayHi(): void
}
// 接口扩展
interface StudentMan2 extends Student2 {
play(playing: string): void
}
// 类实现接口
class LanHai2 {
public nickName: string
constructor(name: string) {
this.nickName = name
}
work(): void {
console.log(`${this.nickName}-敲代码`);
}
}
// 类的继承
class myLanHai2 extends LanHai2 implements StudentMan2 {
constructor(name: string) {
super(name)
}
sayHi() {
console.log("你好");
}
play(playing: string) {
console.log(`我在玩${playing}`);
}
}
let mylh2 = new myLanHai2("jack")
mylh2.sayHi()
mylh2.work()
mylh2.play("王者荣耀")
8⃣️、XMind笔记
若有感兴趣的小伙伴，需要TypeScript详细解说思维导图原图的，关注我，私信回复获取：TypeScript详细解说思维导图
作者：蓝海00
转载链接：https://www.jianshu.com/p/a540567ce1ce
