学习任何知识都不是一蹴而就的。typescript也是如此。今天我们来初步的了解一下typescript的安装与编译。以及基础的语法知识。
第一步:安装ts
第二步:在安装好的文件夹里面,写上ts文件
第三步:编译ts文件
就会发现我们的目录多了js文件
通过以上方法,我们可以通过TypeScript写的JavaScript应用。
接下来让我们看看TypeScript工具带来的高级功能。
给 person函数的参数添加: string类型注解。
如果user值不是string类型的话,我...
//4.1定义类class Person{name:string;constructor(n:string){this.name = n;}getName():string{returnthis.name}setName(name:string):void{this.name = name;}
}
const p = new Person(‘qin‘);
p.setName(‘kai‘);//实现继承class Web extends Person{constructor(name:string){super(name)}
}
var w = new Web(‘li‘);
w.getName()//4.2类里的修饰符(ts定义属性时给我们提供了3种修饰符)
// public: 公有, 在类里...
class People {private _name: string;age: number; print() {return this._name + ":" + this.age + ":";}//加入封装,使外部可使用私有get name():string{return this._name;}set name(newName:string){this._name=newName;//可加判断if(newName =="aaa"){ }else{ }}
}
let h = new People();
// h.name ="aaa";//Property ‘name‘ is private and only accessible within class ‘People‘
//接口
h.name = "sss";
h.age = 19...
vue3用composition api 取代了之前的options api,并且加强了支持typescript,另代码可读性和可改性更强了,用习惯了setup函数真的可以说句,真香。但是不可避免的,需要趟一些雷,比方说element-plus的表单验证功能。由于setup里取消了this获取实例,就突然变得不知所措。以下是我填坑的一些经验。先看element-plus官方文档中的验证写法。methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) ...
在这一节,我们将介绍TypeScript中的类型推断。我们将会讨论类型推断需要在何处用到以及如何推断。基础在TypeScript中,在几个没有明确指定类型注释的地方将会使用类型推断来提供类型信息。var x = 3;变量"x"的值被推断为number。这种推断发生在变量或者成员初始化、设置参数默认值、决定函数返回类型的时候。最佳公共类型当需要从多个表达式中进行类型推断的时候,这些表达式的类型将会用来推断出一个"最佳公共类型"。例如:var x...
下周一就开始学习JQuery了,╮(╯▽╰)╭,好快啊。js最后的总结了,不,应该是课业的最后总结了,毕竟,学无止境 1namespace meng{2 export class Student{3 private _name;4 private _age;5 private _gender;6 7 constructor(name,age,gender){8this._name=name;9this._age=age;
10this._gender=gender;
11 }
1213 get name() {
14returnthis._name;
15 }
1617 set ...
TypeScript安装:npm install -g typescript 【全局安装TypeScript】tsc -v 【查看tsc版本】tsctypescript的编译工具【把typescript代码编译成浏览器可以执行的javascript代码】- 使用npm安装了全局typescript后会自动安装tsc 字符串:1.使用 `` 两个撇号连接,可以随意换行2.多行字符串表达式写法:【使用``双撇号包裹,绑定变量使用 ${} 】【不使用双撇号是不可以这样写的】3.自动拆分字符串调用函数时,不使用()小括号调用,...
交叉类型为将两个类型混合联合类型表示可以是几种类型之一,用 | 分隔如果一个值是联合类型,那我们只能访问次联合类型的所有类型的公共成员可以使用typeof检查基础类型和instanceof来详细类型typescript会把null和undefined区别对待nul和undefined是所有其他类型的一个有效值声明了--strictNullChecks 标记后,当你声明一个变量时,他不会自动的包含null和undefined。而可选参数和可选属性会被自动的加上undefined去除null的手段(...
/** 可索引接口** */// 对数组的的约束interface Lx { [idnex:number]:string}var arr:Array<string>=["1111111","2222222"]console.log(arr[1])//对对象的约束:index为string类型interface Obj { [index:string]:string}var obj:Obj={"jing":"guorui"}console.log(obj)//---------------------------------------------------------------------/** 类类型的接口,*implements用来继承类类型接口* */interface Animal {nam...
电脑环境:需要先安装好 1. nodejs (官网下载安装,安装8.0以上版本, 使用 node --version 查看是否安装成功)2. npm (安装好node时跟着就安装好了npm,使用 npm -v 查看是否安装成功)3. typescript (打开终端命令,输入 npm install -g typescript ,输入 tsc -v 查看是否安装成功) vscode 中搭建 react + typeScript 开发环境1. 新建一个空文件夹,比如命名为 react_add_ts 2. 在vscode中打开这个文件夹,注意这时候...
TypeScript新手指南众所周知, js 是一门弱类型语言,并且规范较少。这就很容易导致在项目上线之前我们很难发现到它的错误,等到项目一上线,浑然不觉地, bug 就UpUp了。于是,在过去的这两年, ts 悄悄的崛起了。周一随着一波热潮,也开始进入了 ts 的世界,不得不感叹 ts 的静态美。下面的文章中将讲解我对 TS 入门的一些归纳总结。一起来了解一下吧!一、什么是TypeScript?1、编程语言的类型动态类型语言(Dynamic Typed Lang...
最近在学习typescript。学习 嘛,当然免不了各种练习,试错。那么使用vscode就可以很方便的做到。首先是安装node.js。我们知道,node.js提供了js脱离浏览器的执行平台。node.js可以在官网下到,安装的时候下一步下一步就可以了。使用node.js的npm包管理工具安装插件。打开cmd输入一下命令安装全局插件(全局插件好像电脑上任何文件夹都可以访问,不过局部安装可以用tsconfig文件灵活的控制使用插件版本):npm install -g ts-nodenpm...
本篇将介绍TypeScript的命名空间,并简单说明一下与模块的区别。在之前的例子里,有如下一段代码,通过修改这段代码来演示命名空间的用法。 1interface Animal {2 name: string;3 eat(): void;4}5 6class Dog implements Animal {7 name: string;8 constructor(theName: string) {9this.name = theName;
10 }
1112 eat() {
13 console.log(`${this.name} 吃狗粮。`);
14 }
15}
1617class Cat implem...
版权文章转载自:https://github.com/zhongsp建议您直接跳转到上面的网址查看最新版本。介绍TypeScript的核心原则之一是对值所具有的shape进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。接口初探下面通过一个简单示例来观察接口是如何工作的:function printLabel(labelledObj: { label: string }) {console.log(labelledObj....
一、typescript配置tsconfig.build.json{"extends": "./tsconfig.json","compilerOptions": {"outDir": "./deploy/dist",},"exclude": ["node_modules", "dist", "test", "**/*spec.ts"]
} tsconfig.json{"compilerOptions": {"lib": ["es5", "es6"],"target": "es6","module": "commonjs","baseUrl": ".","paths": {"@common/*":["src/common/*"],"@configuration/*":["src/modules/configuration"],"@creative/*": ["src/modules...