ts 与 js 的区别

  1. ts 是静态类型，js是动态类型；

  2. 类型检查的时机不同

    静态类型检查

  3. 优点

  • 可以做到 early fail，在代码还没有被执行时，系统一旦检测到代码发生类型不匹配，在编译阶段即可发现
  • 大型项目测试调试分支覆盖困难，很多代码并不一定能够在所有条件下执行到，运行前的类型检查是减少bug 的一大手段
  • 对阅读代码是友好的，在团队合作、代码维护和交接中意义不言自明
  • IDE 提供的大量便捷支持和TS本身的语法检查和代码提示自动补全让开发者提高效率，方便重构
  1. 缺点
  • 对小型项目没有太多优势可言
  • 浏览器不支持 typeScript 语法

    搭建 typeScript 运行环境

  1. 安装

    1. npm install -g typescript

  2. 初始化项目

    1. tsc --init

  3. 将 tsconfig.json 中的 "outDir": "./" 注释打开，设置 ts 解析成 js 的输出路径，建议使用 ‘./dist’，否则该文件会报红

    1. "outDir": "./dist",

  4. 新建 demo.ts 文件

    1. var count:number = 100;
    2. console.log(count);

  5. 解析当前目录下的 ts 文件

    1. tsc -w

  6. 自动运行解析后的文件

    1. nodemon ./dist/demo.js

    基础类型

    ```typescript

    数字类型

    var count: number = 100; console.log(count); // 100

字符串类型

var msg: string = ‘hello world’; console.log(msg); // ‘hello world’

布尔类型

let isDone: boolean = false; console.log(isDone); // fasle

对象类型

数组 数字类型的数组

let numArr: number[] = [1, 2, 3]; let arr: Array = [1, 2, 3]; let anyArr: Array = [1, true, 3]; console.log(numArr, arr, anyArr) // [ 1, 2, 3 ] [ 1, 2, 3 ] [ 1, true, 3 ]

对象

let obj: Object = { a: 2, b: 3 } console.log(obj) // { a: 2, b: 3 }

any 任意类型

let aa: any = ‘xxx’; console.log(aa); // ‘xxx’

  1. <a name="JsDgM"></a>
  2. ## 元祖 tuple
  3. ```typescript
  4. # 规定了数组的第一个成员必须为 string 类型，第二个成员必须为 number 类型，否则报错
  5. let x: [string, number];
  6. x = ['hello', 10];
  7. console.log(x);                                        // ['hello', 10]

联合类型

  1. # 规定了 val 变量只能是 string 类型或 number 类型
  2. let val: string | number
  3. val = 12
  4. console.log("数字为 " + val);             // 12
  6. val = "test"
  7. console.log("字符串为 " + val);            // 'test'

接口

  • 此接口跟平时说的后台接口是两码事，定义接口就是对一些属性和方法规定，使用接口时必须遵守这些规定
  • 可以理解为给一个类设定规则, 有什么属性和有什么方法

(4) 应用场景: : vue路由配置可以使用到(后面会给出代码)

(1) IPerson是接口, 定义employee时指定了它的类型是IPerson
(2)加了?代表是可选属性

  1. # 定义接口
  2. interface Person {
  3.   username: string;
  4.   age: number;
  6.   # sex 属性如果使用就必须为 string 或 boolean
  7.   sex?: string | boolean;
  8.   sayHi: () => string;
  9. }
  11. # 使用接口
  12. let zhangsan: Person = {
  13.   username: "狂徒",
  14.   age: 100,
  15.   sex: '男',
  16.   sayHi: (): string => {
  17.     return "Hello!!!";
  18.   },
  19. };
  20. let zhangsan1: Person = {
  21.   username: "狂徒",
  22.   age: 100,
  23.   sex: false,
  24.   sayHi: (): string => {
  25.     return "Hello!!!";
  26.   },
  27. };
  28. let zhangsan2: Person = {
  29.   username: "狂徒",
  30.   age: 100,
  31.   sayHi: (): string => {
  32.     return "Hello!!!";
  33.   },
  34. };
  35. console.log(zhangsan, zhangsan1, zhangsan2);  // 
  36. { username: '狂徒', age: 100, sex: '男', sayHi: [Function: sayHi] } 
  37. { username: '狂徒', age: 100, sex: false, sayHi: [Function: sayHi] } 
  38. { username: '狂徒', age: 100, sayHi: [Function: sayHi] }

