AWS Cloud9 がTypeScriptに対応したと聞いたので試してみた

AWS Cloud9 がTypeScriptに対応したと聞いたので試してみた:


結論

まだ、VS Codeは手放せない。

編集機能は概ね良い感じ。デバッグが課題。


準備

まずはコンソールから新規に環境を作ります。


起動したら、環境を確認 && nodeを更新。

bash
ec2-user:~/environment $ nvm --version 
0.31.7 
 
ec2-user:~/environment $ nvm ls 
->      v6.14.4   
         system   
default -> 6 (-> v6.14.4) 
node -> stable (-> v6.14.4) (default) 
stable -> 6.14 (-> v6.14.4) (default) 
iojs -> N/A (default) 
lts/* -> lts/argon (-> N/A) 
lts/argon -> v4.9.1 (-> N/A) 
lts/boron -> v6.14.4 
lts/carbon -> v8.12.0 (-> N/A) 
 
ec2-user:~/environment $ nvm ls-remote 
... 
       v10.12.0 
 
ec2-user:~/environment $ nvm install v10.12.0 
Now using node v10.12.0 (npm v6.4.1) 
 
ec2-user:~/environment $ nvm alias default v10.12.0 
default -> v10.12.0 
 
ec2-user:~/environment $ node -v 
v10.12.0 
ec2-user:~/environment $ npm -v 
6.4.1 
デモ用プロジェクトを作成します。

bash
ec2-user:~/environment $ mkdir demoapp 
ec2-user:~/environment $ cd demoapp/ 
ec2-user:~/environment/demoapp $ npm init -y 
ec2-user:~/environment/demoapp $ npm install -g typescript 
ec2-user:~/environment/demoapp $ npm install --save-dev @types/node 
app.ts
class Demo { 
    greet(name: string) { 
        console.log(`Hello, ${name}!`); 
    } 
} 
 
new Demo().greet('John Smith'); 
tsconfig.json
{ 
    "compilerOptions": { 
        "moduleResolution": "node", 
        "module": "es2015", 
        "target": "es2015", 
        "lib": ["es6", "es2015", "es2016", "es2017"], 
        "sourceMap": true, 
        "noEmitOnError": true, 
        "noImplicitAny": true, 
        "suppressImplicitAnyIndexErrors": true, 
        "noImplicitReturns": true, 
        "noImplicitThis": true, 
        "strictNullChecks": true, 
        // "noUnusedParameters": true, 
        // "noUnusedLocals": true, 
        // "noFallthroughCasesInSwitch": true, 
        "experimentalDecorators": true, 
        "emitDecoratorMetadata": true, 
        "baseUrl": ".", 
        "paths": { 
        }, 
        "types": ["node"] 
    } 
} 


使用

以下の画像の状態になります。


2.png


ヒントも表示されます。
3.png

4.png


もちろん、型チェックも働きます。
5.png


型情報の参照もこの通り!
9.png

10.png


ツリービューでファイルを選択し、メニューバーの「Run」をクリックすると、自動的にトランスパイルされて実行されます。


6.png


デバッグしてみましょう。ブレークポイントを張って… 「Run」!


7.png


止まらない⁉

リリース情報を確認してみましょう。
https://docs.aws.amazon.com/cloud9/latest/user-guide/projects.html


8.png

な、なんだってー!

まだ、sourcemapデバッグに対応してないの?

コメント

このブログの人気の投稿

投稿時間:2021-06-17 22:08:45 RSSフィード2021-06-17 22:00 分まとめ(2089件)

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

投稿時間:2021-06-17 05:05:34 RSSフィード2021-06-17 05:00 分まとめ(1274件)