1、静态类型

  1. interface Point {
  2.   x: number;
  3.   y: number;
  4. }
  6. const point: Point = {
  7.   x: 3,
  8.   y: 4
  9. };
  12. // 基础类型, boolean, number, string, void, undfined, symbol, null
  13. const count1: number = 123;
  14. const teacherName: string = 'xiaohong';
  17. // 对象类型
  18. const teacher1: {
  19.   name: string;
  20.   age: number;
  21. } = {
  22.   name: 'xiaohong',
  23.   age: 18
  24. };
  26. // 数组
  27. const numbers: number[] = [1, 2, 3];

2、函数注解和类型推断

  • type annotation 类型注解, 我们来告诉 TS 变量是什么类型
  • type inference 类型推断, TS 会自动的去尝试分析变量的类型
  • 如果 TS 能够自动分析变量类型，我们就什么也不需要做了
  • 如果 TS 无法分析变量类型的话，我们就需要使用类型注解 ```javascript // 自动推断返回值类型 function getTotal1(firstNumber: number, secondNumber: number) { return firstNumber + secondNumber; }

const total = getTotal1(1,2);

// 需要加类型注解 let count: number; count = 123;

// 自动推断为number类型 let countInference = 123;

  1. <a name="vRTo5"></a>
  2. # 3、函数类型
  3. ```javascript
  4. // 有返回值
  5. function add(first: number, second: number): number {
  6.    return first + second;
  7. }
  9. // 无返回值
  10. function sayHello(): void {
  11.   console.log('hello');
  12. }
  14. // never
  15. function errorEmitter(): never {
  16.   while(true) {}
  17. }
  19. // 参数是对象
  20. function add({ first, second }: { first: number; second: number }): number {
  21.   return first + second;
  22. }
  24. // 箭头函数
  25. const getNumber: (param: number) => number = (param: number) => {
  26.   return param;
  27. };
  29. // 箭头函数泛型
  30. const func1: <T>(str: T) => T = <T>(str: T) => {
  31.   return str;
  32. };

4、数组元组

  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. // 元组 tuple
  10. const teacherInfo: [string, string, number] = ['xiaohong', 'male', 18];
  11. const teacherList: [string, string, number][] = [['xiaohong', 'male', 19], ['sun', 'female', 26], ['jeny', 'female', 38]];

5、interface

  1. interface Person {
  2.   // readonly name: string; 只读
  3.   name: string;
  4.   age?: number;
  5.   [propName: string]: any;
  6.   say(): string;
  7. }
  9. const getPersonName = (person: Person): void => {
  10.   console.log(person.name);
  11. };
  13. const person = {
  14.   name: 'xiaohong',
  15.   sex: 'male',
  16.   say() {
  17.     return 'say hello';
  18.   },
  19. };
  21. getPersonName(person);

6、类

  1. // private, protected, public 访问类型
  2. // public 允许我在类的内外被调用
  3. // private 允许在类内被使用
  4. // protected 允许在类内及继承的子类中使用
  6. // 构造函数
  7. class Person {
  8.   // 传统写法
  9.   // public name: string;
  10.   // constructor(name: string) {
  11.   //   this.name = name;
  12.   // }
  13.   // 简化写法
  14.   constructor(public name: string) {}
  15. }
  17. // 继承
  18. class Person {
  19.   constructor(public name: string) {}
  20. }
  22. class Teacher extends Person {
  23.   constructor(public age: number) {
  24.     super('xiaoming');
  25.   }
  26. }
  28. const teacher = new Teacher(28);
  29. console.log(teacher.age);
  30. console.log(teacher.name);

7、抽象类

  1. abstract class Geom {
  2.   width: number;
  3.   getType() {
  4.     return 'Gemo';
  5.   }
  6.   abstract getArea(): number;
  7. }
  9. class Circle extends Geom {
  10.   getArea() {
  11.     return 123;
  12.   }
  13. }
  15. new Circle()

8、枚举

  1. // 默认从0开始
  2. enum Status {
  3.   OFFLINE = 1,
  4.   ONLINE,
  5.   DELETED
  6. }

9、泛型

  1. function join<T, P>(first: T, second: P) {
  2.   return `${first}${second}`;
  3. }
  5. join<number, string>(1, "1");
  6. join(1, "1"); // 可省略
  8. // 箭头函数泛型
  9. const func1: <T>(str: T) => T = <T>(str: T) => {
  10.   return str;
  11. };
  14. // 类泛型
  15. class DataManager<T extends Item> {
  16.   constructor(private data: T[]) {}
  17.   getItem(index: string): T {
  18.     return this.data[index];
  19.   }
  20. }
  22. const data = new DataManager([
  23.   {
  24.     name: "xiaoming",
  25.   },
  26. ]);
  28. data.getItem('name');

10、联合类型

  1. function formatPX(size: number | string) {
  2.   // ...
  3. }
  5. formatPX(13); // ok
  6. formatPX('13'); // ok

11、类型保护

类型保护允许你使用更小范围下的对象类型。

  1. // typeof
  2. function doSome(x: number | string) {
  3.   if (typeof x === 'string') {
  4.     // 在这个块中，TypeScript 知道 `x` 的类型必须是 `string`
  5.     console.log(x.substr(1)); // ok
  6.   }
  8.   x.substr(1); // Error: 无法保证 `x` 是 `string` 类型
  9. }
  11. // instanceof
  12. class Foo {
  13.   foo = 123;
  14.   common = '123';
  15. }
  17. class Bar {
  18.   bar = 123;
  19.   common = '123';
  20. }
  22. function doStuff(arg: Foo | Bar) {
  23.   if (arg instanceof Foo) {
  24.     console.log(arg.foo); // ok
  25.     console.log(arg.bar); // Error
  26.   }
  27.   if (arg instanceof Bar) {
  28.     console.log(arg.foo); // Error
  29.     console.log(arg.bar); // ok
  30.   }
  31. }
  33. doStuff(new Foo());
  34. doStuff(new Bar());
  36. // in
  37. interface A {
  38.   x: number;
  39. }
  41. interface B {
  42.   y: string;
  43. }
  45. function doStuff(q: A | B) {
  46.   if ('x' in q) {
  47.     // q: A
  48.   } else {
  49.     // q: B
  50.   }
  51. }
  53. // 字面量类型保护
  54. type Foo = {
  55.   kind: 'foo'; // 字面量类型
  56.   foo: number;
  57. };
  59. type Bar = {
  60.   kind: 'bar'; // 字面量类型
  61.   bar: number;
  62. };
  64. function doStuff(arg: Foo | Bar) {
  65.   if (arg.kind === 'foo') {
  66.     console.log(arg.foo); // ok
  67.     console.log(arg.bar); // Error
  68.   } else {
  69.     // 一定是 Bar
  70.     console.log(arg.foo); // Error
  71.     console.log(arg.bar); // ok
  72.   }
  73. }