开启Typescript技术探索,不一样的惊喜

109 阅读4分钟

我正在参加「掘金·启航计划」 |

一、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 中,undefinednull 是两个基本数据类型

在TypeScript中,它们各自的类型也是undefinednull,也就意味着它们既是实际的值,也是自己的类型

区别: undefinednull 是所有类型的子类型

ps: 开启严格模式nullundefined不能赋值给void类型

  • TypeScript类型:
//unknown类型
TypeScript 3.0中引入的 unknown 类型也被认为是 top type ,但它更安全。与any一样,所有类型都可以分配给unknown,unknow类型比any更加严格

unknow类型不能赋值给其他类型,只可以赋值给any和unknow类型

unknow类型不能去调用属性和方法,any是可以的

//void类型(空值)
JavaScript 没有空值(Void)的概念,在 TypeScript 中,可以用 void 表示没有任何返回值的函数voidvoid通常用来指定一个函数是没有返回值的,那么它的返回值就是void类型
我们可以将nullundefined赋值给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,请参看官网

go.jpg