typescript快速入门

简介: typescript快速入门

在原则产问题上,要坚定如磐石;在兴趣问题上,则要顺应潮流。——美国

官方文档:https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

中文文档:https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

下载VScodehttps://visualstudio.microsoft.com/zh-hans/

安装后打开

新建文件

选择语言

写下代码

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

顺手安个中文

重启后,我们打开控制台

image-20211220215159856.png

然后安装typescript

cnpm install -g typescript

编译ts文件:

tsc D:\file\projects\hello-typescript\hello-typescript.ts

我们打开目录:

信任项目,然后可以看到我们编译后的js

看到和ts一模一样,这说明js代码在ts中是支持的

typescript的一大特性就是它是强类型语言,例如下面这段代码:

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

我们编译一下,可以看到我们这里指定了personstring类型,我们传入了字符串Jane User,确实可以成功编译,那我们试试传入一个数组呢?

function greeter(person: string) {
    return "Hello, " + person;
}
let user = [0, 1, 2];
document.body.innerHTML = greeter(user);

可以看到报了一个错

提示类型错误

但我们的ts还是成功被编译了,所以就算你的代码里有错误,你仍然可以使用TypeScript

下面试试接口

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

因此我们需要传入Person结构的对象,当然我们也可以用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);

我们可以在构造参数的变量上加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);

我们可以把它编译后的js引入到一个html中运行,或者直接使用vscode运行

相关文章
|
8月前
|
JavaScript IDE 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript 快速入门之环境配置
【HarmonyOS 4.0 应用开发实战】TypeScript 快速入门之环境配置
243 0
|
3月前
|
JavaScript 前端开发 安全
TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
【10月更文挑战第12天】TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
192 0
TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
|
JavaScript 前端开发 数据格式
TypeScript 快速入门
TypeScript 是微软开发和控制的开源项目,我在应用 Anguar 2+ 和 Ionic 2+ 框架开发系统时使用的就是 TypeScript,但我一直把 TypeScript 当作 JavaScript 来用的,甚至是照猫画虎。
1547 0
|
4月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
56 1
typeScript进阶(9)_type类型别名
|
3月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
75 0
|
3月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
4月前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
65 0
|
4月前
|
JavaScript
typeScript进阶(10)_字符串字面量类型
本文介绍了TypeScript中的字符串字面量类型,这种类型用来限制变量只能是某些特定的字符串字面量。通过使用`type`关键字声明,可以确保变量的值限定在预定义的字符串字面量集合中。文章通过示例代码展示了如何声明和使用字符串字面量类型,并说明了它在函数默认参数中的应用。
52 0
|
2月前
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
58 6
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
53 2

热门文章

最新文章