TypeScript简介 TypeScript是什么

快速入门

笔者没有开发web的经验,对javascript也没有学过,新项目,直接用TypeScript,前半部分提供给和笔者一样,需要快速进入项目的小伙伴。分割线之后,是笔者copy的觉得还不错的文章,供想深入了解的人参考。

一.TypeScript的优点

TypeScript 相比于 JavaScript 具有以下优势:

  • 更好的可维护性和可读性
  • 引入了静态类型声明,不需要太多的注释和文档,大部分的函数看类型定义就知道如何使用了
  • 在编译阶段就能发现大部分因为变量类型导致的错误
  • ...

二.安装

npm install typescript -g

三.使用

直接像写javascript一样去写,初始化的时候,需要指定类型名,没有指定时,编译会出错,有提示。所以,不了解的话,就直接写javascript的代码,报错了再改。多遇到几次错误,大抵也就明白了些。

//初始化变量的时候,需要指定类型
const ary = [] 
const data = {}

//para必须指定类型,否则会报错。
function testFunc(para: any) {
  .....
}

另外,使用TypeScript开发时,文件后缀要用tsx。传统js和jsx与ts和tsx的区别

四. JavaScript项目迁移

如何你是现有项目,想该用TypeScript,那么你需要整体迁移

===============================这里是分割线==========================
原文链接

前言

最近开始用 TypeScript 来写项目,写起来还是挺顺畅的。其实学习 TypeScript,看它的官方文档就够了,剩下就是 coding 了。这里主要是我在 TypeScript 学习过程中记录的一些东西~

什么是 TypeScript

TypeScript 也被称作 AnyScript,因为你在 coding 的时候会给每个变量设一个 any 的类型。

咳咳,开玩笑开玩笑,可别真的让每个变量都是 any,会被疯狂吐槽的。

TypeScript 是微软开发一款开源的编程语言,它是 JavaScript 的一个超集,本质上是为 JavaScript 增加了静态类型声明。任何的 JavaScript 代码都可以在其中使用,不会有任何问题。TypeScript 最终也会被编译成 JavaScript,使其在浏览器、Node 中等环境中使用。

Typescript 和 JavaScript 在类型上的区别

JavaScript 被称作是一种动态脚本语言,其中有一个被疯狂诟病的特性:缺乏静态强类型。我们看一下下面的代码:

function init() {
    var a = 'axuebin';
    console.log('a: ', a); // a: axuebin
    a = 1;
    console.log('a: ', a); // a: 1
}
复制代码

当我们执行 init 函数的时候,会先声明一个 a 变量,然后给 a 变量赋了一个 axuebin,这时候我们知道 a 是一个字符串。然后这时候我们希望 a 变成 1,就直接 a = 1 了。当然,这是可以的,此时 a 变量的类型已经发生改变:字符串 => 数字。这在很多人看来是难以接受的事情,明明初始化 a 的时候是一个字符串类型,之后 a 的类型居然变成数字类型了,这太糟糕了。

如果在 Java 中,会是这样:

class HelloWorld {
    public static void main(String[] args) {
        String a = "axuebin";
        System.out.printf("a: %s", a);
        a = 1;
        System.out.printf("a: %d", a);
    }
}

// HelloWorld.java:4: error: incompatible types: int cannot be converted to String
复制代码

Java 中根本就没办法让 a = 1,会直接导致报错,在编译阶段就断绝你的一切念想。年轻人,别想太多,好好写代码。

这时候就会想,如果 JavaScript 也有类型该有多好啊,是吧。

看看 TypeScript 中是怎么样的:

function init() {
    var a: string = 'axuebin';
    console.log('a: ', a); 
    a = 1;
    console.log('a: ', a);
}

// Type '1' is not assignable to type 'string'.
复制代码

我们把变量 a 设为 string 类型,后面给 a 赋值 1 的时候就报错了,同样是在编译阶段就过不了。

为什么选择 TypeScript

我们来想想在日常的业务开发中是否有遇到以下的情况:

  • 协同开发时,你需要调用一个其他人写的函数,但是那个函数里变量命名和管理特别混乱,并且没有写任何的注释,为了搞清楚函数的参数类型以及用法,你只能硬着头皮读函数的具体代码。
  • 你突然看到项目里自己半年前甚至一年前的一个函数,这写的什么鬼啊,简直没法看,强迫症的你想着重构。然后你就大刀阔斧的改造了一把,甚至对入参都进行了改造,嗯,终于满意了。突然发现不对啊,还得搜了一下哪里调用了这个函数,得保证调用成功啊。
  • ...

是不是超级超级超级不爽。归根结底这还是因为 JavaScript 是一门动态弱类型脚本语言。

你想想,如果每个变量都被约定了类型,并且构建了变量声明和变量调用之间的联系,只要有一处地方发生了改变,其它地方都会被通知到,这该有多美好。

