var a = 1;
// ~~~
var a = 2;
console.log(a);

let a = 1;
// ~~~
let a = 2;     //這里就會報(bào)錯(cuò)
console.log(a);

var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

function varTest() {
  var x = 1;
  {
    var x = 2;  // 同樣的變量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  {
    let x = 2;  // 不同的變量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

function varTest() {
      var x = 1;
      function test() {
            var x = 2; // 不同的變量
            console.log(x); // 2
      }
      test();
      console.log(x); // 1
}
function letTest() {
      let x = 1;
      function test() {
            let x = 2; // 不同的變量
            console.log(x); // 2
      }
      test();
      console.log(x); // 1
}

console.log(name);
console.log(age);
var name = "測試";
let age = 18;

const a = 0;
const b = {
    c: 0,
    d: 1
}
b.c = 15;   // 沒有問題
b = 14;     // 拋出異常
a = 12;     // 拋出異常

let message = "什么玩意";
  let logMessage = `
    模板字面量是${message},
    我是第二行了吧
  `;
  console.log(logMessage) // 模板字面量是什么玩意

// 圖片地址
 let img_url = "https://upload-images.jianshu.io/upload_images/13962818-8ab62dc051112573.jpg";
 // 創(chuàng)建對象
 let img = new Image();
 // 改變圖片的src
 img.src = img_url;
 // 加載完成執(zhí)行
 img.onload = function () {
   // 打印
   console.dir(this);
 };

 // 創(chuàng)建對象
 let img1 = new Image();
 // 改變圖片的src
 img1.src = img_url;
 // 加載完成執(zhí)行
 img1.onload = () => {
      // 打印
      console.log(this);
 };

let arr = [1, 2, 3, 4, 5, 6, 7];
let filterArr = arr.filter((item) => item % 2 === 0);
console.log(arr, filterArr);

function sum(x = 1, y = 2, z = 3){
    return x + y + z;
}
sum();      // 6
sum(2 , 3); // 8

let params = [1,2,3];
console.log(...params);

function push(targetArr, ...nums){
    for(let i = 0,len = nums.length; i < len; i++){
        targetArr.push(nums[0]);
    }
}

let arr = [];
push(arr, 12, 45);
console.log(arr)

// Es5
const area = 3.14 * Math.pow(r, 2);
// Es6
const area = 3.14 * (r ** r);

// 1 
export const index = 5555;

const key = "key";
const good = 1234;

// 2 A
export {
      key,good
}

// B
export default {
      test :function(params) {
          console.log(params)  
      }
}

<script type="module">
            import { index } from "./index.js";    //導(dǎo)入1
            import utils from "./index.js";        //導(dǎo)入2
            import * as newUtils from "./index.js";//導(dǎo)入3
            console.log(index);
            console.log(newGood);
            console.log(newKey);
            utils.test("這個(gè)世界");
            console.log(newUtils);
            console.log(newUtils.index);
            console.log(newUtils.good);
            console.log(newUtils.key);
            newUtils.default.test("這個(gè)世界");
 </script>

const index = 5555;
const newInfo = 4444;
const key = "key";
const good = 1234;  
export {
      newInfo,
      index as newIndex
}
export default {
      newKey :key,
      good,
      test :function(params) {
          console.log(params)  
      }
}

<script type="module">
            import { newIndex, newInfo as info } from "./index.js";
            import utils from "./index.js";
            import * as newUtils from "./index.js";
            console.log(newIndex);         //關(guān)注點(diǎn)1 
            console.log(info);             //關(guān)注點(diǎn)2
            utils.test("這個(gè)世界");
            console.log(utils.good);
            console.log(utils.newKey);
            console.log(newUtils); 
            console.log(newUtils.newInfo);  //關(guān)注點(diǎn)3
            console.log(newUtils.newIndex); //關(guān)注點(diǎn)4
            newUtils.default.test("這個(gè)世界");
 </script>

// 1. 智能提示和自動完成
interface User {
    id: number;
    name: string;
    email: string;
    age?: number;
}

function processUser(user: User) {
    // 輸入 user. 時(shí)，IDE 會提示所有可用屬性
    console.log(user.name); // 有智能提示
    // console.log(user.nam); // 編譯時(shí)報(bào)錯(cuò)：屬性不存在
}

// 2. 重構(gòu)支持
// 重命名變量、函數(shù)、類時(shí)，TypeScript 能安全地更新所有引用

// 3. 代碼文檔化
/**
 * 計(jì)算兩個(gè)點(diǎn)的距離
 * @param p1 第一個(gè)點(diǎn)
 * @param p2 第二個(gè)點(diǎn)
 * @returns 兩點(diǎn)間的距離
 */
function calculateDistance(p1: Point, p2: Point): number {
    // 函數(shù)簽名就是文檔
}

// 4. 早期錯(cuò)誤檢測
const users: User[] = [];
users.push({ name: "張三" }); // 編譯時(shí)報(bào)錯(cuò)：缺少 id 和 email

// 5. 更好的協(xié)作
// 類型定義作為團(tuán)隊(duì)間的契約

// 1. 運(yùn)行時(shí)錯(cuò)誤
function processUser(user) {
    console.log(user.name); // 如果 user 是 undefined，運(yùn)行時(shí)崩潰
    console.log(user.nam);  // 拼寫錯(cuò)誤，運(yùn)行時(shí)返回 undefined
}

// 2. 文檔依賴注釋
/**
 * @param {Object} user - 用戶對象
 * @param {string} user.name - 用戶名
 * @param {string} user.email - 郵箱
 */
function processUser(user) {
    // JSDoc 注釋，但不是強(qiáng)制的
}

# 安裝 TypeScript
npm install -g typescript

# 編譯 TypeScript
tsc index.ts                    # 編譯單個(gè)文件
tsc -p tsconfig.json           # 使用配置文件編譯
tsc --watch                    # 監(jiān)聽模式

# 常用編譯選項(xiàng)
tsc --noEmit                   # 只檢查，不輸出文件
tsc --strict                   # 啟用所有嚴(yán)格檢查
tsc --target ES2020           # 指定目標(biāo)版本

# 現(xiàn)代瀏覽器直接支持 ES6 模塊
# 在 HTML 中
<script type="module" src="app.js"></script>

# Node.js 中（需要 package.json 中設(shè)置 "type": "module"）
node app.js

# 或者使用標(biāo)志
node --experimental-modules app.js