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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容