TypeScript基础 1

简介: TypeScript基础

一、关于 TypeScript

TypeScript是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发

二、TypeScript优缺点

TypeScript 增加了代码的可读性和可维护性

·         类型系统实际上是最好的文档,大部分的函数看看类型的定义就可以知道如何使用了

·         可以在编译阶段就发现大部分错误,这总比在运行时候出错好

·         增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等

TypeScript 拥有活跃的社区

·         大部分第三方库都有提供给 TypeScript 的类型定义文件

·         Google 开发的 Angular2 就是使用 TypeScript 编写的

·         TypeScript 拥抱了 ES6 规范

TypeScript 的缺点

TypeScript 的弊端在于:

·         有一定的学习成本,需要理解接口(Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等概念

·         短期可能会增加一些开发成本,毕竟要多写一些类型的定义,不过对于一个需要长期维护的项目,TypeScript 能够减少其维护成本

·         集成到构建流程需要一些工作量

·         可能和一些库结合的不是很完美

三、安装 TypeScript

npm install -g typescript
tsc xxxx.ts

四、Hello TypeScript

function sayHello(person: string) {
    return 'Hello, ' + person;
}
let user = 'Tom';
console.log(sayHello(user));
执行 tsc hello.ts
这时候会生成一个编译好的文件 hello.js:function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));
TypeScript 中,使用 : 指定变量的类型,: 的前后有没有空格都可以


注意点:

TypeScript 如果发现有错误,编译的时候就会报错。

TypeScript 编译的时候即使报错了,还是会生成编译结果,我们仍然可以使用这个编译之后的文件。

如果要在报错的时候终止 js 文件的生成,可以在 tsconfig.json 中配置 noEmitOnError 即可。关于 tsconfig.json,参考官方手册中文版)

五、原始数据类型

1、布尔值

var isScuess: boolean = false;
注意,使用构造函数 Boolean 创造的对象不是布尔值:new Boolean() 返回的是一个 Boolean 对象:let createdByNewBoolean: Boolean = new Boolean(1);
直接调用 Boolean 也可以返回一个 boolean 类型
let createdByBoolean: boolean = Boolean(1);

2、数值

var decLiteralNum: number = 6;
var hexLiteralNum: number = 0xf00d;
// ES6 中的二进制表示法
var binaryLiteralN: number = 0b1010;
// ES6 中的八进制表示法
var octalLiteralN: number = 0o744;
var notANumber: number = NaN;  //typeof
var infinityNumber: number = Infinity;
其中 0b1010 和 0o744 是 ES6 中的二进制和八进制表示法,它们会被编译为十进制数字。

3、字符串

let myName: string = 'Tom';
let myAge: number = 25;
// 模板字符串
let sentence: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;

4、空值

function alertName(): void {
    alert('My name is Tom');
}
声明一个 void 类型的变量没有什么用,因为你只能将它赋值为 undefined 和 null:let unusable: void = undefined;
5、null和undefined
在 TypeScript 中,可以使用 null 和 undefined 来定义这两个原始数据类型:let u: undefined = undefined;
let n: null = null;
undefined 类型的变量只能被赋值为 undefined,null 类型的变量只能被赋值为 null。与 void 的区别是,undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量,可以赋值给 number 类型的变量:// 这样不会报错
let num: number = undefined;
// 这样也不会报错
let u: undefined;
let num: number = u;
而 void 类型的变量不能赋值给 number 类型的变量:let u: void;
let num: number = u;


相关文章
|
9天前
|
人工智能 自然语言处理 文字识别
阿里云百炼Qwen3.7-Max简介:能力、优势、支持订阅计划参考
Qwen3.7-Max是阿里云百炼面向智能体时代推出的新一代旗舰模型,对标GPT-5.5、Claude Opus 4.7等闭源旗舰。该模型支持百万级token上下文窗口,具备顶级推理能力、多模态搜索与视觉理解增强、流式输出低延迟响应等核心优势,覆盖编程、办公、长周期自主执行等复杂场景。同时支持OpenAI接口兼容,便于系统快速迁移。用户可通过Token Plan团队或节省计划等订阅方式灵活调用,适合企业级高要求场景使用。
3800 18
阿里云百炼Qwen3.7-Max简介:能力、优势、支持订阅计划参考
|
10天前
|
人工智能 自然语言处理 供应链
|
17天前
|
人工智能 开发工具 iOS开发
Claude Code 新手完全上手指南:安装、国产模型配置与常用命令全解
Claude Code 是一款运行在终端环境中的 AI 编程助手,能够直接在命令行中完成代码生成、项目分析、文件修改、命令执行、Git 管理等开发全流程工作。它最大的特点是**任务驱动、终端原生、轻量高效、多模型兼容**,无需图形界面、不依赖 IDE 插件,能够深度融入开发者日常工作流。
3617 14
|
13天前
|
人工智能 Linux BI
国内用 Claude Code 终于不用翻墙了:一行命令搞定,自动接 DeepSeek
JeecgBoot AI专题研究 一键脚本:Claude Code + JeecgBoot Skills + DeepSeek 全平台接入 一行命令装好 Claude Code + JeecgBoot Skills + DeepSeek 接入,无需翻墙使用 Claude Code,支持 Wind
3036 7
国内用 Claude Code 终于不用翻墙了:一行命令搞定,自动接 DeepSeek
|
19天前
|
Shell API 开发工具
Claude Code 快速上手指南(新手友好版)
AI编程工具卷疯啦!Claude Code凭借任务驱动+终端原生的特性,成了开发者的效率搭子。本文从安装、登录、切换国产模型到常用命令,手把手带新手快速上手,全程避坑,30分钟独立用起来。
3748 25
|
4天前
|
存储 定位技术 数据库
CodeGraph 如何让 Claude Code减少 7 成工具调用?
CodeGraph 为 Coding Agent 提供本地代码知识图谱,把函数、类、调用链和框架路由提前整理成“项目地图”,减少盲目搜索和文件读取。它不是新 Agent,而是上下文基础设施,让 Agent 更快找到正确代码路径,平均减少 7 成工具调用。
519 0
|
10天前
|
人工智能 自然语言处理 安全
Claude Code 全攻略:命令大全+三种模式+记忆体系+实战工作流完整手册
Claude Code 是当前最流行的终端级 AI 编程助手,能够直接在命令行中完成代码生成、项目理解、文件修改、命令执行、错误修复等全流程开发工作。它不依赖图形界面、不占用额外资源,却能深度理解项目结构,自动生成规范代码,大幅提升研发效率。
1495 3