TypeScript 简单快速上手

2024-02-08 16:25:16

介绍:

TypeScript 是一种有微软开发的*和开源的编程语言，是JavaScript的超集.
TypeScript拓展了JavaScript的语法，所以任何现有的JavaScript程序可以直接在TypeScript下工作,TypeScript是为大型应用开发而设计的，生产过程中可以保证安全性和兼容性.
总之,就是极大的方便了我们的生产和开发的过程,提升效率.

流程:

1.安装
有两种主要的方式来获取TypeScript工具：
通过npm（Node.js包管理器）
安装Visual Studio的TypeScript插件
Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。如果你的Visual Studio还没有安装TypeScript，你可以下载它。
然后我们可以通过npm来下载它,只需要输入

npm install -g typescript

就可以下载下来了
如何判断是否下载在完成了呢?
判断node.js可以输入

node-v

然后判断我们的typescript可以输入

tsc

如果出现

则代表了我们成功安装了上去.那么我们的安装就完成了

2.构建第一个typescript文件
我们可以创建一个demo文件夹,然后在这个文件夹中新建一个ts文件输入

function jspang(){
    let web: string ="hello world"
    console.log(web)
}
jspang()

那么我们如何查看呢?

注意:我们都要把这个ts文件转为js文件

1.在npm或者终端中输入
在命令行上，运行TypeScript编译器

tsc greeter.ts

输出结果为一个greeter.js文件，它包含了和输入文件中相同的JavsScript代码。一切准备就绪，我们可以运行这个使用TypeScript写的JavaScript应用了！
2.则是安装

 npm install -g ts-node

这个方法安装完成后就不需要使用tsc 了,直接使用 ts-node 文件名就可以了,也不会生成新的js文件.

3.类型注解
TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。在这个例子里，我们希望 greeter函数接收一个字符串参数。然后尝试把 greeter的调用改成传入一个数组：

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

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

重新编译，你会看到产生了一个错误。

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

类似地，尝试删除greeter调用的所有参数。 TypeScript会告诉你使用了非期望个数的参数调用了这个函数。在这两种情况中，TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。

要注意的是尽管有错误，greeter.js文件还是被创建了。就算你的代码里有错误，你仍然可以使用TypeScript。但在这种情况下，TypeScript会警告你代码可能不会按预期执行。

这些就叫做类型注解,在系统不能解析的情况下,我们要手动的给他限制类型,

5.类型推断
而类型推断则是系统能够推断出来,这种情况下就不需要限制类型了.

let a = 1;
let b = 2;
let c = a + b

这种情况下的系统是能够推断出来类型的,所以就不需要类型注解了.

5.接口
这里我们使用接口来描述一个拥有firstName和lastName字段的对象。在TypeScript里，只在两个类型内部的结构兼容那么这两个类型就是兼容的。这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements语句。

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

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

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

document.body.innerHTML = greeter(user);

6.类
ypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程。

让我们创建一个Student类，它带有一个构造函数和一些公共字段。注意类和接口可以一起共作，程序员可以自行决定抽象的级别。

还要注意的是，在构造函数的参数上使用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");

document.body.innerHTML = greeter(user);

重新运行tsc greeter.ts，你会看到生成的JavaScript代码和原先的一样。 TypeScript里的类只是JavaScript里常用的基于原型面向对象编程的简写。

7.运行TypeScript Web应用
在greeter.html里输入如下内容

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

在浏览器里打开greeter.html运行这个应用！

可选地：在Visual Studio里打开greeter.ts或者把代码复制到TypeScript playground。将鼠标悬停在标识符上查看它们的类型。注意在某些情况下它们的类型可以被自动地推断出来。重新输入一下最后一行代码，看一下自动补全列表和参数列表，它们会根据DOM元素类型而变化。将光标放在 greeter函数上，点击F12可以跟踪到它的定义。还有一点，你可以右键点击标识，使用重构功能来重命名。

总结:

TypeScript 是一种有微软开发的*和开源的编程语言，是JavaScript的超集.
TypeScript拓展了JavaScript的语法，所以任何现有的JavaScript程序可以直接在TypeScript下工作,TypeScript是为大型应用开发而设计的，生产过程中可以保证安全性和兼容性.
我们可以先简单的上手它
首先要安装
有两种主要的方式来获取TypeScript工具：
通过npm（Node.js包管理器）
安装Visual Studio的TypeScript插件
然后是环境配置
一种是tsc 来使用,这种会创建一个js文件
另外一种是安装 npm install -g ts-node
这个方法安装完成后就不需要使用tsc 了,直接使用 ts-node 文件名就可以了,也不会生成新的js文件.
特点：
1、类型批注和编译时的类型检查(声明变量 var a:number)
2、强类型语言
3、面向对象
4、类class
5、接口
6、lambda函数

总结注意点:

在使用ts文件中最终我们都要把这个ts文件转为js文件
类中在构造函数的参数上使用public等同于创建了同名的成员变量。

好了,当我们学会这些内容后,就已经可以简单的上手typescript了,我们下期再见

码农公寓

介绍:

流程:

总结:

总结注意点:

相关文章