我正在参加「掘金·启航计划」 |
一、Typescript技术探索
0、认识Typescript
TypeScript官网:TypeScript is a typed superset of JavaScript that compiles to plain JavaScript
TypeScript的运行环境(TypeScript的编译环境):
- 通过tsc编译TypeScript到JavaScript代码;
在浏览器或者Node环境下运行JavaScript代码,通过ts-node库,为TypeScript的运行提供执行环境;
全局的安装
#安装目录
npm install typescript -g
# 查看版本
tsc --version
- 通过ts-node库,为TypeScript的运行提供执行环境
# 安装ts-node
npm install ts-node -g
# 另外ts-node需要依赖 tslib 和 @types/node 两个包
npm install tslib @types/node -g
# 可以直接通过 ts-node 来运行TypeScript的代码:
ts-node hello.ts
1、Typescript基础
- JavaScript类型:
//null和undefined类型
在 JavaScript 中,undefined 和 null 是两个基本数据类型
在TypeScript中,它们各自的类型也是undefined和null,也就意味着它们既是实际的值,也是自己的类型
区别: undefined 和 null 是所有类型的子类型
ps: 开启严格模式null、undefined不能赋值给void类型
- TypeScript类型:
//unknown类型
TypeScript 3.0中引入的 unknown 类型也被认为是 top type ,但它更安全。与any一样,所有类型都可以分配给unknown,unknow类型比any更加严格
unknow类型不能赋值给其他类型,只可以赋值给any和unknow类型
unknow类型不能去调用属性和方法,any是可以的
//void类型(空值)
JavaScript 没有空值(Void)的概念,在 TypeScript 中,可以用 void 表示没有任何返回值的函数void,void通常用来指定一个函数是没有返回值的,那么它的返回值就是void类型
我们可以将null和undefined赋值给void类型,也就是函数可以返回null或者undefined
这个函数我们没有写任何类型,那么它默认返回值的类型就是void的,我们也可以显示的来指定返回值是void
function sum(num1: number,num2: number): void {
console.log(num1 + num2)
}
//tuple是元组类型
固定大小的不同类型值的集合,我们需要使用元组
//never类型
来表示不应该存在的状态比如Error, 死循环等
//any类型
我们可以对 any 进行任何操作,不需要检查类型; 声明变量的时候没有指定任意类型默认为any;弊端使用any就失去了TS类型的检测作用
2、Typescript进阶
//函数的参数类型/返回值类型
TypeScript允许我们指定函数的参数和返回值的类型
const foo = (name: string, age=15, weight?: number): string => {
console.log(name, age);
return name;
};
//类型别名
type Point = {
x: number
y: number
}
function printPonit(point: Point) {
console.log(point.x,point.y)
}
//类型断言as
断言 as <type>,需要注意的是,类型断言只能够「欺骗」TypeScript 编译器,无法避免运行时的错误;断言不会影响最后输出结果,只是让ts可以通过编译
//非空类型断言!
当我们编写下面的代码时,在执行ts的编译阶段会报错;非空断言使用的是 ! ,表示可以确定某个标识符是有值的,跳过ts在编译阶段对它的检测;
function printMessage(message?: string) {
//因为传入的message有可能是为undefined的,这个时候是不能执行方法的,但是,我们确定传入的参数是有值的,这个时候我们可以使用非空类型断言
console.log(message!.toUpperCase())
}
//参数的可选类型/默认参数/剩余参数
二、Typescript技术实践
技术探索实践-开发中常用的配置 tsconfig.json文件
"compilerOptions": {
// 目标代码(ts -> js(es5/6/7))
"target": "esnext",
// 目标代码需要使用的模块化方案(commonjs require/module.exports/es module import/export)
"module": "esnext",
// 严格一些严格的检查(any)
"strict": true,
// 对jsx进行怎么样的处理
"jsx": "preserve",
// 辅助的导入功能
"importHelpers": true,
// 按照node的方式去解析模块 import "/index.node"
"moduleResolution": "node",
// 跳过一些库的类型检测 (axios -> 类型/ lodash -> @types/lodash / 其他的第三方)
// import { Person } from 'axios'
"skipLibCheck": true,
// export default/module.exports = {}
// es module 和 commonjs
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
// 要不要生成映射文件(ts -> js)
"sourceMap": true,
// 文件路径在解析时, 基本url
"baseUrl": ".",
// 指定具体要解析使用的类型
"types": ["webpack-env"],
// 路径解析(类似于webpack alias)
"paths": {
"@/*": ["src/*"],
"components/*": ["src/components/*"]
},
// 可以指定在项目中可以使用哪里库的类型(Proxy/Window/Document)
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
}
三、总结
根据实际的项目需求合理选择Typescript,让我们一起拥抱Typescript
学习最新Typescript,请参看官网