学习 之 TypeScript -- 基础知识
1、函数: 函数定义
1.1、无返回值
function run(): void {
console.log('没有返回值请使用void类型')
}
1.2、返回值类型
// 返回字符串类型
function run2(): string {
return '返回字符串类型'
}
// 返回数字类型
function run3(): number {
return 1234
}
// 返回任意类型
function run4(): any {
return 123
}
1.3、函数传参
function getInfo(name: string, age: number): string {
return `${name}______${age}`
}
1.4、可选参数（可选参数必须现在最后面！！！）
function getInfo2(name: string, age?: number): string {
if (age) {
return `${name}______${age}`
} else {
return `${name}_____年龄保密`
}
}
1.5、默认参数
function getInfo3(name: string, age: number = 20): string {
if (age) {
return `${name}______${age}`
} else {
return `${name}_____年龄保密`
}
}
1.6、剩余参数(三点运算)
function sum(...result: number[]): number {
var sum = 0;
result.map(function (item, index) {
sum += item;
});
return sum
}
console.log(sum(12, 3, 4, 5))
1.8、函数重载
//(Java中重载，指的是两个或者两个以上的同名函数，但他们的参数不一样，这时会出现函数重载的情况)
//(TyprScript中重载，指的是通过一个函数提供多个函数类型定义，来试下多种功能的目的)
//ts为了兼容es5 或者 es6重载的写法和java是有区别的
function getInfo(name: string): string;
function getInfo(age: number): string;
function getInfo(str: any): any {
if (str === 'string') {
return '我的名字：' + str
} else {
return '我的年龄：' + str
}
}
console.log(getInfo('张三')) // 正确写法
console.log(getInfo(20)) // 正确写法
console.log(getInfo(true)) //错误写法
2、类
class Person {
public name: string; // 属性
constructor(n: string) { // 构造函数 实例话会触发
this.name = n;
}
getName(): string {
return this.name;
}
setName(name: string): void {
this.name = name;
}
}
let p = new Person('张三');
p.setName('李四')
console.log(p.getName())
3、继承
class Person {
public name: string; // 属性
constructor(n: string) { // 构造函数 实例话会触发
this.name = n;
}
getName(): string {
return this.name;
}
setName(name: string): void {
this.name = name;
}
run(str: string): string {
return str;
}
}
class Web extends Person {
constructor(name: string) {
super(name) // 继承 -- 初始化父类构造函数
}
run(str: string): string {
return str + " -- 子类方法";
}
}
let p = new Web('李五');
// 父类和子类有同样方式时，实际调用的是子类方法(因为先从子类找方法，如果子类方法没有，再往父类找)
console.log(p.run('李六'))
4、类的修饰符(属性不加修饰符，默认为公有：public)
// public 公有: 在类里、子类、类外都可以访问
// protected 类保护: 在类里、子类可以访问，类外不可访问
// private 私有：在当前类里可以访问，在子类、类外不可访问
// public(公有) 范例：
class Person {
public name: string; // 属性
constructor(n: string) { // 构造函数 实例话会触发
this.name = n;
}
getName(): string {
console.log(this.name + '---- public范例 -- 类内访问')
return this.name;
}
setName(name: string): void {
this.name = name;
}
run(str: string): string {
return str;
}
}
class Web extends Person {
constructor(name: string) {
super(name) // 继承 -- 初始化父类构造函数
}
run(str: string): string {
console.log(this.name + '---- public范例 -- 子类访问')
return str + " -- 子类方法";
}
}
let p = new Web('李五');
console.log(p.getName())
console.log(p.run('李六'))
console.log(p.name + "---- public范例 -- 类外访问")
// protected(保护) 范例：
class Person {
protected name: string; // 属性
constructor(n: string) { // 构造函数 实例话会触发
this.name = n;
}
getName(): string {
console.log(this.name + '---- public范例 -- 类内访问')
return this.name;
}
setName(name: string): void {
this.name = name;
}
run(str: string): string {
return str;
}
}
class Web extends Person {
constructor(name: string) {
super(name) // 继承 -- 初始化父类构造函数
}
run(str: string): string {
console.log(this.name + '---- public范例 -- 子类访问')
return str + " -- 子类方法";
}
}
let p = new Web('李五');
console.log(p.getName())
console.log(p.run('李六'))
console.log(p.name + "---- public范例 -- 类外访问") // 报错
// private(私有) 范例：
class Person {
private name: string; // 属性
constructor(n: string) { // 构造函数 实例话会触发
this.name = n;
}
getName(): string {
console.log(this.name + '---- public范例 -- 类内访问')
return this.name;
}
setName(name: string): void {
this.name = name;
}
run(str: string): string {
return str;
}
}
class Web extends Person {
constructor(name: string) {
super(name) // 继承 -- 初始化父类构造函数
}
run(str: string): string {
console.log(this.name + '---- public范例 -- 子类访问') // 报错
return str + " -- 子类方法";
}
}
let p = new Web('李五');
console.log(p.getName())
console.log(p.run('李六'))
console.log(p.name + "---- public范例 -- 类外访问") // 报错
5、静态方法
class Person {
public name: string;
public age: number = 20;
static sex: string = "男"
constructor(name: string) {
this.name = name
}
// 实例方法
run(str: string): string {
return str + "实例方法"
}
// 静态方法 关键字: static（静态方法 不能直接调用类里面都属性）
static print(str: string): string {
console.log(this.age) // 报错(因为使用了实力属性)
console.log(this.sex) // 正确(因为使用了静态属性)
return str + "静态方法"
}
}
console.log(Person.print('print'))
console.log(Person.sex)
let p = new Person('张三');
console.log(p.run('run'))
6、多态
// 父级定义一个方法不去实现，让继承它的子级方法是去实现，每个子类有不同的表现；多态属于继承
class Anial {
public name: string;
constructor(name: string) {
this.name = name;
}
eat() {
// 定义了一个吃的方法，具体吃什么，由继承的子类去实现，每个子类的表现不一样
console.log("这是定义了一个吃的方法")
}
}
class Dog extends Anial {
constructor(name: string) {
super(name)
}
eat() {
return this.name + '吃狗粮'
}
}
class Cat extends Anial {
constructor(name: string) {
super(name)
}
eat() {
return this.name + "吃猫粮"
}
}
let d = new Dog("狗");
let c = new Cat("猫");
console.log(d.eat())
console.log(c.eat())
7、抽象类
// (它是提供其他类继承的基类，不能直接实例化)
// (使用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生中实现)
// (abstract方法只能放在抽象类里面)
// (抽象类 和 抽象方法是用来定义标准)
abstract class Anial {
public name: string;
constructor(name: string) {
this.name = name;
}
// 抽象方法（抽象方法只能出现在抽象类中!!!）
abstract eat(): any;
}
class Dog extends Anial {
constructor(name: any) {
super(name);
}
// 必须实现父类抽象方法!!!!
eat() {
return this.name + "吃狗粮"
}
}
class Cat extends Anial {
constructor(name: any) {
super(name);
}
run() {
return this.name + "吃猫粮"
}
}
let d = new Dog('狗');
let c = new Cat("猫");
console.log(d.eat())
console.log(c.run()) // 报错：因为没有实现父级的抽象方法
8、接口
8.1、批量管理
interface FullName {
firstNmae: string;
secondName: string;
}
function printName(name: FullName) {
console.log(`${name.firstNmae} ---${name.secondName}`)
}
function printInfo(info: FullName) {
console.log(`${info.firstNmae} ---${info.secondName}`)
}
// printName({age:20,firstNmae:'张',secondName:'三'}) // 错误写法: 因为直接在调用中写，只能有firstNmae和secondName并且是string类型
var obj = {
firstNmae: '张',
secondName: '三'
}
printName(obj); // 只种写法，只要包含有 firstNmae和secondName并且是string类型
var info = {
firstNmae: '李',
secondName: '四'
}
printInfo(info);
8.2、可选属性
interface FullName {
firstNmae: string;
secondName: string;
age?: number
}
function printInfo(info: FullName) {
console.log(`${info.firstNmae} ---${info.secondName}---${info.age ? info.age : ""}`)
}
let info = {
firstNmae: '李',
secondName: '四',
// age: 20
}
printInfo(info);