JavaScript 淡化了类型的概念,但是作为一名开发者,我们必须要牢记类型概念,养成良好的编程习惯。

TypeScript 的优点

TypeScript 相比于 JavaScript 具有以下优势:

  • 更好的可维护性和可读性
  • 引入了静态类型声明,不需要太多的注释和文档,大部分的函数看类型定义就知道如何使用了
  • 在编译阶段就能发现大部分因为变量类型导致的错误
  • ...

TypeScript 是不是能难

有的童鞋可能会觉得,JavaScript 都还没学清楚,又得学一门新的编程语言,还没接触 TypeScript 就已经无形中有了抵触心理。对于这些童鞋,需要知道的是 TypeScriptJavaScript 的超集,与现存的 JavaScript 代码有非常高的兼容性。

如果一个集合S2中的每一个元素都在集合S1中,且集合S1中可能包含S2中没有的元素,则集合S1就是S2的一个超集。

也就是说,TypeScript 包含了 JavaScriptall,即使是仅仅将 .js 改成 .ts,不修改任何的代码都可以运行。

所以说,完全可以先上手再学习,渐进式地搞定 TypeScript,不用担心门槛高的问题。

如果还有顾虑,可以在 www.typescriptlang.org/play/ 上先体验一下 TypeScript 带来的快感。

TypeScript 的困难

当然,上手 TypeScript 也会有一些困难,会让刚开始学习 TypeScript 的童鞋感觉太复杂了,不熟悉的情况下很可能会增加开发成本:

  • 类型定义:对于每一个变量都需要定义它的类型,特别是对于一个对象而言,可能需要定义多层类型(这也是为什么会出现 AnyScript 的原因。。。)
  • 引用三方类库:第三方库如果不是 TypeScript 写的,没有提供声明文件,就需要去为第三方库编写声明文件
  • 新概念:TypeScript 中引入的类型(Types)、类(Classes)、泛型(Generics)、接口(Interfaces)以及枚举(Enums),这些概念如果之前没有接触过强类型语言的话,就需要增加一些学习成本

不过,不要被吓退了!

重要的事情要说三遍。

不要被吓退了!!

不要被吓退了!!!

这些只是短期的,当克服这些困难后,就会如鱼得水,一切看上去都是那么的自然。

安装 TypeScript

首先你需要有 Nodenpm,这个不用多说了。

在控制台运行一下命令:

npm install typescript -g
复制代码

这条命令会在全局安装 typescript,并且安装 tsc 命令,运行以下命令可以查看当前版本(确认安装成功):

tsc -v
// Version 3.2.2
复制代码

然后我们就新建一个名为 index.ts 的文件,然后敲入简单点的代码:

// index.ts
const msg: string = 'Hello TypeScript';
复制代码

代码编写好就可以执行编译,可以运行 tsc 命令,让 ts 文件变成可在浏览器中运行的 js 文件:

tsc index.ts
复制代码

如果你的代码不合法,执行 tsc 的时候就会报错,根据错误进行对应的修改即可。

Hello TypeScript

我们看一个稍微完整点的例子吧。

这是一个 ts 文件,声明了一个 sayHello 函数:

  • 函数有一个入参:string 类型的 name
  • 函数有一个返回值:string 类型的 Hello ${name}
// index.ts
function sayHello(name: string): string {
    return `Hello ${name}`;
}

const me: string = 'axuebin';
console.log(sayHello(me))
复制代码

我们执行 tsc index.ts 编译一下,在同级文件夹下生成了一个新的文件 index.js

function sayHello(name) {
    return "Hello " + name;
}
var me = 'axuebin';
console.log(sayHello(me));
复制代码

我们发现我们写的 TypeScript 代码在编译后都消失了。因为 TypeScript 只会进行静态检查,如果代码有问题,在编译阶段就会报错。

我们修改一下 index.ts ,模拟一下出错的情况:

function sayHello(name: string): string {
    return `Hello ${name}`;
}

const count: number = 1000;
console.log(sayHello(count))
复制代码

我们向 sayHello 传递一个 number 类型的参数,试试 tsc 一下:

index.ts:6:22 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
复制代码

命令行就会报上面的错误,意思是不能给一个 string 类型的参数传递一个 number 类型。

但是,这里要注意的是,即使报错了,tsc 还是会将编译进行到底,还是会生成一个 index.js 文件:

function sayHello(name) {
    return "Hello " + name;
}
var count = 1000;
console.log(sayHello(count));
复制代码

看上去也就是没啥毛病的 js 代码。

如果编译失败就不生成 js 文件,之后可以在配置中关闭这个功能。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,874评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,102评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,676评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,911评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,937评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,935评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,860评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,660评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,113评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,363评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,506评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,238评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,861评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,486评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,674评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,513评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,426评论 2 352

推荐阅读更多精彩内容