Jqueryが動きません。

概要

Jqueryの勉強をしているのですが、見本と同じコードにしてもエラーが出ます。
上が自分のコードで下が見本のコードです。何が違うんでしょうか？
vscodeで編集しているのですが、"button"の所で識別子が必要です(ts1003)、
clickの前の.で(property)(Missing):any 識別子が必要です(ts1003)、,が必要です(ts1005)、
.click(function(){~~~});の最後の;で,が必要です(ts1005)
と出ます。
index.htmlではJqueryを読み込むことは出来ていました。

script.js
1$(funcition(){
2    
3    $("button").click(function(){ 
4        
5        $("#topmenu").slideToggle(200);
6    });
7});

script.js
1$(function(){
2    // アイコンをクリック
3    $("button").click(function(){
4      // ul要素を開閉
5      $("ul").slideToggle(200);
6    });
7  });
8

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <link rel="stylesheet" href="style.css">
6        <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
7        <script src="script.js"></script>
8    </head>
9    <body>
10        <header>
11            <h1>samplecode</h1>
12            <ul id="topmenu">
13                <li>Jquery</li>
14                <li>Javascript</li>
15                <li>JS</li>
16            </ul>
17            <button class="tm-img"><img src="button.png" alt="menu" ></button>
18        </header>
19    </body>
20</html>

style.css
1@charset "utf-8";
2header{
3    background-color: darkslategrey;
4    color:white;
5    display:flex;
6    justify-content:space-around;
7    align-items: center;
8}
9#topmenu{
10    display:none;
11}