TypeScript（ts）学习笔记（一）：环境搭建及配置

安装TypeScript

如果你的本地环境已经安装了npm工具，可以直接通过以下命令安装：

# 全局安装 TypeScript
npm i -g typescript

查看TypeScript是否安装成功，输入以下命令，显示版本号则安装成功：

tsc -v 
# Version 3.5.3

初始化目录：

npm init
tsc --init

配置文件

执行初始化命令之后，目录下会多出一个配置文件tsconfig.json，可以在其中进行自定义配置：

{
  "compilerOptions": {
    /* Basic Options */
    // "incremental": true,                   /* TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度 */
    "target": "es5",                          /* 目标语言的版本 */
    "module": "commonjs",                     /* 生成代码的模板标准 */
    // "lib": ["ES2019.Array"],               /* TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array" */
    // "allowJs": true,                       /* 允许编译器编译JS，JSX文件 */
    // "checkJs": true,                       /* 允许在JS文件中报错，通常与allowJS一起使用. */
    // "declaration": true,                   /* 开启后会自动生成声明文件 */
    // "declarationMap": true,                /* 声明文件存放目录 */
    // "sourceMap": true,                     /* 编译成 js 文件的时候，同时生成对应的 map 文件 */
    // "outFile": "./",                       /* 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置"module": "AMD", */
    // "outDir": "./",                        /* 输出目录*/
    // "rootDir": "./",                       /* 指定输出文件目录(用于输出)，用于控制输出目录结构 */
    // "removeComments": true,                /* 删除注释 */
    // "noEmit": true,                        /* 不输出文件,即编译后不会生成任何js文件*

    /* Strict Type-Checking Options */
    "strict": true,                           /* 严格模式*/
    // "noImplicitAny": true,                 /* 不允许隐式的any类型*/
    // "strictNullChecks": true,              /* 不允许把null、undefined赋值给其他类型的变量 */
    // "strictBindCallApply": true,           /* 严格的bind/call/apply检查 */
    // "strictPropertyInitialization": true,  /* 类的实例属性必须初始化*/
    // "noImplicitThis": true,                /* 不允许this有隐式的any类型*/
    // "alwaysStrict": true,                  /*  在代码中注入'use strict' */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* 检查只声明、未使用的局部变量(只提示不报错) */

    /* Module Resolution Options */
    // "baseUrl": "./",                       /* 解析非相对模块的基地址，默认是当前目录 */
    // "paths": {},                           /* 路径映射，相对于baseUrl*/
    // "rootDirs": [],                        /* 定义输入文件根目录 */
    // "typeRoots": [],                       /* 定义文件的文件夹位置 */
    // "types": [],                           /* 设置引入的定义文件 */
    // "allowSyntheticDefaultImports": true,  /* 允许引入没有默认导出的模块 */

    /* Source Map Options */
    // "sourceRoot": "",                      /* 调试时源码位置 */
    // "mapRoot": "",                         /* 定义 source map 的存放位置 */
    // "inlineSourceMap": true,               /* 将 source map 一同生成到输出文件中 */
    // "inlineSources": true,                 /* 将 ts 源码生成到 source map 中，需要同时设置 inlineSourceMap 或 sourceMap */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* 允许注解语法*/
  }
}

编写第一个TypeScript程序

在项目目录下新建一个test.ts文件，输入以下代码：

function say(person:string) {
  console.log(person+': hello world');
}
const person1:string = "zhangsan"
say(person1)

执行以下命令：

tsc test.ts

执行完之后会在当前目录下生成一个test.js文件，使用node来执行js代码：

node test.js
# zhangsan: hello world

最后编辑于：2020.08.29 14:28:41