基础语法

基础类型和对象类型

  1. // 基础类型 null, undefined, symbol, boolean, void
  2. const count: number = 123;
  3. const teacherName: string = 'Dell';
  5. // 对象类型
  7. class Person {}
  9. const teacher: {
  10.   name: string;
  11.   age: number;
  12. } = {
  13.   name: 'Dell',
  14.   age: 18
  15. };
  17. const numbers: number[] = [1, 2, 3];
  19. const dell: Person = new Person();
  21. const getTotal: () => number = () => {
  22.   return 123;
  23. };

类型注解和类型推断

  • type annotation （类型注解）：我们来告诉 TS 变量是什么类型
  • type inference （类型推断）：TS 会自动的去尝试分析变量的类型
    • 如果 TS 能够自动分析变量类型，我们就什么也不需要做了
    • 如果 TS 无法分析变量类型的话，我们就需要使用类型注解 ```typescript // let count: number; // count = 123;

// let countInference = 123;

// const firstNumber = 1; // const secondNumber = 2; // const total = firstNumber + secondNumber;

function getTotal(firstNumber: number, secondNumber: number) { return firstNumber + secondNumber; }

const total = getTotal(1, 2);

const obj = { name: ‘dell’, age: 18 };

  1. <a name="jnBUO"></a>
  2. ### 函数类型
  3. ```typescript
  4. function add(first: number, second: number): number {
  5.   return first + second;
  6. }
  9. // void 和 never
  10. function sayHello(): void {
  11.   console.log('hello');
  12. }
  14. function errorEmitter(): never { // never表示这个函数压根就执行不到最后
  15.   throw new Error();
  16.   console.log(123);
  17. }
  19. function loop(): never {  // never表示这个函数永远不可能执行完成
  20.   while(true) {}
  21. }
  23. // 解构类型
  24. function add({ first, second }: { first: number; second: number }): number {
  25.   return first + second;
  26. }
  27. // 即使只解构一个，也要严格遵循结构注解语法
  28. function getNumber({ first }: { first: number }) {
  29.   return first;
  30. }
  32. const total = add({ first: 1, second: 2 });
  33. const count = getNumber({ first: 1 });

小复习

  1. // 基础类型, boolean, number, string, void, undfined, symbol, null
  2. let count: number;  // 如果赋值和定义放在一行，ts可以自动推断出变量类型；但如果放在两行，ts就推断不出了！！！
  3. count = 123;
  5. // 对象类型, {}, Class, function, []
  6. const func = (str: string) => {
  7.   return parseInt(str, 10);
  8. };
  10. // (str: string) => number 是函数的类型
  11. const func1: (str: string) => number = str => {
  12.   return parseInt(str, 10);
  13. };
  15. const date = new Date();
  17. // 其他的 case
  18. interface Person {
  19.   name: 'string';
  20. }
  21. const rawData = '{"name": "dell"}';
  22. const newData: Person = JSON.parse(rawData);  // JSON.parse返回的数据ts会自动推断为any，所以需要写类型注解
  24. let temp: number | string = 123;
  25. temp = '456';

数组和元组

  1. // 数组
  2. const arr: (number | string)[] = [1, '2', 3];
  3. const stringArr: string[] = ['a', 'b', 'c'];
  4. const undefinedArr: undefined[] = [undefined];
  6. // type alias 类型别名
  7. type User = { name: string; age: number };
  9. class Teacher {
  10.   name: string;
  11.   age: number;
  12. }
  14. const objectArr: Teacher[] = [
  15.   new Teacher(),
  16.   // 只要属性相同，ts也认
  17.   {
  18.     name: 'dell',
  19.     age: 28
  20.   }
  21. ];
  23. // 元组 tuple
  24. const teacherInfo: [string, string, number] = ['Dell', 'male', 18];
  25. // csv
  26. const teacherList: [string, string, number][] = [['dell', 'male', 19], ['sun', 'female', 26], ['jeny', 'female', 38]];

