TypeScript教程--简单使用TypeScript教程一、安装ts编译器 1.安装备注:使用npm全局安装 2

TypeScript教程

简介：TypeScript是一种由‌微软开发的自由和开源的编程语言，它是‌JavaScript的一个超集，向JavaScript添加了可选的静态类型和基于类的面向对象编程。

一、安装ts编译器

1.安装

npm i typescript -g

备注:使用npm全局安装

2.验证

#tsc -v
tsc --version

备注:tsc 是 typescript 的命令行工具，它负责将 typescript 代码编译成标准的 javascript 代码。

二、编译ts源代码

编译前：

let user = {
    name: "张三",
    age: 10
}
console.log(`姓名:${user.name},年龄:${user.age}`)

1.手动编译

#忽略tsconfig.json，使用默认编译选项编译指定的文件。
tsc demo.ts

编译后：

var user = {
    name: "张三",
    age: 10
};
console.log("\u59D3\u540D:".concat(user.name,",\u5E74\u9F84:").concat(user.age));

2.自动编译

#在工作目录中，使用推荐的设置，创建tsconfig.json。
tsc --init

#编译整个工程(手动触发一次)
tsc

#监控输入文件(自动监控更新)
#tsc -w 
tsc --watch

备注：tsc -w 启动一个监视进程，它会在保存更改时自动编译项目。

编译后：

"use strict";
let user = {
    name: "张三",
    age: 10
};
console.log(`姓名:${user.name},年龄:${user.age}`);

默认生成的tsconfig.json文件

{
  "compilerOptions": {
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "commonjs",                                /* Specify what module code is generated. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

三、验证

1.创建演示的页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h3>你好啊 typescript</h3>
    </body>
</html>
<script src="./demo.js"></script>

2.通过浏览器访问

文章首发公众号自学Java教程欢迎关注解锁更多精彩内容！