TypeScript总结
 
ts简介
ts基础
  
 

 
ts简介
 
什么是ts：ts是js的超集
特点：提供类型系统和es6的支持
优点： 
  
增加代码的可读性和可维护性 
    
类型系统是最好的文档
在编译阶段就发现错误，比运行时发现错误好
增加了编辑器和ide的功能，代码不全、接口提示、跳转到定义、重构
 
包容性 
    
.js文件可重命名为.ts文件
不显式的定义类型，也能自动作出类型推论
可定义一切类型
即使typescript编译报错，也可生成js文件
 兼容第三方库，即使第三方库不是用ts写的，也可编写单独的类型文件供ts读取
 
 
缺点：集成到构建流程需要工作量，可能和一些库结合的不是很完美
安装：npm i -g typescript 执行tsc ts文件来编译会生成js文件或者ide支持
 
ts基础
 
 
定义类型
 ts中，使用:指定变量的类型，:的前后有没有空格都可以
 定义：let isDone:boolean = false
 
 
检查
 ts只会进行静态检查，如果发现有错误，编译的时候就会报错
 
 
数据类型
 
  
 
原始数据类型
 构造函数Boolean、String、Number创建的对象是对象，不是基本类型
 注意：undefined和null是所有类型的子类型，undefined和null类型的变量可以赋值给其他类型的变量
 
let num:number = undefined;//正确
let u:void;
let num:number  = u;//错误
 
 
void
 js没有空值的概念，在ts中，可用void表示没有任何返回值的函数
 
function alertName():void{
  alert("name");
}
 
用void声明变量的时候，只能赋值为undefined和null
 
let name:void = undefined;
 
 
any任意值
 用来表示允许赋值为任意类型
 普通类型，在赋值过程中改变类型是不被允许的
 任意值的属性和方法:
 
    
在任意值上访问任何属性和方法都是允许的
声明一个变量为任意值后，对它的操作，返回的内容的类型都是任意值
 
变量在声明的时候，未指定其类型，那么他会被识别为任意值类型
 
 
 
类型推论
 ts会在没有明确的指定类型的时候推出一个类型，这就是类型推论
 
let name = "";
name = 3;//错误
 
 
联合类型
 联合类型：取值可以为多种类型种的一种
 联合类型使用|分隔每个类型
 
let favoriteNumber:string|number;
favoriteNumber = 'one';
favoriteNumber = 1;//正确
 
访问联合类型的属性或方法:只能访问此类型的所有类型里共有的属性或方法
 
 
类型断言
 
  
用来手动指定一个值的类型
语法 
    
<类型>值
值 as 类型：react中的jsx语法的ts版必须是用这种
例子1：获取something.length会报错
function getLength(something:string|number):number{
      if(something.length){
            return something.length;
      }
}
 
例子2：类型断言，将something断言成string
function getLength(something:string|number):number{
      if(<string>something.length){
            return (<string>something).length;
      }
}
 
 
类型断言的用法如上，在需要断言的变量前加上 即可 
    
类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的
 
 
 
声明文件
 
  
declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明（含有子属性的）全局对象
interface 和 type 声明全局类型
export 导出变量
export namespace 导出（含有子属性的）对象
export default ES6 默认导出
export = commonjs 导出模块
export as namespace UMD 库声明全局变量
declare global 扩展全局变量
declare module 扩展模块
/// 三斜线指令
 

Vue-cli3中使用TS语法,以及使用例子

script中使用ts的写法，以及store和router在.vue页面的使用方法，需要从vue-routerhe 和vuex中导出useStore和useRoute(userouter)
 
通过getCurrentInstance（）方法可以获得组件实例
 
<script lang="ts">
import { defineComponent, computed, onMounted, watch,ref,getCurrentInstance,reactive,nextTick ,toRefs} from 'vue'
import {
  useStore,
  mapState,
  // mapMutations,
  // mapActions,
  // mapGetters
} from 'vuex'
import {useRoute,useRouter,useLink,UseLinkOptions} from "vue-router"
import { useI18n } from "vue-i18n";
import {data} from "@/utils/TypeState"
import HelloWorld from '@/components/HelloWorld.vue'
export default defineComponent({
  components:{
    HelloWorld
  },
  setup(props, context){
    console.log('context',context);
    const age=ref<Number>(10)
    const count=ref(50)
    const name=ref<any>(0)
    const store=useStore()
    const {proxy}:any=getCurrentInstance()
    const number=ref<string|Number>(store.state.app.age)
    const Route=useRoute()
    const RouteLink=useLink
    const data = reactive<data>({
      tableData: [
        {
          time: '姓名1'
        }
      ],
      language:[{
        name:'中文',
        value:'zh'
      },
      {
        name:'英文',
        value:'en'
      }],
      seleLanguage:'zh'
    })
    const { t } = useI18n();
    const languageD=()=>{
      proxy.$i18n.locale=data.seleLanguage
    }
    console.log(store.state.app.allMenuList instanceof  Array);
    console.log(proxy);
  // 监听指定基础类型数据
    const addNum=()=>{
      //  name.value=Number(name.value) +1
      name.value++
    }
    watch(name, (now, prev) => {
          console.log(now, prev, 'count')
    })
    // 监听reactive创建的响应式变量,可以直接监听对象，必须使用内联函数
    watch(() => data.tableData, (now, prev) => {
      console.log(now, prev, 'tableData')
    })
    const myModalShow = ref(false)
    const myModealHide=(val:any)=>{
      myModalShow.value=false
      console.log(val);
    }
    const myModalBlock =()=>{
      myModalShow.value=true
    }
    const toDelit=():void=>{
      proxy.$router.push("/userAdminDetils")
    }
    return {
      age,
      number,
      proxy,
      store,
      name,
      addNum,
      ...toRefs(data) ,
      t,
      languageD,
      myModealHide,
      myModalBlock,
      myModalShow,
      toDelit
    }
  },
  created () {
    console.log(this.$route);
    console.log(this.store.state.app.age);
    // console.log(this.$store);//报错
  }
})
</script>

在SAP Spartacus的实现里有很多.d.ts文件：
 
 
https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html
 
相当于commonJS的module pattern.
 
回忆一下commonJS：
 Node 应用由模块组成，采用 CommonJS 模块规范。
 
每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
 
// example.js
var x = 5;
var addX = function (value) {
  return value + x;
};
 
上面代码中，变量x和函数addX，是当前文件example.js私有的，其他文件不可见。
 
如果想在多个文件分享变量，必须定义为global对象的属性。
 
global.warning = true;
 上面代码的warning变量，可以被所有文件读取。当然，这样写法是不推荐的。
 
CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
 
var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;
 
上面代码通过module.exports输出变量x和函数addX。
 
因此，采用commonJS规范书写的JavaScript代码：
 
const maxInterval = 12;

function getArrayLength(arr) {
  return arr.length;
}

module.exports = {
  getArrayLength,
  maxInterval,
};
 
使用TypeScript .d.ts写成：
 
export function getArrayLength(arr: any[]): number;
export const maxInterval: 12;
 
使用ES module书写的JavaScript代码：
 
export function getArrayLength(arr) {
  return arr.length;
}
 
对应的TypeScript：
 
export function getArrayLength(arr: any[]): number;