TS速成计划-TS初体验

初次与TS的碰面

虽然wo JS学的一般般,但不代表我TS不行哈

我于是嗷就开始鼓捣TS主要是大一直给我推荐我看得心痒痒

现在我就可以开始学习TS

1. TS的安装

npm install -g typescript

在控制台输入:image-20211205225148379

image-20211205225129111

2. TS基本操作

  1. 查看ts版本
tsc -v

image-20211205225308081

  1. 编译ts文件

像这样

tsc XXX.ts

image-20211205225412319

3. 小小案例

我是个菜鸡,但是别喷,我这就搞个小案例出来

3.1 HTMl页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TS第一个测试文件</title>
</head>
<body>
<script src="test.js"></script>

</body>
</html>

3.2 TS:

function user(he){
    return "hello,you are the best"+he

}
let use="aFang"
document.body.innerHTML=user(use)

3.3 编译TS文件

cd到当前目录下:

image-20211205234428075

然后我们迅速的输入:

tsc test.ts

编译完成后我们可以看到他生成了一个新文件

image-20211205234726711

3.4 运行

这次再运行一下:

image-20211205235416348

先到这里结束;

请关注我,下一期我会带领大家学习一个TS+Vue的小案例!

TypeScript 是一种静态类型、弱类型的编程语言,它是 JavaScript 的超集,并且添加了可选的类型系统。这意味着 TypeScript 代码可以包含类型注解,这些注解帮助开发者在开发过程中捕获潜在错误并提高代码质量[^1]。TypeScript 编译器会将带有类型信息的 TypeScript 代码转换成纯 JavaScript,这样它就可以运行在任何支持 JavaScript 的环境中。 ### 安装与配置 要开始使用 TypeScript,首先需要安装 TypeScript 编译器。可以通过 npm(Node.js 包管理器)来全局安装 TypeScript: ```bash npm install -g typescript ``` 此外,如果想要直接运行 `.ts` 文件而无需预先编译为 JavaScript,可以安装 `ts-node` 工具: ```bash npm install -g ts-node ``` 然后可以直接通过如下命令运行 TypeScript 文件: ```bash ts-node yourfile.ts ``` 对于编辑器的选择,Visual Studio Code 是一个非常流行的选择,因为它内置了对 TypeScript 的优秀支持,包括智能感知、即时错误检测以及重构工具等特性[^1]。 ### 基本类型 TypeScript 支持多种基本数据类型,如布尔值、数字、字符串、数组和元组等。例如: ```typescript let isDone: boolean = false; let count: number = 5; let name: string = "Alice"; let list: number[] = [1, 2, 3]; let tuple: [string, number] = ["hello", 10]; // 元组类型允许表示一个已知元素数量和类型的数组 ``` ### 接口与类 接口是定义对象形状的一种方式,它可以指定一个类必须遵循的结构,但不提供具体实现。比如: ```typescript interface Person { name: string; age: number; } function greet(person: Person) { console.log(`Hello, my name is ${person.name} and I am ${person.age} years old.`); } ``` 这里 `Person` 接口确保了传递给 `greet` 函数的对象具有 `name` 和 `age` 属性[^5]。 ### 泛型 泛型允许创建可重用的组件,它们能够处理各种类型的数据而不局限于单一类型。下面是一个简单的泛型函数示例: ```typescript function getFirstElement<T>(array: T[]): T { return array[0]; } let numbers = [1, 2, 3]; let firstNumber = getFirstElement(numbers); // 正确地推断出返回值类型为 number let letters = ['a', 'b', 'c']; let firstLetter = getFirstElement(letters); // 正确地推断出返回值类型为 string ``` 此泛型函数 `getFirstElement` 可以接受任意类型的数组,并安全地返回第一个元素及其正确的类型[^4]。 ### 高级语法特性 TypeScript 团队推动了许多新的 ECMAScript 特性的发展,其中包括可选链操作符 (`?.`)、空值合并操作符 (`??`) 等,这些都是为了简化异步或可能缺失的数据访问模式[^2]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值