Skip to main content

One post tagged with "基础知识"

View All Tags

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还有其他疑问,或者想要了解更多编程知识,记得来找我哦!我们下次再见!👋🎉

ts基础知识5 min read