typescript的简介

简介

tsc

shell 复制代码
npm install -g typescript
shell 复制代码
tsc -v

作用

检查类型和语法错误,提前纠错

ts的类型

如何穿件带有ts的vue工程

作用

常见类型

用法

编写一个ts文件

js 复制代码
let username:string = "John";

let age:number = 25;

let isUpdated:boolean = true;

let data:any = "Hello World!";

console.log(username);
console.log(age);
console.log(isUpdated);
console.log(data);

编译

shell 复制代码
 tsc .\tsDemo.ts

效果

对应的ts文件下多了一个js文件

  • ts文件是不能直接运行的,只有编译成js才能运行
    这是编译之后的js文件
js 复制代码
var username = "John";
var age = 25;
var isUpdated = true;
var data = "Hello World!";
console.log(username);
console.log(age);
console.log(isUpdated);
console.log(data);

约束字面量类型(类似于enum枚举)

js 复制代码
myPrintFunction("Hello World!","center");
myPrintFunction("Hello World!","left");
myPrintFunction("Hello World!","right");

function myPrintFunction(content:string,alignment:'right'|'left'|'center'):void {
    console.log(content,alignment);
}
相关推荐
@小红花23 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵26 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲40 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年44 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456701 小时前
学习日记-HTML-day51-9.9
前端·学习·html