函数和函数返回值

  1. # 传入的参数为数字类型，输出的为字符串类型
  2. function add(x: number, y: number): string {
  3.   return x + y + '';
  4. }
  5. console.log(add(1, 2));                        // '3'
  7. # void 规定函数内不能有返回值
  8. function add1(x: number, y: number): void {
  9.   let sum = x + y;
  10.   console.log(sum);                                // 3
  11. }
  12. console.log(add1(1, 2))                        // undefined
  14. # lastName为可选参数
  15. function buildName(firstName: string, lastName?: string): void {
  16.   console.log(firstName, lastName);
  17. }
  18. buildName("hu", 'dsdasdasdsadsadsadd'); // 'hu' 'dsdasdasdsadsadsadd'

泛型

  1. # 输入的是什么类型，返回或输出的就是该类型
  2. function identity<T>(arg: T): T {
  3.   return arg;
  4. }
  5. console.log(identity<string>('ewwe'))            // ewwe
  7. console.log(identity(false));                            // false

类和继承

  1. # 定义类
  2. class Animal {
  3.   name: string;
  4.   constructor(theName: string) {
  5.     this.name = theName;
  6.   };
  7.   move(distanceInMeters: number = 0) {
  8.     console.log(`${this.name} moved ${distanceInMeters}m.`);
  9.   }
  10. }
  12. # 使用类
  13. class Snake extends Animal {
  14.   constructor(name: string) { super(name); }
  15.   move(distanceInMeters = 5) {
  16.     console.log("Slithering...");
  17.     super.move(distanceInMeters);
  18.   }
  19. }
  21. class Horse extends Animal {
  22.   constructor(name: string) { super(name); }
  23.   move(distanceInMeters = 45) {
  24.     console.log("Galloping...");
  25.     super.move(distanceInMeters);
  26.   }
  27. }
  28. let sam = new Snake("Sammy the Python");
  29. let tom: Animal = new Horse("Tommy the Palomino");
  30. sam.move();                                      // 'Slithering...' 'Sammy the Python moved 5m.'
  31. tom.move(34);                                              // 'Galloping...' 'Tommy the Palomino moved 34m.'

枚举

  1. # 如果有初始器，就以初始值处自增，否则从第一个自增
  2. enum Direction {
  3.   Up,
  4.   Down = 5,
  5.   Left,
  6.   Right,
  7. }
  8. console.log(Direction);                    //
  9. {
  10.   '0': 'Up',
  11.   '5': 'Down',
  12.   '6': 'Left',
  13.   '7': 'Right',
  14.   Up: 0,
  15.   Down: 5,
  16.   Left: 6,
  17.   Right: 7
  18. }

混入

  1. # 混入对象1
  2. class Bird {
  3.   canFly: boolean;
  4.   fly() {
  5.     this.canFly = true;
  6.     console.log('I can fly')
  7.   }
  8. }
  9. # 混入对象2
  10. class Fish {
  11.   canSwim: boolean;
  12.   swim() {
  13.     this.canSwim = true;
  14.     console.log('I can swim')
  15.   }
  16. }
  17. # 新对象
  18. class FlyFish implements Bird, Fish {
  19.   constructor() { }
  20.   canFly: boolean = false;
  21.   canSwim: boolean = false;
  22.   fly: () => void;
  23.   swim: () => void;
  24. }
  26. function doMixins(derivedCtor: any, baseCtors: any[]) {
  27.   baseCtors.forEach(baseCtor => {
  28.     Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
  29.       derivedCtor.prototype[name] = baseCtor.prototype[name];
  30.     });
  31.   });
  32. }
  34. doMixins(FlyFish, [Bird, Fish]);
  35. let flyFish = new FlyFish();
  36. console.log(flyFish.canFly);                // false
  37. flyFish.swim();                                            // I can swim

模块导入导出

  • 该部分与 es6 的模块的导入和导出相同，请参考前端模块化 es6 模块化