我們 RN 項目中 .tsx,.ts,.style.ts 的區別

發現我們 RN 項目中,有.tsx,.ts,.style.ts 不同的文件,主要是有點混用啦

一、什么是 TypeScript

Typed JavaScript at Any Scale.
添加了類型系統的 JavaScript,適用于任何規模的項目。

  • 類型系統
    這樣的類型系統體現了 TypeScript 的核心設計理念[6]:在完整保留 JavaScript 運行時行為的基礎上,通過引入靜態類型系統來提高代碼的可維護性,減少可能出現的 bug。

  • 適用于任何規模

    • TypeScript 增強了編輯器(IDE)的功能,包括代碼補全、接口提示、跳轉到定義、代碼重構等,這在很大程度上提高了開發效率
    • TypeScript 還可以和 JavaScript 共存
引用:什么是 TypeScript

二、.tsx,.ts,.style.ts 的區別

  • .js 是javascript文件的擴展名,例如 main.js。
  • .jsx 是javascript文件并表明使用了JSX語法。
  • .ts 是 typescript 文件的擴展名
  • .tsx 表明是 typescript 文件并使用了JSX語法。

JSX 就是Javascript和XML結合的一種格式。
React發明了JSX,利用HTML語法來創建虛擬DOM。
當遇到<,JSX就當HTML解析,遇到{就當JavaScript解析。JSX 只是為 React.createElement(component, props, …children) 方法提供的語法糖。
React 自創了JSX語法,是一個 JavaScript 的語法擴展,官方建議在 React 中配合使用 JSX 來替代原始的 JS。因為JSX 可以更好的描述 UI 應該呈現出它應有交互的本質形式。JSX 看起來有點類似模版語言,但它具有 JavaScript 的全部功能。但是React的JSX語句并非js語言的標準語句(如果使用編輯器默認的js解析方案其實是會報錯的,現在編輯器允許你選擇不同的解析方案),但是后綴為.jsx,一般編輯器默認就用React的方式解析了。

基本上用哪個后綴名都一樣,只要編譯器/打包等構建工具/IDE能正確識別處理好,最后生成正常運行工作的js就好。

引用:.tsx是什么
So,我們默認:
  • ts 最簡單的typescript 文件,類似接口模型類
  • tsx 使用了JSX語法的typescript 文件,類似視圖顯示類
  • .style.ts 這個一般是表明 布局的單獨使用文件
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容