博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
学习typescript(一)
阅读量:5162 次
发布时间:2019-06-13

本文共 1597 字,大约阅读时间需要 5 分钟。

环境

必装软件

  1. node,推荐 node 8.0
  2. npm,推荐 npm 5.0
  3. git, 最新版
  4. vscode, 编绎器

必装包

  1. tsc: npm install -g typescript
  2. typings: npm install -g typings
  3. ts-node: npm install -g ts-node

说明一下

  1. tsc 为 typescript 的编绎绎,它能把 typescript 编绎成 js。
  2. typings 为下截别人标好的类型说明。
  3. ts-node 为开发环境中不用编绎成 js 直接运行 typescript 环境。

如何使用

新项目,这里指的项目都使用typecript进行开发

  1. 新建文件夹:mkdir ts-test && cd ts-test
  2. 初始化 node 项目:npm init
  3. 设置初始化 'tsc --init',会生成一个 tsconfig.json 文件,这个文件很重要,就是 tsc 的配置文件,内容下面会说。
  4. 运行版本控制:'git init',git add -A, git commit -m "init"
  5. 新建一个文件 test.ts 文件
console.log('hello, world');
  1. 运行命令:tsc test.ts,编绎文件,生成文件会在当前文件夹生成 test.js
  2. 运行命令: node test.js ,你会看见 hello, world

这样一个小小的环境就建起来了,现在我们考虑下优化一下它。

  1. 在项目中,要控制生成文件的目录

    这个需要在 tsconfig.json 中的 compilerOption 中添加 "outDir": "dist",然后运行命令: tsctsc会自动加载 tsconfig.json。这样就会在当前目录下生成 dist/test.js,如果不加这行运行命令,跟 tsc test.ts 的效果是一致的。

  2. 在项目中,会控制 .ts 文件的目录和不需要编绎文件的目录

    如果,不设置这两个选项,运行 tsc 命令后,当前所有文件夹下的文件,当你的 node_modules 很大的时候,这样非常慢。因此需要指定需要的目录和不需要的目录,在 tsconfig.json 中增加 includeexclude 选项,这两个选项为数组,如下:

"exclude": [        "node_modules/",        "dist/"    ],    "include": [        "src/**/*.ts" // 这里 /**/的意思为任何一个子目录的 `*.ts` 文件    ]
  1. 开发项目中编绎 .ts 文件太麻烦,能不能直接运行

    现在就是 ts-node 发挥作用的时候,简单的把 node 换成 ts-node 就可以了。例如: ts-node src/test2.ts

  2. 如何引用 npm 上面的库?
    这里会有问题,node 中加载库的标准是 cmd , 实现是 require。这在 ts 中不支持,解决这个问题有两个方案:
    第一方案:
    在项目中任何一个 .ts 中增加如下语句:
declare function require(path: string): any;

这样你可以自由的使用 require

第二方案:

使用 ts 自已的导入库的语法。

import foo = require("foo");

注:

我是 cmd 的支持者,我认为 es6import 不支持动态导入是一个大问题。

已有一个 js 项目,如何体验 typescript

主要解决问题,ts 与 js 的交互问题?

这是下篇文篇的想说的问题。

转载于:https://www.cnblogs.com/htoooth/p/6933877.html

你可能感兴趣的文章
shell基础
查看>>
2018.1.15
查看>>
[集合DP] UVA 10651 Pebble Solitaire
查看>>
qt安装遇到的错误
查看>>
寻找完美平方数
查看>>
java:Apache Shiro 权限管理
查看>>
objective c的注释规范
查看>>
FreeNas安装配置使用
查看>>
机器学习中的F1-score
查看>>
编译安装php5.5.38
查看>>
常用查找数据结构及算法(Python实现)
查看>>
Scrapy框架-CrawlSpider
查看>>
Django(一)框架简介
查看>>
java.lang.OutOfMemoryError: Java heap space
查看>>
popular short sentences
查看>>
Python操作SQLite数据库的方法详解
查看>>
如何透彻的掌握一门机器学习算法
查看>>
用数据分析进行品类管理
查看>>
实验二:编写输出"Hello World!"
查看>>
菜单和工具条(二)
查看>>