关于ts:typescript笔记以及常用问题

装置

cmd输出，这是全局的！不必特意寄存地位
npm install typescript -g

将ts转换js

创立index.ts, 而后再同级的index.html中引入index.js
咱们写完ts后输出tsc ./js/index.ts 主动帮你同级生产index.js
比照如下

//TS状态
(()=>{
    function say(name:string){
        return `你好,${name}`
    }
    let myname = "常吉孔"
    console.log(say(myname))
})()

//JS状态
(function () {
    function say(name) {
        return "\u4F60\u597D," + name;
    }
    var myname = "常吉孔";
    console.log(say(myname));
})();

主动转换js

因为每次都须要手动输出tsc ./xxx太麻烦
所以换成纯主动，相似Vue运行一样，始终敞开完结

//第一步:生成目录
tsc --init

//第二步:生成文件夹和js文件，再敞开严格模式
"outDir": "./js",
"strict": false
 
//第三步: 就能够运行监督了
tsc -w

同级寄存js文件夹

之前的形式，ts文件必须放在根目录。生成后js文件夹中只能放js文件
解决办法：去掉outDir": "./js。增加include就好了
此时：index.js和index.ts能够放在同一个文件夹了

{
  "compilerOptions": {
    "target": "es5",                                     
    "module": "commonjs",                                
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true,        
    "strict": false,                               
    "skipLibCheck": true
    //"outDir": "./js",
  },
  "include":["./js/*.ts"]
}

问题总结：

1. 再ts中能够写js无所谓。只不过ts的语法不能间接用，须要转换成js
   如果ts写的全是js的话齐全不须要转换。仅此而已

   tsc -V   //版本
   tsc ./xx/index.ts   //将他转换js 
   tsc -w   //监督
   tsc --init  //生成tsconfig.json调节

2. 在vue中defineComponent干什么用的？
   答：vue3 如果用ts，导出时候要用 defineComponent，这俩情侣套餐。

   <script lang="ts">
    import { defineComponent } from "vue"
    export default defineComponent({ ... })
   </script>