Category Archives: TypeScript
TypeScript 基本结构
以下是 TypeScript 程序的常见组成部分：
声明部分：包括类型声明、接口声明等。
变量声明：包括 let, const 和 var 的使用。
函数声明：包括普通函数和箭头函数。
类声明：用于定义类及其成员。
接口与类型别名：描述类型的结构。
模块化：通过 import 和 export 组织代码。
类型断言：强制类型转换。
泛型：使代码具备更多的复用性。
注释：增加代码的可读性。
类型推断：自动推断类型。
类型守卫：缩小类型范围。
异步编程：支持 async/await。
错误处理：通过 try/catch 进行错误捕捉。
TypeScript 特性
静态类型检查：TypeScript 在编译时就会检查代码的类型是否匹配，能够发现很多潜在的错误。即使是简单的错误（例如拼写错误或类型不一致），也可以在编写代码时被捕获到。
类型推断：TypeScript 能够自动推断变量的类型。比如当你声明一个变量并赋值时，TypeScript 会根据赋值来推断这个变量的类型，不需要每次都显式声明类型。
接口和类型定义：TypeScript 提供了 interface 和 type 关键字，允许你定义复杂的数据结构。这对于项目中不同部分的代码协作和数据交互来说非常重要。
类和模块支持：TypeScript 支持面向对象编程中的类（class）概念，增加了构造函数、继承、访问控制修饰符（如 public、private、protected），并且支持 ES 模块化规范。
工具和编辑器支持：TypeScript 拥有良好的编辑器支持，特别是与 Visual Studio Code 集成时，能提供智能提示、自动补全、重构等工具，使开发过程更高效。
兼容 JavaScript：TypeScript 是 JavaScript 的超集，这意味着所有合法的 JavaScript 代码都是合法的 TypeScript 代码。这使得 JavaScript 项目可以逐步迁移到 TypeScript，而无需完全重写。
View DetailsTypeScript 安装
使用国内镜像：
npm config set registry https://registry.npmmirror.com
安装 typescript：
npm install -g typescript
安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码，以下是查看版本号：
$ tsc -v
TypeScript 教程
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。
TypeScript 由微软开发的自由和开源的编程语言，在 JavaScript 的基础上增加了静态类型检查的超集。
TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。
[ 万字总结 ] 夯实你的 TypeScript 基础
1.环境配置和搭建
2.基础类型
3.类型推导
4.函数类型
5.类
6.接口
7.泛型
8.兼容性
9.类型保护
10.类型推断
11.交叉类型
12.条件类型
13.内置类型
14.装包和拆包
15.自定义类型
16.unknown
17.模块和命名空间
18.类型声明
19.扩展全局变量类型
Vue2.X集成typeScript
1.安装依赖
2.配置 webpack.base.conf.js
3.添加 tsconfig.json
4.让 ts 识别 .vue
5..js 文件重命名为.ts 文件
6.改造 .vue 文件
7.运行 npm run dev
8.让vue识别全局方法/变量
带你了解Typescript的14个基础语法
本文分享自华为云社区《Typescript基础语法全解析》，作者：北极光之夜。 。 一.Ts是什么： 首先，强类型不允许随意的隐式类型转换，而弱类型是允许的。JavaScript就是经典的弱类型语言。而Typescript可以说是JavaScript的超集，在JS的基础上新增了许多语法特性，使得类型不再可以随意转换，能大大减少开发阶段的错误。 二. 基本语法： 1.声明原始数据类型： 在变量后面指定一个关键字表示其只能为什么类型。 string类型：
|
1 |
const a: string = 'auroras' |
number类型：
|
1 |
const b: number = 666 // 包括 NAN Infinity |
boolean类型：
|
1 |
const c: boolean = true |
null类型：
|
1 |
const d: null = null |
undefined类型：
|
1 |
const e: undefined = undefined |
symbol类型：
|
1 |
const h: symbol = Symbol() |
2.声明Object类型： 首先，object类型不单单可以指定对象，还可以指定数组或函数：
|
1 2 3 |
const foo1: object = {}; const foo2: object = []; const foo3: object = function(){}; |
如果只想指定为对象，如下，对象属性都要提前声明好类型：
|
1 2 3 4 |
const obj: {name: string,age: number} = { name: '北极光', age:18 } |
3.1声明数组类型： 可以指定声明Array且通过<>指定元素类型，比如指定声明元素都为数字的数组：
|
1 |
const arr: Array<number> = [1,2,3] |
第二种方式如下，也指定声明元素都为数字的数组：
|
1 |
const arr: number[] = [1,2,3] |
3.2声明元组类型： 就是要提前指定数组里每个元素的类型，严格一一对应：
|
1 |
const tuple: [number,string,boolean] = [666,'auraros',true] |
4.声明枚举类型： 通过关键字enum声明一个枚举类型，如：
|
1 2 3 4 5 6 7 |
enum Status { pedding = 1, resolve = 2, reject = '3' } //访问 console.log(Status.pedding); |
如果全不写值，默认值为从0开始递增。如果第一个元素为字符类型，就必须全部定义值。如果第一个元素指定为一个数字，后面元素不写值，那值为第一个元素值按位置大小递增的结果。 5.函数参数与返回类型： 函数声明式： 指定函数传入参数类型，指定返回值类型，调用时传入参数个数与类型都必须相同： 括号里指定每个参数类型，括号右边指定返回值的类型。
|
1 2 3 4 |
function fun (name:string,age:number):string{ return 'sss' } fun('auroras',18); |
如果传入参数不确定传不传，那么可以给参数加个‘？’表明它是可选的：
|
1 2 3 4 |
function fun (name:string,age?:number):string{ return 'sss' } fun('auroras'); |
或者给参数添加默认值，那也会成为可选参数：
|
1 2 3 4 |
function fun (name:string,age:number=666):string{ return 'sss' } fun('auroras'); |
如果参数个数不确定，可以用扩展运算符加解构赋值表示，当然要传入与指定类型一致的：
|
1 2 3 4 |
function fun (name:string,age:number=666,...res:number[]):string{ return 'sss' } fun('auroras',1,2,3); |
函数表达式：
|
1 2 3 |
const fun2:(name:string,age:number)=>string = function(name:string,age:number){ return 'sss' } |
定义接口时再详细说。 6.任意类型： 通过指定any关键字表示任意类型，跟原来 js 一样，可以任意赋不同类型的值：
|
1 2 3 |
let num:any = 1; num = 'a'; num = true; |
7.类型断言： 类型断言就是明确的告诉typescript这个变量就是某种类型的，百分之百确定。不用typescript在一些情况下要自己推断某些没有明确定义或者多变的场景是什么类型。 可以通过 as+类型 断言它就是某种类型的：
|
1 2 |
const res = 1; const num = res as number; |
也可以通过 <类型> 形式断言（不推荐）：
|
1 2 |
const res = 1; const num = <number>res |
8.接口基本使用： 接口可以理解为一种规范，一种契约。可以约束一个对象里应该有哪些成员，这些成员都是怎么样的。 […]
View Details