搭建开发环境 -- Typescript基础篇(1)

1,129 阅读1分钟

安装Typescipt

需要本地具备Node环境,推荐Node.js > 8;本系列所使用的typescript版本为3.8

  • 全局安装
npm install -g typescript
  • 本地安装
npm install typescript

编辑器推荐

学习typescript时,推荐是vscode编辑器。vscode本身就是由typescript开发,对typescript类型提示非常友好。

Hello Typescript

新建项目

mkdir learn-ts && cd learn-ts

初始化项目

npm init 
tsc --init # 如果是本地安装ts, 执行 `npx tsc --init`

此时项目会多几个文件:

  • package.json && package-lock.json:项目配置文件
  • tsconfig.json: ts配置文件

新建src/hello-ts.ts文件,写入代码:

function greeter(person: string) {
  return "Hello, " + person;
}

let user = "Jane User";
console.log(greeter(user));

由typescript书写的文件需要以.ts结尾(如果是使用ts编写的react,则是以.tsx结尾)

编译文件

tsc # 如果是本地安装ts, 执行 `npx tsc`

编译结果

"use strict";
function greeter(person) {
    return "Hello, " + person;
}
var user = "Jane User";
console.log(greeter(user));

可以看到, 基础的ts相比于基础的js,就只是多了person:string的类型定义,并且在vscode编辑器中,如果把鼠标发在user变量处,vscode会给出当前变量的类型提示。

type-hinter

不管是node环境还是broswer环境都无法直接运行ts代码,一般有这几种方法可以比较简单的运行代码:

  • 先编译ts代码到js,然后运行编译好的js代码
  • vscode配合Code Runner插件实现无编译直接运行ts代码
  • 使用ts-node,实现无编译直接运行ts代码
  • 官方的playground也是一个不错的选择,可以实时看到编译结果