interface接口

  1. // interface 和 type 相类似，但并不完全一致
  2. // type是类型别名，相当于C语言里的typedef，type可以为基础类型起别名： type Position = number; 这语义化就相当优雅了~
  3. interface Person {
  4.   // readonly name: string;
  5.   name: string;
  6.   age?: number;
  7.   [propName: string]: any;
  8.   say(): string;
  9. }
  11. interface Teacher extends Person {  // 接口可以像类一样继承
  12.   teach(): string;
  13. }
  15. interface SayHi {   // 将函数定义成接口
  16.   (word: string): string;
  17. }
  19. const getPersonName = (person: Person): void => {
  20.   console.log(person.name);
  21. };
  23. const setPersonName = (person: Teacher, name: string): void => {
  24.   person.name = name;
  25. };
  27. const person = {
  28.   name: 'dell',
  29.   sex: 'male',  // 加一个sex字段，下面函数并不会报错（如果加方法就会报错了）；但是如果直接将该对象传给函数，就会报错。
  30.                 // 因为：ts会对“对象字面量的直接赋值”做类型的强校验！如果将对象先赋给一个变量缓存一下，就可以解除强校验。
  31.                 // 那我如何让代码使用者在传对象字面量的时候也可以绕过类型强校验呢？ 很简单，接口定义中加这个——[propName: string]: any;
  32.   say() {
  33.     return 'say hello';
  34.   },
  35.   teach() {
  36.     return 'teach';
  37.   }
  38. };
  40. getPersonName(person);
  41. setPersonName(person, 'lee');
  43. class User implements Person {  // 像Java一样，接口是最高级的抽象。
  44.   name = 'dell';
  45.   say() {
  46.     return 'hello';
  47.   }
  48. }
  50. const say: SayHi = (word: string) => {
  51.   return word;
  52. };

类型断言（Type Assertion）

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。即强制类型转换。
语法格式：

  1. <类型>值

或:

  1. 值 as 类型

实例

  1. var str = '1' 
  2. var str2:number = <number>str   //str、str2 是 string 类型
  3. console.log(str2)

面向对象

类的定义与继承

  1. class Person {
  2.   name = 'dell';
  3.   getName() {
  4.     return this.name;
  5.   }
  6. }
  8. class Teacher extends Person {
  9.   getTeacherName() {
  10.     return 'Teacher';
  11.   }
  12.   getName() {
  13.     return super.getName() + ' lee'; // super表示父类。super()表示调用父类的构造函数
  14.   }
  15. }
  17. const teacher = new Teacher();
  18. console.log(teacher.getName()); // dell lee
  19. console.log(teacher.getTeacherName());  // Teacher

何时会用super？
答：当子类重写了父类的方法，此时却还想调用父类的该方法，就需要使用super。

构造函数与权限修饰符

权限修饰符

private, protected, public 访问类型

  • public 允许我在类的内外被调用
  • protected 允许在类内及继承的子类中使用
  • private 允许在类内被使用
  1. class Person {
  2.   public name: string;
  3.   public sayHi() {
  4.     this.name;
  5.     console.log('hi');
  6.   }
  7.   private sayABC() {
  8.     console.log(this.name);
  9.   }
  10. }
  12. class Teacher extends Person {
  13.   public sayBye() {
  14.     this.sayHi();
  15.   }
  16. }
  18. const person = new Person();
  19. console.log(person.name);  // 没问题，因为name是public属性
  20. person.name = 'dell';  // 也可以赋值
  21. person.sayHi();  // 这个也没问题
  22. person.sayABC() // 报错，因为sayABC()是private方法

readonly显示属性为只读

  1. // readonly
  2. class Person {
  3.   public readonly name: string;
  4.   constructor(name: string) {
  5.     this.name = name;
  6.   }
  7. }
  9. const person = new Person('Dell');
  10. person.name = 'hello';  // 试图修改只读属性，报错！
  11. console.log(person.name);

构造函数

  1. class Person {
  2.   // 传统写法
  3.   // public name: string;
  4.   // constructor(name: string) {
  5.   //   this.name = name;
  6.   // }
  7.   // 简化写法
  8.   constructor(public name: string) {}
  9. }
  10. const person = new Person('dell');  // dell
  11. console.log(person.name);

