TypeScript入门介绍

typescript · 浏览次数 : 0

小编点评

## TypeScript入门介绍 **1.1 TypeScript 是什么?** TypeScript 是 JavaScript 的一个超集,它提供静态类型检查,使 JavaScript 代码更易于理解和维护。 **1.2 TypeScript 的历史和发展** * 2012年,Anders Hejlsberg 在微软开发 TypeScript。 * TypeScript 最初用于内部项目开发,后来逐渐向前端开发领域扩展。 **1.3 TypeScript 与 JavaScript 的关系** * TypeScript 是 JavaScript 的超集,这意味着所有 JavaScript 代码都可以运行在 TypeScript 中。 * TypeScript 还提供了额外的语法和功能,例如类型注释、接口等。 **1.4 为什么选择 TypeScript?** * 静态类型检查可以帮助发现代码中的语法错误和逻辑错误,提高代码质量。 * 更好的代码提示和自动补全可以提高开发效率。 * 更好的代码组织和维护性可以使代码更易于维护。 **1.5 TypeScript 的优势与劣势** **优势:** * 静态类型检查 * 更好的代码提示和自动补全 * 更好的代码组织和维护性 **劣势:** * 学习曲线较陡 * 需要安装 Node.js **1.6 TypeScript 的应用场景** * Web 应用 * Node.js 应用 * 移动应用 * 桌面应用 **1.7 项目开发工具环境依赖** * Node.js * VS Code * Webpack * Rollup * Vite **2. 构建工具/工程化步骤汇总** 1. 安装 vs code 2. npm install -g typescript 3. 运行 `tsc hello.ts` 或自动编译任务 4. 添加调试 `ts-node` 和 `ts-debug` 扩展 5. 创建 `tsconfig.json` 配置文件 6. 在 VS 中运行 `ts` 命令监控编译过程 **3. 示例代码** **01hello.ts** ```typescript function sayHello(person: string): string { return `hello ${person}`; } let user: string = 'Tom'; let r = sayHello(user); console.log(r); ```

正文

TypeScript入门介绍

什么是 TypeScript?

1.1 TypeScript 是由微软开发的一种开源的编程语言。它是 JavaScript 的一个超集,通过为 JavaScript 提供静态类型检查,增加了代码的可读性和可维护性

发展历史

1.2 TypeScript 的历史和发展

TypeScript 最初由 Anders Hejlsberg 在微软开发,并于2012年首次发布。它的发展一直得到社区的积极支持,逐渐成为前端开发的主流选择。

1.3 TypeScript 与 JavaScript 的关系
TypeScript 是 JavaScript 的超集,意味着所有的 JavaScript 代码都可以在 TypeScript 中运行,同时 TypeScript 还提供了额外的语法和功能。

优缺点

1.4 为什么选择 TypeScript?

选择 TypeScript 的主要原因包括:静态类型检查、更好的代码提示和自动补全、更好的代码组织和维护性、更好的开发体验等。

1.5 TypeScript 的优势与劣势
TypeScript 的优势包括类型安全、智能代码提示、更好的代码组织结构等;劣势可能包括学习曲线较陡等。

应用场景

1.6 TypeScript 的应用领域

TypeScript 可以用于开发各种类型的应用程序,包括 Web 应用、Node.js 应用、移动应用、桌面应用等

开发工具

环境依赖

Node.js: TypeScript 编译器是基于 Node.js 构建的,因此需要先安装 Node.js。你可以从 Node.js 官方网站 https://nodejs.org/ 下载并安装适合你操作系统的 Node.js 版本。

npm install -g typescript

编程IDE

多种主流编辑器如Visual Studio Code、Sublime Text、Atom等都对 TypeScript 提供了良好的支持。

vs调试

launch.json

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "ts-node",
            "type": "node",
            "request": "launch",
            "args": [
                "${relativeFile}"
            ],
            "runtimeArgs": [
                "-r",
                "ts-node/register"
            ],
            "cwd": "${workspaceRoot}",
            "protocol": "inspector",
            "internalConsoleOptions": "openOnSessionStart"
        }
    ]
}

构建工具/工程化

构建工具: 在实际项目中,通常会使用一些构建工具来处理 TypeScript 代码,比如 Webpack、Rollup、Vite 等。这些工具可以帮助你自动化构建过程、优化代码等。你可以根据项目需求选择合适的构建工具,并在项目中使用 npm 进行安装和管理。

步骤汇总

1.安装vs code

2.npm install -g typescript

3.运行tsc hello.ts。将ts编译为js文件

