乐趣区

关于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 调节

  1. 在 vue 中 defineComponent 干什么用的?
    答:vue3 如果用 ts,导出时候要用 defineComponent,这俩情侣套餐。

    <script lang="ts">
     import {defineComponent} from "vue"
     export default defineComponent({...})
    </script>
退出移动版