ts安装和环境搭建

• 学习资源推荐

---

• 微信扫码关注公众号 ：前端前端大前端，追求更精致的阅读体验 ，一起来学习啊
• 关注后发送关键资料,免费获取一整套前端系统学习资料和老男孩python系列课程
  

---

全局安装typescript

• npm install -g typescript

项目初始化

• 新建目录：如ts-dev
• 进入ts-dev并执行命令npm init -y生成package.json文件
• 再输入命令tsc --init 生成tsconfig.json文件

package.json 配置

配置编译脚本，-w 表示实时监听

"scripts": {
    "build": "tsc -w"
  },

tsconfig.json配置

具体配置含义原始文件中会有注释

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": true,
    "alwaysStrict": true,
    "declaration": true,
    "removeComments": true,
    "noImplicitReturns": true,
    "importHelpers": true,
    "lib": ["es6", "dom"],
    "typeRoots": ["node_modules/@types"],
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["./src/**/*.ts"],
  "exclude": ["node_modules", "dist", "**/*.test.ts"]
}

测试

• ts-dev下新建src文件夹
• src下新建index.ts

function Person(person: string) {
  return person;
}
const user = "Tom";

编译

• npm run build
• 可以看到ts-dev下出现一个dist文件夹

dist/index.js

"use strict";
function Person(person) {
    return person;
}
var user = "Tom";
//# sourceMappingURL=index.js.map

基本类型

const bol: boolean = true;
const num: number = 100;
const str: string = "hello world";
const fn = (): void => {
  console.log("我是没有返回值的函数");
};

//这两个类型只有 自己
const onlyNull: null = null;
const onlyUndefined: undefined = undefined;

//这个还是和js用法一样
const symbol = Symbol("symbol");

console.log({
  bol,
  num,
  str,
  onlyNull,
  onlyUndefined,
  symbol
});

fn();

---

编译后

"use strict";
var bol = true;
var num = 100;
var str = "hello world";
var fn = function () {
    console.log("我是没有返回值的函数");
};
var onlyNull = null;
var onlyUndefined = undefined;
var symbol = Symbol("symbol");
console.log({
    bol: bol,
    num: num,
    str: str,
    onlyNull: onlyNull,
    onlyUndefined: onlyUndefined,
    symbol: symbol
});
fn();
//# sourceMappingURL=index.js.map