子类在继承父类时，一定要手动调用父类的构造函数实现实例化

  1. class Person {
  2.   constructor(public name: string) {}
  3. }
  5. class Teacher extends Person {
  6.   constructor(name: string, public age: number) {
  7.     // 使用super()手动调用父类的构造函数
  8.     super(name);  
  9.   }
  10. }
  12. const teacher = new Teacher('yyy', 28);
  13. console.log(teacher.age);  // 28
  14. console.log(teacher.name);  // yyy

getter和setter

  1. // getter and setter
  2. class Person {
  3.   constructor(private _name: string) { }
  4.   // get 
  5.   get name() {
  6.     return this._name + ' lee'; // 返回前可以做一些副作用， 如加密
  7.   }
  8.   // set
  9.   set name(name: string) {
  10.     const realName = name.split(' ')[0];  // 赋值前也可以做一些副作用， 如校验
  11.     this._name = realName;
  12.   }
  13. }
  15. const person = new Person('dell');
  16. console.log(person.name);  // dell lee
  17. person.name = 'dell lee';
  18. console.log(person.name);  // dell lee

使用setter和getter除了可以产生副作用，也可以配合private修饰符实现对类属性的保护，其效果类似与readonly。

小实战：单例模式实现

  2. class SingleCaseDemo {
  3.   // 将创建的单例设置为static属性，且private
  4.   private static instance: SingleCaseDemo;
  6.   // 核心：将constructor设为private!!!
  7.   private constructor(public name: string) {}
  9.   // 对外提供一个getter接口，借此产生副作用，确保实例唯一！
  10.   public static getInstance() {
  11.     if (!this.instance) {
  12.       this.instance = new SingleCaseDemo('yyy');
  13.     }
  14.     return this.instance;
  15.   }
  16. }
  18. const demo1 = SingleCaseDemo.getInstance();
  19. const demo2 = SingleCaseDemo.getInstance();
  20. console.log(demo1.name);
  21. console.log(demo2.name);

抽象类

  1. // 抽象类
  2. abstract class Geometry {
  3.   // 抽象类中能写具体的属性或者方法吗？ 能！
  5.   getType() {
  6.     return 'Geometry';
  7.   }
  9.   // 下面定义了一个抽象方法。这意味着所有继承该类的非抽象子类都要实现该方法。
  10.   abstract getArea(): number;
  11.   abstract name: string;
  12. }
  14. class Circle extends Geometry {
  15.   public name: string; // // 抽象属性具体化（此处name的修饰符要么是public，要么不写）
  16.   public radius: number
  17.   constructor(radius: number) {
  18.     super()  // 即使父类是抽象类，没有构造函数，也得写super()。即：只要是继承，就得叫爸爸
  19.     this.radius = radius
  20.     this.name = 'Circle'
  21.   }
  23.   // 抽象方法具体化（实现抽象方法）
  24.   getArea() {
  25.     return 3.14 * this.radius * this.radius;
  26.   }
  27. }
  29. class Square extends Geometry {
  30.   name: string  // 抽象属性具体化
  31.   public length: number
  32.   public width: number
  33.   constructor(length: number, width: number) {
  34.     super()
  35.     this.name = 'Square'
  36.     this.length = length
  37.     this.width = width
  38.   }
  39.   // 抽象方法具体化（实现抽象方法）
  40.   getArea(): number {
  41.     return this.length * this.width;
  42.   }
  43. }

抽象类可以对类做更高等级的抽象，接口亦是如此：

  1. interface Person {
  2.   name: string;
  3. }
  5. interface Teacher extends Person {
  6.   teachingAge: number;
  7. }
  9. interface Student extends Person {
  10.   age: number;
  11. }
  13. interface Driver {
  14.   name: string;
  15.   age: number;
  16. }
  18. const teacher = {
  19.   name: 'dell',
  20.   teachingAge: 3
  21. };
  23. const student = {
  24.   name: 'lee',
  25.   age: 18
  26. };
  28. const getUserInfo = (user: Person) => {
  29.   console.log(user.name);
  30. };
  32. getUserInfo(teacher);
  33. getUserInfo(student);

那么问题来了，抽象类和接口，有什么区别呢？他们在实战中又担任着什么样的角色呢？慢慢体会吧~