javascript - שגיאת תחביר לא נתפסת: מזהה בלתי צפוי (Typescript לפיתוח צד קדמי ללא מסגרת)

תיאור הפרויקט

התחלתי פרויקט שהוא קנבס HTML בסיסי, ללא מסגרות, וחשבתי שאשתמש ב-Typescript בגלל בדיקת הסוגים ובגלל שכבר השתמשתי בזה קודם עם React.
יש לי את קובץ ה-HTML הבסיסי הבא כדי לאתחל את הקנבס והסקריפט:

<html>
<head>
    <title>Interpolerende Veeltermen</title>
</head>
<body>
    <canvas id="canvas" height="1000px" width="1000px"></canvas>
    <script type="text/javascript" src="./build/main.js"></script>
</body>

כפי שאתה יכול לראות, אני טוען סקריפט שנקרא main.js בתיקייה build. תיקיית build הזו מכילה את כל קוד ה-TypeScript המומרים שלי (עם tsc).

נושא

כשאני מפעיל שרת ופותח את האתר ב-Chrome, אני מקבל את השגיאה הבאה:

Uncaught SyntaxError: Unexpected identifier

זה מתייחס לשורה 1 של הקובץ שלי main.js (שזה הסקריפט הראשון ש- index.html שלי קורא לו). שורה זו היא הפקודת ה-import הבאה:

import InterpolatingPolynomial from "./curves/InterpolatingPolynomial";

מה שניסיתי

ניסיתי לשנות את הקובץ tsconfig.json שלי. הוא מכיל כרגע את המידע הבא:

{
    "compilerOptions": {
        "outDir": "./build",
        "module": "esnext",
        "lib": ["esnext", "es7", "es6", "dom"],
        "target": "es6"
    },
    "exclude": ["node_modules"]
}

שיחקתי עם אפשרויות שונות של module ו-target אבל ללא הצלחה.

ראיתי כמה שאלות אחרות על הבעיה הזו, אבל אף אחד מהפתרונות לא נראה שעובד בשבילי. רובם השתמשו ב-Webpack, שיכול להיות הסיבה לכך. אבל אם מסתבר שפיספסתי שאלה ב-SO שתעזור לי, סמן אותה ככפולה בוודאות :)

ערוך

כאמור בתחילה, התיקיה build מכילה את כל קוד ה-TypeScript המורכב. אז כן, הקובץ שאני מתייחס אליו בקובץ ה-HTML שלי הוא אכן קובץ Javascript, ולא קובץ TypeScript. המרתי אותו באמצעות tsc.

תשובה #1

אתה לא יכול להריץ קבצי .ts ישירות, אתה צריך לקמפל אותם לגרסה שהדפדפן יכול להבין; ES4.

אנא עיינו בתיעוד כאן:

טייפסקריפט ובייבל

תשובה #2

הייתי צריך להשתמש ב-type= "module" בתגית הסקריפט שלי. זה פתר את הבעיה המקורית:

<script type="module" src="./build/main.js"></script>

בגלל כמה בעיות שנתקלתי בהן בשימוש בפקודות import, החלטתי גם להשתמש ב-bundler: Parcel. ניתן להשתמש בזה כדי לתרגם TS ל-JS ללא כל הגדרה. אין גם צורך להשתמש במאפיין type כשמשתמשים ב-Parcel.