关于typescript:TypeScript-从零开始初体验

介绍
● 百度百科介绍

TypeScript 是微软开发的一个开源的编程语言，通过在 JavaScript 的根底上增加动态类型定义构建而成. TypeScript 通过 TypeScript 编译器 或 Babel 转译为 JavaScript 代码，可运行在任何浏览器，任何操作系统

● 看了下面的介绍, 还是不太明确 TypeScript 是什么, 来看上面的例子

例子
○ 一段很简略的 js 代码

// 封装函数, 求两数之和
function and(a, b) {return a + b}

接下来就调用一下试试
const res = and(10, 20)

○ 这么简略的内容, 谁不会, 这玩意会有什么问题 ?

○ 咱们来思考一下, 假如这个函数你在调用的时候

■ 你少传递了一个数字

■ 你传递了一个字符串

■ 会不会呈现问题呢 ?
○ 你可能不禁要问 : 我为什么要少传递一个数字, 为什么要传递字符串呢 ?

○ 可能这个函数略显简略了一些

○ 那么咱们在看一个略微简单一些的代码

var times = ''
function move(ele, target, way) {clearInterval(times)
    times = setInterval(function () {
        var onOff = true
        for (let attr in target) {let now = parseInt(getPos(ele, attr))
            let speed = (target[attr] - now) / 10
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (now == target[attr]) {onOff = true}
            ele.style[attr] = now + speed + 'px';
        }
        for (var tip in target) {if (target[tip] !== parseInt(getPos(ele, tip))) {
                onOff = false;
                break;
            }
        }
        if (onOff) {clearInterval(times);
            way && way();}
    }, 30)
}

这个代码封装的是什么并不重要, 你不必焦急认真看他

○ 接下来就是调用了

○ 好了, 问题呈现了, 怎么解决呢 ?■ 咱们只能是去读一读代码了, 只有把这个代码浏览明确了, 什么都解决了

TS
● 这个时候, TypeScript 就能够排上用场了

● TypeScript

○ 就是在 JS 代码的根底上, 给每一个数据增加了一个数据类型限度

○ 在开发阶段, 能够提醒你某个地位须要一个什么类型的数据

○ 在开发阶段, 当你给出的数据类型不对的时候, 能够及时提醒你的谬误

○ 在开发阶段, 你须要给出的数据少了或者类型谬误, 会有提醒呈现

● 再来看一个 TS 的例子吧

○ 还是一段简略的代码

function and(a: number, b: number): number {return a + b}

看不懂没关系, 临时不须要你看懂, 别看他, 一会再说

○ 接下来看看调用的时候会呈现什么

○ 这就是用 TS 写的一段代码, 咱们会发现, 我都不须要去运行代码, 不须要去查看后果, 在开发过程中, 就能通过编辑器给你提醒出谬误

○ 那么这样的话, 我岂不是能够才开发过程中防止很多谬误, 而且很多时候我多不须要去特意记一些函数的参数类型了, 反正写错了编辑器会给我提醒, 到时候我再看一下谬误提醒不就晓得了

百度百科介绍 TypeScript 是微软开发的一个开源的编程语言，通过在 JavaScript 的根底上增加动态类型定义构建而成. TypeScript 通过 TypeScript 编译器 或 Babel 转译为 JavaScript 代码，可运行在任何浏览器，任何操作系统

初体验
● 说了半天, 接下来, 咱们就写一段 TS 运行起来试试看

装置 TS 编译器
● 浏览器是不能间接运行 TS 代码的, 咱们须要用工具, 把你写好的 TS 代码编译成 JS 代码, 放在浏览器内运行

● 装置 TS 编译器

○ 间接应用 npm 装置全局 ts 工具即可

○ windows
npm install --global typescript

○ MAC
sudo npm install --global typescript

编译 TS 代码
● 接下来书写一段代码, TS 代码写在一个 .ts 后缀的文件内

// index.ts 文件
function sayHi(name) {console.log(`Hello, My name is ${ name}`)
}
sayHi('千锋大前端')

关上命令行开始编译就好了
tsc index.ts

会将 index.ts 文件进行编译, 编译后生成同名 js 文件, index.js

○ 这里咱们临时没有写 ts 的内容, 只是依照 js 的代码在书写

● 每次批改原始 ts 文件, 都须要从新编译一遍, 好麻烦的

● 咱们能够应用 –watch 指令来监控文件变动

tsc --eatch index.ts

○ 会实时监控 index.ts 文件内的变动, 只有代码产生扭转, 会主动进行从新编译

编译 TS 胜利 ? 失败 ?
● 咱们在代码内退出一点 ts 相干的内容, 再来编译试试看

// index.ts 文件
// TS 的含意: 把这个 name 参数限度为只能是 string 类型数据
function sayHi(name: string) {console.log(`Hello, My name is ${ name}`)
}
sayHi('千锋大前端')

○ 执行编译, 咱们发现编译齐全没有问题

● 略微做出一些批改, 咱们再来一次

// index.ts 文件
// TS 的含意: 把这个 name 参数限度为只能是 string 类型数据
function sayHi(name: string) {console.log(`Hello, My name is ${ name}`)
}
sayHi(1024)

○ 仍旧是执行编译, 咱们会发现编译器报错了

○ 会通知咱们, 一个 number 类型的参数不能赋值给 string 类型
○ 这我能了解
○ 然而认真看一下目录内的内容, 我发现, 仍旧失常编译了一个 index.js 文件进去
○ 并且外面代码也是失常的, 没有问题的

我到底是胜利了 ? 还是失败了呢 ?

● 剖析一波

// index.ts 文件
// TS 的含意: 把这个 name 参数限度为只能是 string 类型数据
function sayHi(name: string) {console.log(`Hello, My name is ${ name}`)
}
sayHi(1024)

○ 这段代码在 ts 内解析的含意是限度了 name 这个形参的数据类型必须是 string 类型

○ 次要你传递别的类型的数据, 就会报错, 然而这个类型谬误, 也就是 ts 的谬误

○ 所以在编译的过程中, 会提醒你, 你的类型呈现了谬误

然而

○ 不论你传递的实参是什么, 编译后的 js 代码是这样的

// index.js 文件
function sayHi(name) {console.log(`Hello, My name is ${ name}`)
}
sayHi(1024)

○ 从 js 的角度来看, 这就是一段非法的代码

○ 所以会胜利编译出一个 js 文件

总结
● 当你在书写 ts 的时候, 只有你的语法没有谬误, 就会编译出一个 js 文件

● ts 只是在编译的过程中, 检测 并 提醒 你数据类型是否呈现了谬误

● JavaScript

○ 弱类型脚本语言

○ 对于数据类型没有任何限度

● TypeScript

○ 在 JS 的根底上, 加上了类型限度

○ 也就是一个强类型限度脚本语言, 浏览器不能辨认, 须要编译成 js 来运行

● 百度百科介绍

TypeScript 是微软开发的一个开源的编程语言，通过在 JavaScript 的根底上增加动态类型定义构建而成. TypeScript 通过 TypeScript 编译器 或 Babel 转译为 JavaScript 代码，可运行在任何浏览器，任何操作系统