5分钟上手TypeScript踩坑

前言

最近在学习TypeScript，发现TypeScript的官方文档中的5分钟上手TypeScript辅导教程中会有许多新手可能很难理解的地方，因此记录一下

声明一下我用的版本是

npm install typescript@2.9.2 -g

之后版本可能有所不一样

什么是TypeScript

维基百科上说 “TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集，并添加了可选的静态类型和基于类的面向对象编程。”

从名字上咱们就能够看出 TypeScript 和 JavaScript 不一样的地方就是type，由于 TypeScript 相较于 JavaScript 多了类型检查这一功能，都知道 JavaScript 是一门动态类型、静态做用域的语言，而 TypeScript 的更像变成了一门静态类型的语言

如何运行TypeScript

浏览器只能运行js、html、css语言，那ts要如何运行在浏览器上呢，咱们要记住

浏览器能够运行js
浏览器不能运行ts
要把ts变成js才能够在浏览器上运行
tsc会把ts转化成js

那tsc是什么，如何获取呢，须要咱们学会使用npm，而后安装

npm install -g typescript

就能够获得tsc和ts-node这两个命令了

构建第一个TypesScript文件

在五分钟上手TypeScript的文档中，要求咱们将如下代码输入到greeter.ts文件里

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

由于上面咱们说过浏览器不能运行ts，而document.body.innerHTML又须要咱们在浏览器上运行，因此咱们须要先把ts文件转化成js文件，这样会比较麻烦，因此下面我都建议改为用console.log

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

console.log(greeter(user));

而后

ts-node greeter.ts

能够在终端中直接打出输出结果

类型注解

在上面的代码中，咱们还看不出ts和js的区别，下面对上面的代码进行一个改变

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

console.log(greeter(user));

在参数后加个冒号而后加个类型，这样就至关于给参数加上的了一层禁锢，当你输入的参数并非字符串类型的时候

function greeter(person: string) {
    return "Hello, " + person;
}

let user = 123;

console.log(greeter(user));

进行编译转化成js的时候就会报错，以下

greeter.ts(7,21): error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

这样子你发现错误的时机就从运行到浏览器上阶段提早到了编译阶段

另外值得一提的是若是，参数是undefined，那么类型检查并不会报错，例如

function greeter(person: string) {
  return "Hello, " + person;
}

let user = undefined;

console.log(greeter(user));

运行以后会正确输出

Hello, undefined

接口

学过 java 或者 c# 的人可能会很熟悉这个，就是至关于规定了一个对象必定须要包含几个属性，例如官方文档所给的例子，若是咱们的对象不符合规则少写一个属性

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane"};

console.log(greeter(user));

就会报错

greeter.ts(12,21): error TS2345: Argument of type '{ firstName: string; }' is not assignable to parameter of type 'Person'.
Property 'lastName' is missing in type '{ firstName: string; }'.

但若是咱们多写了属性

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" , m:'ss'};

console.log(greeter(user));

它仍然是能够正常运行的

类

TypeScript 的类的建立有点像 ES6 可是多了一个 public 的关键词，熟悉 java 的同窗可能会知道，可是在ts中这个public的具体是什么做用，在官方文档给的例子中能够看出

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

console.log(greeter(user));

实际上就至关于

class Student {
  fullName: string;
  firstName: string;
  middleInitial: string;
  lastName: string;
  constructor(firstName, middleInitial, lastName) {
    this.firstName = firstName
    this.middleInitial = middleInitial
    this.lastName = lastName
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
}

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

console.log(greeter(user));

后记

以上就是对5分钟上手TypeScript的解读，我也在继续学习当中，ts相较与js更加严格，能够在js运行以前发现错误，代码更不容易出现bug，看得出来是js从动态类型向静态类型的一种转变，可是上面我写的时候也发现，undefined类型并无检查出来，因此可能还在不停完善中，可是不得不认可TypeScript开发会更舒服