其他分享
首页 > 其他分享> > TypeScript – Get Started

TypeScript – Get Started

作者:互联网

前言

我学 TypeScript 的时候是 Angular 2.0 beta 的年代... 现在 Angular 都快 14 了.

但由于已经有 1 年半没有写 Angular 和 TypeScript 了, 所以特地写来复习 warm up 一下, 也把这些年零零散散的知识集中写一下做个记入.

 

参考

Youtube – TypeScript Tutorial 1 – 21 非常简单的入门

Youtube – TypeScript Course for Beginners - Learn TypeScript from Scratch! 前半段是简单入门, 后半段的 config 值得看看.

Youtube – Typescript tsconfig tutorial 教 tsconfig

 

开发工具

Node.js

VS Code

Live Server (VS Code Plug-in)

前端开发少不了上面 3 个, 就不多介绍了

 

安装

创建项目

mkdir play-typescript
cd play-typescript
yarn init

安装 typescript

npm install typescript --global
yarn add typescript -dev

一个全局, 一个本地. compile 会以本地的为标准, 全局的目的是要它的 command

 

Compile & Run

打开 VS Code, 创建 index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./index.js" defer></script> <!-- 关键 -->
  </head>
  <body></body>
</html>

创建 index.ts

const h1 = document.createElement("h1");
h1.appendChild(document.createTextNode("Hello World"));
document.body.appendChild(h1);
View Code

运行命令

tsc index.ts

然后就会看见 index.js 被编辑出来了.

运行 Live Server

效果

这个就是最最最基本的使用方式

 

标签:index,typescript,Get,Started,h1,Youtube,TypeScript,Code
来源: https://www.cnblogs.com/keatkeat/p/16204725.html