ดาวน์โหลด ASPTypeScriptSample - ดาวน์โหลดซอร์สโค้ด ASPTypeScriptSample

ASPTypeScriptSample

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

แอปพลิเคชันตัวอย่าง ASP + TypeScript แบบคลาสสิก

แรงบันดาลใจจากโพสต์นี้

นี่คือแอปพลิเคชันตัวอย่างที่พัฒนาด้วย asp และ typescript แบบคลาสสิก

แต่ทำไม

บางครั้งเราติดอยู่กับแอปพลิเคชันเก่าที่ทำงานใน asp แบบคลาสสิก

TypeScript เพิ่มเครื่องมือที่เป็นประโยชน์สำหรับการพัฒนา เช่น IntelliSense, การปรับโครงสร้างใหม่, ระบบคลาสจริง, ระบบประเภท, ข้อผิดพลาดด้านเวลาคอมไพล์, การเติมข้อความอัตโนมัติ, jsdocs และอื่นๆ

สามารถใช้ในแอปพลิเคชันที่มีอยู่ รหัสการแชร์ และสถานะเซสชัน

นอกจากนี้ยังสนุกกับการทำ :)

รันโครงการ

หากต้องการดึงข้อมูลแพ็คเกจ js และ css จาก nuget ให้รันคำสั่ง Update-Package -Reinstall จากคอนโซลตัวจัดการแพ็คเกจ

แพ็คเกจ handlebars.TypeScript.DefinitelyTyped ติดตั้งไฟล์ .d.ts สองไฟล์ จำเป็นต้องลบไฟล์หนึ่งสำหรับเวอร์ชัน 1.0.0

มันทำงานบน IIS Express มันสามารถดำเนินการได้โดยตรงจาก Visual Studio (โดยไม่ต้องดีบัก)

ลำดับการดำเนินการสคริปต์

สคริปต์ทำงานใน asp แบบคลาสสิกตามลำดับต่อไปนี้:

แท็ก <script runat="server"> ใด ๆ ที่ ไม่ ตรงกับภาษาเริ่มต้น
สคริปต์เริ่มต้น (ภายใน <% %> );
แท็ก <script runat="server"> ใด ๆ ที่ ตรง กับภาษาเริ่มต้น

เพื่อให้สามารถดำเนินการฟังก์ชัน main() หลังจากสคริปต์ที่รวมไว้ ภาษาเริ่มต้นปัจจุบันจะถูกเก็บไว้เป็น VBScript โดยมีคำสั่ง <%@ language="VBScript" %>

ทางเลือกหนึ่งในการใช้ typescript กับ asp คือการเพิ่มขั้นตอนในกระบวนการสร้างที่รวมเนื้อหาไว้ในแท็ก asp และเปลี่ยนนามสกุลเป็น .asp

แหล่งที่มา

การกำหนดค่า

การกำหนดค่าที่สำคัญบางประการสำหรับ typescript เมื่อกำหนดเป้าหมาย asp แบบคลาสสิก:

 {
    "compilerOptions" : {
        "target" : "es3" ,
        "lib" : [ "es5" , "scripthost" ] ,
        "module" : "none"
    }
}

ASP สามารถทำงานได้ด้วย VBScript หรือ JScript ซึ่งเป็นเวอร์ชันจาวาสคริปต์ของ Microsoft และเป็นไปตามข้อกำหนด ECMAScript 3

libs ประเภทเริ่มต้นที่ typescript ใช้นั้นรวมถึง apis ของเบราว์เซอร์ใหม่ที่กำหนดคำขอและวัตถุการตอบสนอง ดังนั้นเราจึงต้องกำหนด libs ที่เราต้องการใช้เพื่อให้สามารถกำหนดวัตถุเหล่านี้ด้วย api ของ ASP

ท้ายที่สุด asp ไม่รองรับเอาต์พุตโมดูลใด ๆ ที่เป็นไปได้

การซ่อนแหล่งที่มาของ asp

โค้ดฝั่งเซิร์ฟเวอร์ที่สร้างขึ้นจะมีนามสกุล .js ซึ่งปกติ IIS จะส่งไปยังไคลเอนต์ หากต้องการซ่อนแหล่งที่มาของ asp เราสามารถเพิ่มการกำหนดค่าต่อไปนี้:

 <!-- IIS 7+ -->
< system .webServer>
< security >
  < requestFiltering >
    < hiddenSegments >
      < add segment = " src " />
    </ hiddenSegments >
  </ requestFiltering >
</ security >
</ system .webServer>

การกำหนดค่านี้ใช้ไม่ได้กับ IIS 6 หรือต่ำกว่า

การกำหนดเส้นทาง

สำหรับแอปพลิเคชันนี้ แทนที่จะใช้ไฟล์ .asp ที่แตกต่างกัน รวมถึงแหล่ง js ที่จำเป็น เวิร์กโฟลว์ mvc ถูกใช้กับจุดเข้าเดียว Default.asp ซึ่งกำหนดเส้นทางด้วยพารามิเตอร์ QueryString

อีกทางเลือกหนึ่งคือการเปลี่ยนเส้นทางข้อผิดพลาด 404 ไปยังไฟล์ asp ซึ่งจะอ่านเส้นทางตามเส้นทางที่พยายาม

สถานะเซสชันและแอปพลิเคชัน

asp แบบคลาสสิกของไวยากรณ์ที่ใช้สำหรับการตั้งค่าเซสชันหรือสถานะแอปพลิเคชันไม่ได้รับการสนับสนุนโดย typescript:

 <%
Session("user_id") = 1
Application("connectionstring") = "some string"
%>

ทางเลือกอื่นคือการกำหนดฟังก์ชันเพื่อตั้งค่าเหล่านี้และประกาศอินเทอร์เฟซใน typescript เช่น:

 function setSession ( key , val ) {
    Session ( key ) = val ;
}

จากนั้นใน typescript:

 declare function setSession ( key : string , val : any ) : void ;

การจัดการข้อผิดพลาด

น่าเสียดายที่อ็อบเจ็กต์ Error ของ JScript ไม่ได้กำหนดคุณสมบัติสแต็ก ดังนั้นจึงไม่มีวิธีที่ง่ายในการสร้างสแต็กเทรซ เนื่องจากเมธอดของอ็อบเจ็กต์ถูกส่งออกมาเป็นฟังก์ชันที่ไม่ระบุชื่อโดยใช้ typescript

ห้องสมุดบุคคลที่สาม

แอปพลิเคชั่นนี้ใช้แฮนด์บาร์สำหรับสร้างเทมเพลตและ Moment.js สำหรับจัดการวันที่ ทั้งสองมีโครงสร้าง UMD (Universal Module Definition) ซึ่งเข้ากันไม่ได้กับ asp แบบคลาสสิก เนื่องจากไม่มีวัตถุโกลบอลอยู่

ใน asp JScript แบบคลาสสิก ตัวแปรในการปิดจะถูก "ส่งออก" ไปยังขอบเขตส่วนกลางหากมีการกำหนดไว้โดยไม่มีการประกาศ เช่น:

 ( function ( ) {
    var localFn = function ( ) {
        // ...
    } ;
    
    // classic asp export
    // this makes globalFn available in the global scope
    globalFn = localFn ;
} ) ;