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>