4.调试 npm install -D ts-node ,安装vs扩展 TS Debug。添加调试launch.json文件配置如下

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "ts-node",
            "type": "node",
            "request": "launch",
            "args": [
                "${relativeFile}"
            ],
            "runtimeArgs": [
                "-r",
                "ts-node/register"
            ],
            "cwd": "${workspaceRoot}",
            "protocol": "inspector",
            "internalConsoleOptions": "openOnSessionStart"
        }
    ]
}

5.事实编译:在vs code中 选择终端→运行任务 输入ts 选中tsc:监控,将对ts生成js文件进行实时监控。

第一个项目

  1. 在vs中创建01hello.ts,代码如下
function sayHello(person:string){
   return `hello ${person}`;
}

let user:string = 'Tom';
let r= sayHello(user);
console.log(r);

2.编译成JS 手动编译tsc 01hello.ts或自动编译运行任务tsc:监控。将生成01hello.js文件。

3.可以将01hello.js 拿到其他web页面使用。注:实际开发过程中,可能使用到构建工具如Webpack、Rollup、Vite 等,就不用运行步骤2和3了

与TypeScript入门介绍相似的内容:

TypeScript入门介绍

目录TypeScript入门介绍什么是 TypeScript?发展历史优缺点应用场景开发工具环境依赖编程IDEvs调试构建工具/工程化步骤汇总第一个项目 TypeScript入门介绍 什么是 TypeScript? 1.1 TypeScript 是由微软开发的一种开源的编程语言。它是 JavaScr

在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口

在基于vue-next-admin 的 Vue3+TypeScript 前端项目中,可以整合自己的 .NET 后端,前端操作一些功能的时候,为了使用方便全局挂载的对象接口,以便能够快速处理一些特殊的操作,如消息提示、辅助函数、正则测试等等。本篇随笔介绍在Vue3+TypeScript 前端项目中全局挂载对象$u,获得相关 $u_interface 的统一入口的接口信息。这样在组件或者页面中就可以方

nestjs入门学习总结(三):集成typeorm并实现一个curd操作

### typeorm熟悉 TypeORM 是一个ORM框架,它可以运行在 NodeJS、Browser、Cordova、PhoneGap、Ionic、React Native、Expo 和 Electron 平台上,可以与 TypeScript 和 JavaScript (ES5,ES6,ES7,

TypeScript数据类型

目录TypeScript数据类型基础数据类型number、string、boolean、 null 和 undefined、object其他数据类型元组 []枚举 enum接口 interface联合类型 |交叉类型 &type声明面向对象类class继承extends其他类型推断类型断言 as总结

为什么我反对过度使用TypeScript?

大家好, 我前夕. TypeScript在今天早已无人不知, 但是我认为TypeScript的使用应该遵循中庸之道. 要使用, 但不要过度使用.

Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧

实际项目中会运到的 Typescript 回调函数、事件侦听的类型定义,如果刚碰到会一脸蒙真的,我就是 这是第一次我自己对 Typescript 记录学习,所以得先说一下我与 Typescript 的孽缘 记得最早是在2014年遇上 Typescript 当时是完全看不上这东西的,甚至带着鄙视的心态

typescript 解决变量多类型访问属性报错--工作随记

一个变量类型允许是多个类型,如果访问某个类型的属性,编辑器会直接提示错误 比如 变量 tuple 可能为string 或 number 类型,如果直接访问tuple.toFixed const mixedTupleTypeArray: (string|number)[] = ['hello', 23

TypeScript 前端工程最佳实践

作者:王春雨 前言 随着前端工程化的快速发展, TypeScript 变得越来越受欢迎,它已经成为前端开发人员必备技能。 TypeScript 最初是由微软开发并开源的一种编程语言,自2012年10月发布首个公开版本以来,它已得到了人们的广泛认可。TypeScript 发展至今,已经成为很多大型项目

typescript的必要性及使用

作为一个前端语言,Javascript从最初只是用来写页面,到如今的移动终端、后端服务、神经网络等等,它变得几乎无处不在。如此广阔的应用领域,对语言的安全性、健壮性以及可维护性都有了更高的要求。尽管ECMAScript标准在近几年有了长足的进步,但是在类型检查方面依然毫无建树。在这种情况下TypeScript应运而生。

TypeScript又出新关键字了?

TypeScript 5.2将引入一个新的关键字:`using`。当它离开作用域时,你可以用`Symbol.dispose`函数来处置任何东西。 ```jsx { const getResource = () => { return { [Symbol.dispose]: () => { conso