为vue3学点typescript(1), 体验typescript

看了vue conf 2019的视频, 特别兴奋, vue3要来了! vue3是用typescript开发的, 我揣测在vue的带领下typescript会成为主流呢, 要不先学点.19年最酷的前端技术我是19年初开始使用的typescript, 自从开始用上了就喜欢上了, 真的爱不释手, 最爱他几点:

1. 很多小错误比如: 对象的字段不存在或者字段名字拼写错误, 编辑器会在写代码的时候就提示你, 降低出低级错误的几率.
2. 标注了类型的变量, 使用的时候编辑器都会列出变量上的方法和属性, 开发体验更舒服.
3. 很多大神的项目都用typescript开发, 看源码的时候因为有了类型标注, 更容易理解.
4. 让自己写的代码看起来很厉害的样子 .

类型写错了, 也会提示:动手开始, 安装

1. 安装nodejs
2. 在命令行运行npm i -g typescript, 安装编译器到全局.
3. 安装vscode编辑器.

开始写代码生成js

1. 建立一个文件夹, 在里面新建一个hello.ts文件, 注意扩展名是ts.
2. 用vscode打开hello.ts文件.
3. 输入如下代码, 让我们体验下ts:

interface A {a:number,b:string}let obj:A = {a:123,b:'456'};

1. 命令行进入文件夹, 执行命令

npx tsc hello.ts好了我们可以看下文件内部多了一个hello.js, 打开看看:

var

obj

=

{

a

:

123

,

b

:

'456'

};

代码中的"类型注解"不见了 ,我们的ts被编译成js了, 是不是很神奇.错误提示interface A {a:number,b:string}// 错误, 会提示b的类型错误, 应该为string类型let obj:A = {a:123,b:456};any类型any代表任意类型, 这个类型特别适合ts新手, 初期有些类型不知道如何表达, 我们就可以暂时使用any表达, 等熟练ts后再标注精准的类型.下面的情况新手可能就不会了, 以为n标记为number, 但是循环中i大于5的时候就是字符串了, 所以ts就会提示错误.let n:number;for {if n = 10;else n = '100';}// ts提示: 不能将类型“"100"”分配给类型“number”作为新手如果初期你不知道"联合类型"这个概念, 你就可以直接把n标记为any:// 熟练后会是这么标记的 // let n:string|numberlet n:any;for {if n = 10;else n = '100';}总结19年ts一定大火, 请大家放心学ts吧, 初期开发可以先用any体验ts, 慢慢学习1个月左右其实就可以实战了, 这篇后我也会在本月陆续更新完本typescript的教程, 保证大家在一个月内学会.