跳到主要内容

Typescript基础入门

· 阅读需 5 分钟
大黑编程

TypeScript: 你的代码小能手！​

一、开篇​

嘿，你好！今天我们来聊聊TypeScript，这个在程序员圈子里火得就像热锅上的小龙虾一样的东西。为啥这么火？因为它能让JavaScript穿上了西装革履，变得更有条理、更聪明！所以，让我们一起搞懂TypeScript，让你的代码更上一层楼。

二、TypeScript是什么？​

简单来说，TypeScript是JavaScript的超集，它添加了类型系统和一些新特性，让JavaScript变得更强大，更易于维护。想象一下，JavaScript就像是那个随性的艺术家，而TypeScript则是穿着整洁西装的建筑师，更稳重、更有条理。

三、为何选择TypeScript？​

更好的错误检查：拜TypeScript所赐，你可以在编写代码时就发现潜在错误，而不是等到运行时才知道“哎呀，出错了”。 代码更易于理解：类型注解让你的代码就像是在对后来的自己或其他开发者讲故事，清晰明了。 超棒的工具支持：想要智能提示？自动补全？重构？TypeScript全都满足你！

四、开始你的TypeScript之旅​

步骤1：安装​

首先，确保你的电脑上装有Node.js。然后打开终端，运行以下命令：

npm install -g typescript

就这么简单，你就迈出了学习TypeScript的第一步。

步骤2：你的第一个TypeScript程序​

创建一个名为hello.ts的文件，写入下面的代码：

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = '大黑';
console.log(sayHello(user));

这里的关键点是类型注解string，它告诉我们person应该是一个字符串。

步骤3：编译并运行​

回到你的终端，运行：

tsc hello.ts

这会生成一个hello.js文件。接着，运行这个JS文件：

node hello.js

看！你的第一个TypeScript程序已经成功运行了！

五、深入了解​

接下来，我们来深入探讨一下TypeScript的一些基本概念。

类型基础​

TypeScript让我们可以显式声明变量的类型，这就是所谓的静态类型。比如：

let isDone: boolean = false;

这里我们声明了一个名为isDone的布尔型变量。

接口​

接口是TypeScript的核心概念之一。它们让我们可以定义对象的形状，比如：

interface Person {
    name: string;
    age: number;
}

let viking: Person = { name: 'Viking', age: 30 };

类​

TypeScript也支持面向对象编程中的类。看看下面这个例子：

class Animal {
    name: string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

泛型​

泛型提供了一种方式来确保函数、类或接口可以使用任何类型，而不会丢失其原始类型。看看这个例子：

function identity<T>(arg: T): T {
    return arg;
}

这里的<T>就是泛型的标志。

六、TypeScript的“超能力”​

定义类型：你是谁？​

在TypeScript的世界里，一切都得有个身份证。你得告诉TypeScript，这个变量是个啥，它喜欢啥，不喜欢啥。就像下面这样：

let isStudent: boolean = true; // 告诉TypeScript，我是个布尔值！
let age: number = 20;         // 我是数字哦，20岁的小伙子。
let name: string = "大黑";    // 字符串大黑，报道！

这样TypeScript就能知道每个变量的类型，从而确保你不会把苹果放到橘子堆里。

函数参数类型：你要啥？​

在TypeScript里，你还得告诉函数，它的参数是啥类型的。这样函数才不会懵圈，不知道该如何处理。

function greet(name: string) {
    return `Hello, ${name}!`;
}
greet("小明"); // 正确
greet(42);     // 错误：42不是字符串！

可选参数和默认参数：有备无患​

TypeScript的函数参数还可以是可选的，或者有默认值。这样你就不必每次都传递所有参数了。

function createGreeting(message: string, userName: string = "大黑") {
    return `${message}, ${userName}!`;
}

console.log(createGreeting("你好")); // 输出："你好, 大黑!"

接口：定义对象的模板​

在TypeScript中，你可以使用接口来定义一个对象应该具备哪些属性。这就像是建立了一个标准，所有符合这个接口的对象都得遵守这个标准。

interface User {
    name: string;
    age: number;
}

let user: User = { name: "小红", age: 18 };

这样，你就能保证所有的User类型对象都有name和age属性。

泛型：类型的变形金刚​

泛型让你能够写出更灵活、可复用的代码。就像是给函数或者类装上了一个能自适应不同类型的“变形装置”。

function getArray<T>(items : T[] ) : T[] {
    return new Array<T>().concat(items);
}

let numberArray = getArray<number>([5, 10, 15, 20]);
let stringArray = getArray<string>(["小黑", "小白", "小红"]);

枚举：给选项一个名字​

枚举是一种特殊的类型，它可以更清晰地表达一组相关值。

enum Color {
    Red,
    Green,
    Blue
}

let c: Color = Color.Green;

这样，你就可以使用Color.Green来代替神秘的数字了。

七、结语​

好啦，到此为止我们的TypeScript基础入门之旅就告一段落了。记住，编程是个充满乐趣的旅程，尤其是当你开始掌握像TypeScript这样的强大工具时。所以，拿起你的键盘，开始你的代码之旅吧！

希望这篇博客能让你对TypeScript有了更深入的理解。如果你对TypeScript还有其他疑问，或者想要了解更多编程知识，记得来找我哦！我们下次再见！👋🎉

0%