学习typeScript.....

起步

安装TypeScript

1 npm install -g typescript

创建第一个ts文件

1 function greeter(person) {
2   return "Hello, " + person;
3 }
4 
5 let user = "Jane User";
6 
7 document.body.innerHTML = greeter(user);

看起来是不是和我们平时写的javascript没有什么不同?不急,先编译一下看看

编译：

tsc greeter.ts   //后面的greeter.ts是你创建的文件

function greeter(person) {
    return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);

编译后会在同目录下生成一个相同名字的js文件看起来只有行距上的变化，别急。。。

类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。

在这个例子里greeter函数接收一个字符串参数，然后尝试把 greeter的调用改成传入一个数组：

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

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

：string限制了前面person参数的传入类型。

vscode会直接给出报错。相同的，如果传入参数和预计接收的数量不一样也会抛出错误。

此时运行编译会提示error.

接口

使用接口来描述一个拥有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);

同样的：

interface Person {
  firstName: string;
  lastName: Array<string>;
}
function greeter(person: Person) {
  return "Hello, " + person.firstName + person.lastName;
}

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

document.body.innerHTML = greeter(user);

interface描述的对象可以类比为：

var Person ={
  firstName: string;
  lastName: srting;
}
/*
*  Person对象就像是参数一样传入函数
*  可以理解成将person替换为了两个限定了类型的参数
*/
function greeter(person: Person) {
  return "Hello, " + person.firstName + person.lastName;
}
//需要注意user必须为对象。
let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

以上代码只是想象中的，它并不能够运行只是便于理解。

类

TypeScript支持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);

不太懂class类的小伙伴请移步https://www.runoob.com/w3cnote/es6-class.html。

此时再次编译：

发现编译成了ES5的构造函数。此时单看js并没有什么但是需要注意的是：

我们可以看到person下面是firstName和lastName并没有出现middleInitial。如果在interface描述的Person里面添加middleInitial：

class Student {
  fullName: string;
  constructor(public firstName, public lastName, public middleInitial) {//构造器放参数
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
}
interface Person {
  firstName: string;
  lastName: Array<string>;
  middleInitial: string;
}
function greeter(person: Person) {
  return "Hello, " + person.firstName + person.lastName + person.middleInitial;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

运行TypeScript Web应用

创建greeter.html并输入如下内容：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>typeScript</title>
</head>

<body>
  <script src="./greeter.js"></script>
</body>

</html>

运行结果：

好，以上是单纯的使用typeScript，并没有和vue，react，angular等框架联动。

vue最近在加班加点的上线3.0，更好的支持ts写法，笔者也建议尽量熟练地使用ts，有利于团队开发和维护项目。

后续将记录笔者自己在vue项目中使用ts的尝试，有兴趣的小伙伴可以期待一下。

end.

posted on 2021-02-20 14:35 夜有长歌阅读(263) 评论(0) 收藏举报