TypeScript入坑

TypeScript 入坑

安装

使用npm安装

使用全局方式安装

npm install -g typescript

编辑器

安装插件 https://github.com/Microsoft/TypeScript-Sublime-Plugin

https://packagecontrol.io/packages/TypeScript

编译使用node.js进行编译

hello world

编写ts文件

function greeter(person) {
	return "Hello world!" + person;
}
let user = "hello world";

document.body.innerHTML = greeter(user);

编译

PS C:\Users\mingm\Desktop\ts> tsc greeter.ts
Active code page: 65001
PS C:\Users\mingm\Desktop\ts>

上方为编译好的js文件

function greeter(person) {
    return "Hello world!" + person;
}
var user = "hello world";
document.body.innerHTML = greeter(user);

类型注解

function greeter(person: string){	// 将其注解为string类型
	return "hello," + person;
}

let user = [0, 1, 2];
document.body.innerHTML = greeter(user);

将其注解为string类型

变量声明

由于js没有块级作用域,使用var会出现以下问题

for(var i = 1: i <= 10; i++) {
}
console.log(i);

仍然可以访问i为10,由于js的变量作用注册在作用域链上造成的结果,解决方案,使用闭包

let

let属于块级作用域

const

赋值以后不能再改变

解构赋值

let input = [1,2];
let input1 = [2,3];
// 解构赋值
[input[0], input[2]] = [2,3]
// 同样的也可以创建剩余变量
let[first,...rest] = [1,2,3,4,5];
// first 为 1, rest 为[2,3,4,5]

联合类型

let myFavoriteNumber: string | number
myFavoriteNumber = "seven";
myFavoriteNumber = 7;
var myFavoriteNumber;
myFavoriteNumber = "seven";
myFavoriteNumber = 7;

访问联合类型的属性和方法

只能访问共有的属性和方法

function getString(something:string | number):string {
	return something.toString();
}
function getString(something) {
    return something.toString();
}

接口

对类的一部分行为进行抽象(即方法)抽象出接口。

防盗门和车都有报警这个方法,将报警这个方法抽象出来,成为这两个的接口

接口建议名称前加上I

// 定义一个接口,接口的类型名称为person
interface Iperson{
	name: string;
	age: number;
}

// 使用接口
function greeter(person: Iperson):string {
	return "hello world" + person.name + person.age;
}

// 传入对象
let user = { name: "hello world", age: 23 };
// 调用
document.body.innerHTML = greeter(user);
// 使用接口
function greeter(person) {
    return "hello world" + person.name + person.age;
}
// 传入对象
var user = { name: "hello world", age: 23 };
// 调用
document.body.innerHTML = greeter(user);

可选属性

// 定义一个接口,接口的类型名称为person
interface Iperson{
	name: string;
	age?: number;
}

// 使用接口
function greeter(person: Iperson):string {
	return "hello world" + person.name + person.age;
}

// 传入对象
let user = { name: "hello world"};
// 调用
document.body.innerHTML = greeter(user);
// 使用接口
function greeter(person) {
    return "hello world" + person.name + person.age;
}
// 传入对象
var user = { name: "hello world" };
// 调用
document.body.innerHTML = greeter(user);

接口传入任意值

// 定义一个接口,接口的类型名称为person
interface Iperson{
	name: string;
	age?: number;
	[propName: string]: any;	// 任意数据取string类型的值
}

// 使用接口
function greeter(person: Iperson):string {
	return "hello world" + person.name + person.age + person.ming;
}

// 传入对象
let user = { name: "hello world", ming:"hello world"};
// 调用
document.body.innerHTML = greeter(user);

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Laoqi's Linux运维专列

正则三剑客-sed

与grep不同的是,当使用sed匹配字符串的时候如下: #sed -n ‘//‘p file             // 内填写需要匹配的字符串 例如: #s...

3045
来自专栏大史住在大前端

javascript基础修炼(3)—What's this(下)

严格模式是ES5中添加的javascript的另一种运行模式,它可以禁止使用一些语法上不合理的部分,提高编译和运行速度,但语法要求也更为严格,使用use str...

1042
来自专栏源哥的专栏

给textarea增加长度的限制

给textarea增加长度的限制     我们知道文本框可以有一个为maxlength的属性,可以限制文本框的长度,当时备注框textarea却没有,那么 要怎...

892
来自专栏xingoo, 一个梦想做发明家的程序员

结构体的优化声明

声明一个结构体的时候,因为考虑到内存的对齐。例如,int型的变量,需要4个字节,那么它在存储的时候就需要在地址能够被4个字节整除的地方开始申请。 例如我们申请下...

18110
来自专栏xingoo, 一个梦想做发明家的程序员

Log4j官方文档翻译(七、日志格式化)

apache log4j提供各种layout对象,然后根据自己指定的layouts对象转化日志信息。通常来说都是应用量身定制layout对象转换信息格式。 所有...

1965
来自专栏大内老A

ASP.NET Web API中的Controller

虽然通过Visual Studio向导在ASP.NET Web API项目中创建的 Controller类型默认派生与抽象类型ApiController,但是A...

19210
来自专栏mySoul

DOM概述 选取文档元素

有些html标签会有name元素,区别于id,name属性的值不必是唯一的,多个元素可能存在相同的名字。

926
来自专栏jmeter高手高高手

Jmeter(五)_函数

1、它有两个参数,第一个参数是要执行的语句,可以是beanshell语句或者是文件地址,是必选参数;第二个参数是保存结果的变量名称,非必选参数。

1612
来自专栏杨龙飞前端

js中的this关键字,setTimeout(),setInterval()的执行过程

1305
来自专栏大前端_Web

关于Function.prototype.apply.call的一些补充

我们可以看到,ie9的document.getElementById是有Function.prototype上的方法的,所以说,IE9+的宿主对象它们继承了Ob...

1273

扫码关注云+社区