TypeScript基础篇 - TS的Helloworld和环境配置

目录

ts-node（演示）

src/hello.ts

tsconfig.json(演示)

tsconfig.json

小节总结

总结一

总结二

总结三

一张ai生成图

---

ts-node（演示）

src/hello.ts

// : number 【类型的标注】,add(x, y): number// 标注返回值为数字
function add(x: number, y: number): number {
  return x + y
}
console.log(add(1, 222))

• Node环境的typescript解释执行器
  • REPL（Read eval print loop）【读取 解析执行 打印 循环】【人机交互模型】

npm install -g typescript
npm install -g ts-node
# npm install yarn -g // 全局安装yarn
# yarn global add ts-node
// 安装翻译编译器
npm install -g tsc

tsconfig.json(演示)

tsconfig.json

{
  "compilerOptions": { // 编译选项
    "outDir": "build" // 编译完的项放在build目录下
  }, // JSON Schemma【tsdai'ma'ti'shi】
  "include": [
    "src/**/*.ts"
  ] // src目录下所有ts文件都需要编译
}

• Typescript的配置文件
  • 放到项目根目录
  • 详细参数见：TypeScript: TSConfig Reference - Docs on every TSConfig option
  • input/output参数

小节总结

总结一

Typescript是JS的超集该如何理解？

• js有的TS都有，TS的一部分能力JS没有
• TS没有改变JS的语义

总结二

没学Typescript可以读懂Typescript程序吗？

• 能读懂一大部分，忽略类型标记就好了

总结三

TSC和TS-Node关系？

TSC【翻译编译器】：直接编译不执行，再去执行会很快，已经1转为JS了

TS-Node【在node环境下的解释器】:一边读取文件，一边去解析，一边执行，虚拟机，编译成本地执行的机器指令【JIT】

是不一样的东西，只是共用了某段程序【对源代码进行词法分析、编译】

一张ai生成图

1girl, ((cinematic light)), colorful, hyper detail, dramatic light, intricate details, best quality, (extremely detailed CG unity 8k wallpaper, masterpiece, best quality, ultra-detailed, best shadow), (detailed background:1.4), (beautiful detailed face, beautiful detailed eyes), High contrast, (best illumination, an extremely delicate and beautiful),(girl:1.5), solo, black skirt, blue eyes, electric guitar, guitar, headphones, holding, holding plectrum, instrument, long hair, music, one side up, pink hair, playing guiter, pleated skirt, black shirt, indoors ((caustic)), dynamic angle,beautiful detailed glow,full body, cowboy shot,