Type 是 的类型的超集,它可以编译成纯 。编译出来的 可以运行在任何浏览器上。Type 编译工具可以运行在任何服务器和任何系统上,Type 是开源的。为什么选择 Type 以及Type 优缺点阅读Type 入门教程。利用VScode搭建Type 开发环境前提是已经安装node.js和VScode。

1、安装Type
使用npm工具安装全局Type :

npm install -g type 

2、创建helloType
创建helloType 目录,在命令行cmd下进入helloType 目录

cd helloType 

输入:npm init,创建package.json,package.json文件如下:

{
  \"name\": \"hellotype \",
  \"version\": \"1.0.0\",
  \"de ion\": \"hello type \",
  \"main\": \"index.html\",
  \" s\": {
    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",
    \"start\": \"tsc && concurrently \\\"npm run tsc:w\\\" \\\"npm run lite\\\"\",
    \"lite\": \"lite-server\",
    \"tsc\": \"tsc\",
    \"tsc:w\": \"tsc -w\"   
  },
  \"keywords\": [
    \"type \"
  ],
  \"author\": \"sanshui\",
  \"license\": \"ISC\",
  \"dependencies\": {

  },
  \"devDependencies\": {
    \"lite-server\": \"^2.2.0\",
    \"concurrently\": \"^2.0.0\"
  }
}



concurrently—同时执行命令用
lite-server—轻量级的Node开发服务器
3、安装依赖包、编写示例代码
使用npm i 或者 cnpm i 或者yarn 安装依赖包

npm i

编写HelloType .ts代码:

class HelloType  {
  helloString: string;
  constructor(message: string) {
      this.helloString = message;
  }
  hello() {
      return this.helloString;
  }
}
let myName: string = \'SanShui\'
let myAge: number = 23
let sentence: string = `Hello, my name is ${myName}. I\'ll be ${myAge + 1} years old next month`
let helloType  = new HelloType (sentence);
document.body.innerHTML = helloType .hello();



index.html:

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <  charset=\"UTF-8\">
    < >HelloType </ >
</head>
<body>
    <  src=\"dist/tsc.js\"></ >
</body>
</html>

4、创建 tsconfig.json
  当前Type 代码并不能直接执行,需编译为 代码。而借助VS Code,我们就不用在命令行输入编译命令了。为此,在根目录添加一个tsconfig.json文件。该文件是Type 编译器配置文件。

{
  \"compilerOptions\": {
    \"module\": \"amd\",
    \"noImplicitAny\": true,
    \"removeComments\": true,
    \"preserveConstEnums\": true,
    \"outFile\": \"dist/tsc.js\",
    \"sourceMap\": true
  },
  \"include\": [
    \"src/*\"
  ],
  \"exclude\": [
    \"node_modules\"
  ]
}


tsconfig.json详细配置请查看:tsconfig.json配置

5、编译运行
npm run start


原文:https://blog.csdn.net/qq_27626333/article/details/78261768 
 

收藏 打印