Vue开发者的Typescript介绍在过去的几年中，TypeScript已经在JavaScript世界中获得了令人瞩目

在过去的几年中，TypeScript已经在JavaScript世界中获得了令人瞩目的地位。这是由于它给JavaScript语言带来的类型安全。TypeScript带来了更安全、更可预测的代码库和规模化的应用，并通过扩展的IDE功能（如更智能的自动完成和错误检测）来改善开发者的体验。

TypeScript有很多值得喜爱的地方，但有很多开发者还没有采取这种做法。如果你一直在考虑这样做，那么现在绝对是时候了!

为什么现在学习TypeScript？

最新版本的 Vue 3 是用 TypeScript 编写的。
它是一种日益流行和使用的技术
它有一些明显的优势，特别是对于大型JavaScript项目而言
最后，Vue学校刚刚发布了一个很棒的新TypeScript基础课程，可以让你开始学习

现在就免费查看介绍性课程，并继续阅读，以预览你可以从课程中学习到的其他一些很酷的东西!

好吧，学习TypeScript的基础知识听起来是不是很兴奋？当然了!那么，下面是您可以学习的一些材料的概要。

静态类型化

TypeScript的核心是静态类型的概念。它是使该语言如此强大的原因。但它是什么呢？也许理解静态类型的最佳方式是首先理解正常的JavaScript如何工作。在普通的JS中，我们可以创建一个变量，给它一个类型为number 的值。

let price = 24 //number

然后在程序的过程中，我们可以随时改变该变量为任何其他类型。

let price = 24 //number

// ooh that could cause issues
price = "24" //string

// that could be even worse!
price = null //null

// what??
price = "2 goats and a pidgeon" //string

但在TypeScript中，这些鬼把戏都是不可能的。

screenshot of typescript errors

隐式和显式类型

在上面的例子中，TypeScript已经隐式（或自动）将价格的类型设置为number ，因此价格永远不会是数字以外的任何东西。除了隐式类型，我们还可以用特殊的TypeScript语法声明显式类型。它看起来像这样。

let price: number = 24

这不仅对变量声明有用，而且对函数也有用。

function sum(x: number, y: number): number{
    return x + y
}

注意，我们可以描述每个参数（x和y）是什么类型，甚至函数返回的类型。

联合类型

像这样的简单类型是非常好的，涵盖了大量的用例，然而有时对我们的变量、函数参数和函数返回的类型进行更灵活的处理是非常有用的。这就是联合类型的作用。它们允许我们明确说明某物可以合法地成为一个以上的类型。

let booleanOrString: boolean | string = 'I could change'
// TypeScript is ok with this
booleanOrString = true

字面类型

TypeScript中的另一种类型（我可以这么说吗......我想我会的）是字面类型。通过字面类型，我们不仅可以将变量定义为一般类型，如字符串或数字，而且可以将其类型定义为字面值。

let pi: 3.14 = 3.14

注意冒号后面的3.14 。这就是字面类型。它限制了TypeScript只让π成为3.14，这使得我们在等号后将其指定为3.14。

然而，这可以在没有文字类型的情况下更容易和更清楚地完成，用一个好的'const 。

const pi = 3.14

但字面意义最强大的用途之一，是与联合类型相结合。

function setProductSize(size: 'small' | 'medium' | 'large' ){
    //...
}

在setProductSize 函数中，我们使用字面类型small,medium, 和large 来限制尺寸参数接受的可能性。哦，现在这很有趣

接口

此外，TypeScript允许我们通过使用接口来描述对象和/或类来超越描述基本数据类型。通过接口，我们可以定义对象的形状，这样开发者和他们的IDE就可以清楚地知道这些对象必须、可能和不应该包含哪些属性和方法。

interface Product {
    name: string,
    price: number,
        color?: string, // ? makes optional
    buy(): void // method that must return nothing
}

// if tshirt didn't have a name, price, and buy method
// then TypeScript would mark it as an error
const tshirt: Product = {
    name: 'T-Shirt Design A',
    price: 12,
    color: 'blue',
    buy:()=>{
        console.log('bought!')
    }
}

正如你所期望的，使用接口可以改变你的企业级项目的可扩展性和/或你的开源项目的API的可视性。

还有更多!

如果这些话题引起了你的兴趣，让我告诉你，这只是TypeScript基础知识的表面现象！所有这些概念和更多的内容都会被解释。