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运行

相关文章
|
JavaScript IDE 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript 快速入门之环境配置
【HarmonyOS 4.0 应用开发实战】TypeScript 快速入门之环境配置
372 0
|
11月前
|
JavaScript 前端开发 安全
TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
【10月更文挑战第12天】TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
812 0
TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
|
JavaScript 前端开发 数据格式
TypeScript 快速入门
TypeScript 是微软开发和控制的开源项目,我在应用 Anguar 2+ 和 Ionic 2+ 框架开发系统时使用的就是 TypeScript,但我一直把 TypeScript 当作 JavaScript 来用的,甚至是照猫画虎。
1609 0
|
2月前
|
JavaScript 前端开发
揭秘 TypeScript 条件类型:超越简单类型检查
揭秘 TypeScript 条件类型:超越简单类型检查
|
2月前
|
JavaScript 安全 索引
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
|
2月前
|
JavaScript 安全 IDE
TypeScript 类型体操:别让 `any` 毁了你的安全网!
TypeScript 类型体操:别让 `any` 毁了你的安全网!
|
2月前
|
JavaScript 安全 编译器
TypeScript 类型守卫:让你的类型系统更智能
TypeScript 类型守卫:让你的类型系统更智能
|
7月前
|
存储 安全 JavaScript
TypeScript-内置应用程序类型-Recode
通过使用 `Record` 类型,开发者可以显著提升代码的安全性和可维护性。无论是配置对象、字典结构还是动态表单,`Record` 类型都提供了一个简洁、类型安全的解决方案。
310 82
|
11月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
217 0
|
11月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