ts有什么用

類型檢查, 擁抱es6，支持部分的esNext草案，直接編譯到原生js、引入新的語法糖

為什么用ts

TypeScript的設計目的應該是解決JavaScript的“痛點”：弱類型和沒有命名空間，導致很難模塊化，不適合開發大型程序。另外它還提供了一些語法糖來幫助大家更方便地實踐面向對象的編程。

typescript不僅可以約束我們的編碼習慣，還能起到注釋的作用，當我們看到一函數后我們立馬就能知道這個函數的用法，需要傳什么值，返回值是什么類型一目了然，對大型項目的維護性有很大的提升。

編譯報錯， 會生成編譯結果么？

答案是肯定的,當然可以在tsconfig.json的配置， noEmitONError

tsconfig.json的文件配置

還沒搞定

基礎總結

數據類型

• boolean 、number、string、null、 undefined、 Symbol
• undefined 和null 類型的數據只能被賦值undefined 和null， 但是這個類型是所有類型的子類型
• void 空類型

// undefined和null是所有類型子類型，都可以賦值let num: Symbol = undefined;sslet num: number = undefined;// undefined類型， 只能給undefinedlet u: undefined = undefined; let n: null = null; 復制代碼

• any和類型推斷

// 在ts中，變量在聲明的時候，如果沒有定義其類型，會被識成默認類型 let str;str = 'I am strgting';str = 1024;// 未定義類型，直接賦值let num= 124; // 等同于 let num:number = 124, 在后面代碼如果賦予num一個string會被報錯復制代碼

多個可能屬性

//只能訪問可能屬性的共有屬性function getLength(param: string| number) {return param.length;}// 會報錯， 因為 length不是 sting和number類型的共有屬性// 技巧--》 使用類型別名type possibleType = string | number;function getLength(param: possibleType) {return param.length;} 復制代碼

接口的概念

• 在ts中，interface包括對行為的抽象，由類去實現（implements）
• 也包括對對象輪廓的描述

對象interface -》動態屬性

必選參數和可選參數的類型是動態屬性類型的子集，所有在動態屬性類型設置的時候要設置上所有類型

interface userinfo {"memberId": number,"uName": string,"employeeId": string,"datetime": string,"platformList"?: Array<platform>,[propName: string]: string | number | Array<platform> | undefined} 復制代碼

只讀屬性的約束力

注意點： 只讀屬性的約束力在于第一次給對象賦值的時候，而不是給屬性賦值的時候 readonly和 const的區別： const是變量， readonly是屬性

接口-》抽象方法的實現

export interface ISRequest {fetch(url: string, arg?: Object, callback?: Function): Promise<Object>;}export class SafeRequest implements ISRequest {public async fetch(url: string, arg, callback?: Function): Promise<Object> {return new Promise((resolve, reject) => {})} 復制代碼

用接口表示數組

interface NumberArray {[index: any]: number}let numArr: NumberArray = [1, 2, 3] 復制代碼

函數的類型

• 可選參數, 必須在必選參數后面
• 參數默認值

function buildName(firstName: string, lastName?: string) {} 復制代碼

• 添加默認值的參數識別為可選參數
• 剩余參數

類型斷言

// <類型>值// 值 as 類型 復制代碼

疑惑--》 聲明文件

當使用第三方庫時，我們需要引用它的聲明文件，才能獲得對應的代碼補全、接口提示等功能。

聲明文件在哪里？

• 與npm包綁定在一起
• npm包的維護者并沒有提供聲明文件， 只能由其他人將聲明文件發布到@types里面
• 自己寫個聲明文件

npm包的聲明文件 和全局變量的聲明文件

在 npm 包的聲明文件中，使用 declare 不再會聲明一個全局變量，而只會在當前文件中聲明一個局部變量。只有在聲明文件中使用 export 導出，然后在使用方 import 導入后，才會應用到這些類型聲明。 ######declare global 使用 declare global 可以在 npm 包或者 UMD 庫中擴展全局變量的類型

內置對象

內置對象查詢--》點擊
ESMAScript提供了Boolean、Error、Date、RegExp

interface obj = {param: Functionparam: Promise} 復制代碼

枚舉--》 數據的雙向映射

enum companyList= {1: 'aaa', 2: 'bbb'}var companyList = {1: 'aaa',2: 'bbb',aaa: 1,bbb: 2} 復制代碼

Vue in Typescript

三大利器

• vue-component-class
  • 方法可以直接聲明為類成員方法。
  • 可以將計算屬性聲明為類屬性訪問器。
  • 默認data被當作類屬性
  • data ， render 和vue的生命周期的鉤子直接是類成員的方法，保留這些命名，不要沖突
  • 對于其他的配置項，例如prop、componets等傳遞給裝飾器函數

import Vue from 'vue';import Component from 'vue-componet-class';Component.resgisterHooks(['beforeRouteEnter'])@Componnet({props: {},components: {}})export default class App extends Vue {// aa = '';// 類型推斷aa是個string， 后面aa只能賦值aa類型// 所以最好使用先聲明后// datapublic tableModelItems: Array<any>;constructor() {super();this.tableModelItems = [];}// computedpublic get filterTableData() {return this.tableData.filter((i: any) => i.refundStatus === 0).length// 方法// 聲明周期// 此時需要路由函數的生命周期鉤子咋辦beforeRouteEnterf() {next() // 一定要寫，否則玩不下去，為什么？}}} 復制代碼 - vue-property-decorator(依賴vue-component-class提供了更多了裝飾器，代碼更加顯示 )- @Emit- @Inject- @Prop- @Provide- @Watch - vuex-class（連接了vue和vuex）```js復制代碼

還沒搞定的bug

錯誤--》 類型報錯

添加script的類型

<script lang="ts"></script><!--否則下面的類型報錯--> 復制代碼

錯誤之--》Vue中掛載propoty出錯（如果還是爆紅，重啟ide）

聲明再掛載

<!--inject-->import _Vue from 'vue'import moment from "moment";export default {install(Vue: typeof _Vue, options: any) {Vue.prototype.$moment = moment;Vue.prototype.$log = () => {console.log(new Date())}}} <!--types-->import Vue from 'vue'declare module 'vue/types/vue' {interface Vue {$moment: Function$log: Function}} 復制代碼

ts中不能識別.vue文件

TypeScript 默認只識別 .ts 文件，不識別 .vue 文件, 乖乖的寫 import Component from 'components/component.vue'

vuex-class的Emit傳參數給父組件報錯

@emit("reset")reset(role, this.formData){}<!--此時報錯-->復制代碼

錯誤--> 可選參數爆紅

參考鏈接

• vue+ts快速上手

• ts通俗易懂，比較清晰的文檔

• ts的官網

• 尤大大對于ts+vue的看法

• 螞蟻金服的ts實踐

轉載于:https://juejin.im/post/5cbdeec85188250aa922d52b

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的ts基础总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。