资讯专栏INFORMATION COLUMN

5分钟上手TypeScript踩坑

array_huang / 1932人阅读

摘要:前言最近在学习,发现的官方文档中的分钟上手辅导教程中会有许多新手可能很难理解的地方,所以记录一下声明一下我用的版本是以后版本可能有所不同什么是维基百科上说是一种由微软开发的自由和开源的编程语言。

前言

最近在学习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开发会更舒服

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99513.html

相关文章

  • Vue + TypeScript + Element 项目实践(简洁时尚博客网站)及踩坑

    摘要:前言本文讲解如何在项目中使用来搭建并开发项目,并在此过程中踩过的坑。具有类型系统,且是的超集,在年势头迅猛,可谓遍地开花。年将会更加普及,能够熟练掌握,并使用开发过项目,将更加成为前端开发者的优势。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言 本文讲解如何在 Vue 项目中使用 TypeScript...

    luckyyulin 评论0 收藏0
  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0
  • vscode-eslint的踩坑实践--typescript无法格式化

    摘要:的踩坑实践无法格式化引言最近开发的前端项目随着开发的人员越来越多,代码规范已经是一个很难避免的问题了,虽然百度有这个规则检查,但是不论是或者是项目本地都没有配置或检查,完全靠自觉,这是件非常扯淡的事。 vscode-eslint的踩坑实践--typescript无法格式化 引言 最近开发的前端项目随着开发的人员越来越多,代码规范已经是一个很难避免的问题了,虽然百度有fecs这个规则检查...

    harryhappy 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<